next.js에서 chatgpt4o를 어떻게 사용하나요?

답변:

Next.js에서 ChatGPT-4 API를 사용하려면 OpenAI의 API를 호출하여 ChatGPT 모델과 상호작용할 수 있습니다. 다음은 Next.js 프로젝트에서 ChatGPT-4 API를 사용하는 방법에 대한 단계별 가이드입니다.

1. OpenAI API 키 얻기

먼저, OpenAI의 API 키가 필요합니다. OpenAI 웹사이트에서 계정을 만들고 API 키를 생성하세요.

2. Next.js 프로젝트 설정

Next.js 프로젝트를 설정합니다. 새로운 프로젝트를 생성하거나 기존 프로젝트를 사용하세��.

npx create-next-app@latest my-chatgpt-app
cd my-chatgpt-app

3. 환경 변수 설정

API 키를 환경 변수로 저장합니다. 프로젝트 루트에 .env.local 파일을 생성하고 다음과 같이 설정합니다.

NEXT_PUBLIC_OPENAI_API_KEY=your_openai_api_key_here

4. API 라우트 생성

Next.js의 API 라우트를 사용하여 서버 측에서 OpenAI API를 호출합니다. pages/api/chatgpt.js 파일을 생성하고 다음과 같이 작성합니다.

// pages/api/chatgpt.js
export default async function handler(req, res) {
  const { prompt } = req.body;

  const response = await fetch('https://api.openai.com/v1/engines/davinci-codex/completions', {
    method: 'POST',
    headers: {
      'Content-Type': 'application/json',
      'Authorization': `Bearer ${process.env.NEXT_PUBLIC_OPENAI_API_KEY}`,
    },
    body: JSON.stringify({
      prompt: prompt,
      max_tokens: 100,
    }),
  });

  const data = await response.json();
  res.status(200).json({ result: data.choices[0].text });
}

5. 클라이언트 측 코드 작성

이제 클라이언트 측에서 API 라우트를 호출하여 ChatGPT-4와 상호작용할 수 있습니다. pages/index.js 파일을 수정하여 다음과 같이 작성합니다.

import { useState } from 'react';

export default function Home() {
  const [prompt, setPrompt] = useState('');
  const [response, setResponse] = useState('');

  const handleSubmit = async (e) => {
    e.preventDefault();

    const res = await fetch('/api/chatgpt', {
      method: 'POST',
      headers: {
        'Content-Type': 'application/json',
      },
      body: JSON.stringify({ prompt }),
    });

    const data = await res.json();
    setResponse(data.result);
  };

  return (
    <div>
      <h1>ChatGPT-4 with Next.js</h1>
      <form onSubmit={handleSubmit}>
        <textarea
          value={prompt}
          onChange={(e) => setPrompt(e.target.value)}
          rows="4"
          cols="50"
        />
        <button type="submit">Submit</button>
      </form>
      <div>
        <h2>Response:</h2>
        <p>{response}</p>
      </div>
    </div>
  );
}

6. 실행 및 테스트

프로젝트를 실행하여 ChatGPT-4와 상호작용할 수 있는지 확인합니다.

npm run dev

브라우저에서 http://localhost:3000을 열고 프롬프트를 입력한 후 제출하면 ChatGPT-4의 응답을 확인할 수 있습니다.

이렇게 하면 Next.js 프로젝트에서 ChatGPT-4 API를 사용하여 대화형 애플리케이션을 만들 수 있습니다.