next.js에서 chatgpt4o를 어떻게 사용하나요?
Next.js에서 ChatGPT-4 API를 사용하려면 OpenAI의 API를 호출하여 ChatGPT 모델과 상호작용할 수 있습니다. 다음은 Next.js 프로젝트에서 ChatGPT-4 API를 사용하는 방법에 대한 단계별 가이드입니다.
먼저, OpenAI의 API 키가 필요합니다. OpenAI 웹사이트에서 계정을 만들고 API 키를 생성하세요.
Next.js 프로젝트를 설정합니다. 새로운 프로젝트를 생성하거나 기존 프로젝트를 사용하세��.
npx create-next-app@latest my-chatgpt-app
cd my-chatgpt-app
API 키를 환경 변수로 저장합니다. 프로젝트 루트에 .env.local
파일을 생성하고 다음과 같이 설정합니다.
NEXT_PUBLIC_OPENAI_API_KEY=your_openai_api_key_here
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 });
}
이제 클라이언트 측에서 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>
);
}
프로젝트를 실행하여 ChatGPT-4와 상호작용할 수 있는지 확인합니다.
npm run dev
브라우저에서 http://localhost:3000
을 열고 프롬프트를 입력한 후 제출하면 ChatGPT-4의 응답을 확인할 수 있습니다.
이렇게 하면 Next.js 프로젝트에서 ChatGPT-4 API를 사용하여 대화형 애플리케이션을 만들 수 있습니다.