How to Integrate ChatGPT into Your Next.js Application

Integrating AI capabilities into your web applications has become essential in 2025. In this comprehensive guide, I'll show you how to add ChatGPT to your Next.js application.

Prerequisites

Before we begin, make sure you have: - Node.js 18+ installed - A Next.js 14 project - An OpenAI API key

Step 1: Install Dependencies

npm install openai

Step 2: Set Up Environment Variables

Create a .env.local file:

OPENAI_API_KEY=your_api_key_here

Step 3: Create API Route

Create app/api/chat/route.ts:

import OpenAI from 'openai'
import { NextResponse } from 'next/server'
const openai = new OpenAI({
  apiKey: process.env.OPENAI_API_KEY,
})
export async function POST(req: Request) {
  const { message } = await req.json()
  const completion = await openai.chat.completions.create({
    model: 'gpt-4',
    messages: [{ role: 'user', content: message }],
  })
  return NextResponse.json({
    response: completion.choices[0].message.content,
  })
}

Step 4: Create Chat Component

'use client'
import { useState } from 'react'
export default function ChatComponent() {
  const [message, setMessage] = useState('')
  const [response, setResponse] = useState('')
  const [loading, setLoading] = useState(false)
  const handleSubmit = async (e: React.FormEvent) => {
    e.preventDefault()
    setLoading(true)
    const res = await fetch('/api/chat', {
      method: 'POST',
      headers: { 'Content-Type': 'application/json' },
      body: JSON.stringify({ message }),
    })
    const data = await res.json()
    setResponse(data.response)
    setLoading(false)
  }
  return (
    

      

         setMessage(e.target.value)}
          placeholder="Ask anything..."
        />
        
          {loading ? 'Thinking...' : 'Send'}
        
      
      {response && 
{response}
}
    
  )
}

Best Practices

1. Error Handling: Always implement proper error handling 2. Rate Limiting: Implement rate limiting to prevent abuse 3. Streaming: Use streaming for better UX with long responses 4. Cost Management: Monitor API usage and set limits

Conclusion

Integrating ChatGPT into Next.js is straightforward with the OpenAI SDK. This opens up endless possibilities for AI-powered features in your applications.

Need help with AI integration? I'm available for freelance projects. [Get in touch](/contact)