Next.jsでChatGPTを実装する方法

この記事では、Next.jsを使ってChatGPT（OpenAIの会話型AI）を実装する方法について解説します。具体的なコード例と共に、簡単にChatGPTをウェブアプリケーションに組み込む手順を学びましょう。

1.Next.jsとは

Next.jsはReactベースのJavaScript フレームワークです。サーバーサイドレンダリング(SSR)や静的サイト生成(SSG)、API ルートなど様々な機能が提供されています。

// pages/index.js の例
export default function Home() {
  return (
    <div>
      <h1>Hello, Next.js</h1>
    </div>
  )
}

2.ChatGPTとは

ChatGPTはOpenAIが開発した会話型人工知能です。自然言語処理技術を活用しており、人間らしい自然な会話が可能です。

3.Next.jsでのChatGPTのセットアップ

最初に新しいNext.jsプロジェクトを作成します。

npx create-next-app@latest chat-gpt --use-npm --example "https://github.com/vercel/next-learn-starter/tree/master/hello-world"
cd chat-gpt

次に必要なパッケージ（axios）をインストールします。

npm install axios

そして.env.localファイル内にOpenAIキー（OPENAI_API_KEY）も設定します。

OPENAI_API_KEY=your_openai_key_here

このキーはOpenAI API キー管理ページから取得可能です。

4.APIルートでOpenAI API を呼び出す

Next.jsでは/pages/api ディレクトリ内にAPIルートを作成できます。ここではOpenAIのAPIを呼び出すエンドポイントを作成します。

// pages/api/chat.js の例

import { NextApiRequest, NextApiResponse } from 'next'
import axios from 'axios'

export default async (req: NextApiRequest, res: NextApiResponse) => {
  if (req.method === 'POST') {
    const { data } = await axios.post('https://api.openai.com/v1/engines/davinci-codex/completions', 
      { prompt: req.body.prompt, max_tokens: 60 }, 
      { headers: { 'Authorization': `Bearer ${process.env.OPENAI_API_KEY}` } }
    )
    res.status(200).json(data)
  } else {
    res.status(405).end() // Method Not Allowed
  }
}

5.フロントエンドからAPIルートを呼び出す

最後に、フロントエンドから上記のAPIルートを呼び出します。

// pages/index.js の例

import { useState } from 'react'
import axios from 'axios'

export default function Home() {
  const [text, setText] = useState('')
  
  const askGpt3 = async () => {
    const res = await axios.post('/api/chat', { prompt: text })
    setText(res.data.choices[0].text)
  }

  return (
    <div>
      <textarea value={text} onChange={(e) => setText(e.target.value)} />
      <button onClick={askGpt3}>Ask GPT-3</button>
      <p>{text}</p>
    </div>
  )
}

6.まとめ

この記事ではNext.jsでChatGPTを実装する方法について解説しました。Next.jsのAPIルート機能とOpenAI API を組み合わせることで、簡単にChatGPTをウェブアプリケーションに組み込むことが可能です。これらの技術はユーザー体験の向上や新たなビジネスチャンス創出に対して大いなる可能性を秘めています。

AIko Code Symphony