使用 OpenAI API 构建 Next.js 应用程序的初学者指南
欢迎阅读我们的初学者指南，了解如何使用 OpenAI API 构建 Next.js 应用程序。在本教程中，我们将引导您完成利用 OpenAI API 的功能创建功能强大且智能的 Next.js 应用程序的过程。
Next.js 是用于构建服务器呈现的 React 应用程序的流行框架，而 OpenAI API 是将高级人工智能功能整合到您的应用程序中的强大工具。通过结合这两种技术，您可以创建一个功能强大且动态的 Web 应用程序，该应用程序可以随着时间的推移进行调整和改进。
在本指南中，我们将介绍设置 Next.js 应用程序、集成 OpenAI API 以及使用它向您的应用程序添加高级功能的基础知识。如何在 Windows 11/10 中更新显卡驱动程序我们还将提供示例和代码片段，以帮助您理解概念并在您自己的项目中实现它们。
无论您是开发新手还是经验丰富的专业人士，本指南旨在帮助您了解 OpenAI API 的潜力以及如何使用它来增强您的 Next.js 应用程序。那么，让我们开始探索 AI 驱动的 Web 开发世界吧！
先决条件
在深入研究之前，请确保您的计算机上安装了以下先决条件：
Node.js 和 npm（Node.js 包管理器）：这些是构建 Next.js 和 React 应用程序所必需的。您可以从官方网站 (https://nodejs.org/) 或使用 Homebrew (https://brew.sh/) 等包管理器下载 Node.js。
Yarn 包管理器：我们将使用 Yarn 包管理器在 Next.js 项目中创建和管理依赖项。Yarn 的安装说明可在项目网站上找到：https://yarnpkg.com/getting-started/install。
检索 OpenAI API 密钥
要获取 OpenAI API 的 API 密钥，您需要在 OpenAI 网站 (https://openai.com/) 上注册一个免费的 OpenAI 帐户：
要注册一个帐户，请单击主页右上角的“注册”按钮，然后按照提示创建一个新帐户。创建帐户后，您可以通过访问帐户设置的“API”部分来获取 API 密钥。
在“API”部分，您会找到一个标有“生成 API 密钥”的按钮。单击此按钮可生成一个新的 API 密钥，然后您可以使用该密钥从您的 Node.js 应用程序向 OpenAI API 发出请求。请务必妥善保管您的 API 密钥，不要与其他任何人共享。
设置项目
为了设置一个新的 Next.js 项目，我们将使用以下命令：
$ yarn create next-app然后你会被要求回答几个关于项目设置的问题：
此外，您需要为新项目指定一个名称。对于我们的示例，我们将选择名称 next-openai-app。这同时也是为包含初始项目设置而创建的文件夹的名称。
安装项目正在安装所有默认项目依赖项，最后您应该能够看到一条成功消息：
集成 OpenAI API
接下来我们需要再次使用 Yarn 安装 OpenAI API 客户端库，方法如下：
$ yarn add openai正在下载和安装软件包：
下一步是在我们的 Next.js 应用程序中创建一个能够保存 OpenAI API 密钥的环境变量。
在项目根目录新建文件 .env.local ，插入如下内容：
OPENAI_API_KEY=[INSERT YOUR OPENAI API KEY HERE][在此处插入您的 OPENAI API 密钥] 需要使用您之前从 OpenAI 仪表板检索到的 OpenAI API 密钥进行重放。
实施 API 端点
在我们的 Next.js 项目中，我们正在创建一个新的 API 端点，它能够使用 openai 包处理与 OpenAI API 的通信。
因此，我们正在创建一个新文件 pages/api/openai.js 并插入以下代码：
import { OpenAIApi, Configuration } from "openai";
const configuration = new Configuration({
apiKey: process.env.OPENAI_API_KEY,
});
const openai = new OpenAIApi(configuration);
export default async (req, res) => {
if (req.body.prompt !== undefined) {
const completion = await openai.createCompletion({
model: "text-davinci-003",
prompt: `${req.body.prompt}`,
});
res.status(200).json({ text: `${completion.data.choices[0].text}` });
} else {
res.status(400).json({ text: "No prompt provided." });
}
};此代码从openai包中导入 OpenAIApi 和 Configuration 模块，创建一个 Configuration 对象，并使用它来创建 OpenAIApi 的实例。它导出处理传入 HTTP 请求和响应的异步函数。该函数首先检查请求主体是否包含名为“prompt”的属性，如果存在，则调用 OpenAI API 实例上的“createCompletion”方法，传递一个包含模型 ID text-davinci-003 的对象以及请求正文中的提示文本。然后它发送一个 JSON 响应，状态代码为 200，文本属性包含 OpenAI API 返回的完成的第一选择。如果请求正文不包含提示，该函数将发送一个状态代码为 400 的 JSON 响应和一个带有消息“未提供提示”的文本属性。让我们通过输入以开发模式启动Web服务器
$ yarn dev服务器启动后，您可以切换到第二个终端实例并使用 curl 命令将 HTTP post 请求发送到 http://localhost:3000/api/openai 端点。该请求的 body 数据必须为 JSON 格式，并包含 prompt 属性：
$ curl -X POST -H "Content-Type: application/json" -d '{"prompt": "How are you"}' http://localhost:3000/api/openai因此，您应该能够看到从 OpenAI 返回的消息，为您的输入提供答案。
实施前端
接下来我们还需要在文件pages/index.js中添加前端代码来完成实现。首先添加以下代码行：
const [prompt, setPrompt] = useState("");
const [isLoading, setIsLoading] = useState(false);
const [response, setResponse] = useState("");此代码使用名为“useState”的 React Hooks 功能来初始化三个状态变量：“prompt”、“isLoading”和“response”。使用每个变量的初始值调用“useState”函数，“prompt”和“response”为空字符串，“isLoading”为“false”。
“useState”函数返回一个包含两个元素的数组。第一个元素是当前状态值，第二个元素是更新状态值的函数。这些元素被解构为变量“prompt”、“isLoading”、“response”、“setPrompt”、“setIsLoading”和“setResponse”。
变量“prompt”、“isLoading”和“response”可用于访问每个状态变量的当前状态值，函数“setPrompt”、“setIsLoading”和“setResponse”可用于更新状态每个状态变量的值分别。
const getResponseFromOpenAI = async () => {
setResponse("");
console.log("Getting response from OpenAI...");
setIsLoading(true);
const response = await fetch("/api/openai", {
method: "POST",
headers: {
"Content-Type": "application/json",
},
body: JSON.stringify({ prompt: prompt }),
});
const data = await response.json();
setIsLoading(false);
console.log(data.text);
setResponse(data.text);
};此代码定义了一个名为“getResponseFromOpenAI”的异步函数，用于从我们之前创建的名为“/api/openai”的 API 端点获取响应。
该函数首先使用“setResponse”函数将状态变量“response”重置为空字符串，然后将消息“Getting response from OpenAI…”记录到控制台。然后它使用“setIsLoading”函数将状态变量“isLoading”设置为 true，以指示请求正在进行中。
然后它使用 JavaScript Fetch API 向“/api/openai”端点发出 POST 请求，将“prompt”状态变量的当前值作为请求主体传递，并将“Content-Type”标头设置为“application” /json”。
等待来自 API 调用的响应，然后使用“json()”方法解析为 JSON。然后该函数使用“setIsLoading”函数将“isLoading”状态变量设置为 false，表示请求已完成。然后它使用“console.log(data.text);”将响应文本记录到控制台。最后，它使用“setResponse”函数用响应文本更新“response”状态变量。
此函数可能用于向 OpenAI API 发出请求，以根据“提示”状态变量的当前值获得响应，并将响应设置为“响应”状态变量，同时处理加载状态请求已发出并正在处理中。
让我们也调整 JSX 代码：