NextJS：AI 应用开发的强大利器

一、NextJS 与 AI 应用开发的融合

NextJS 在 AI 应用开发中扮演着至关重要的角色，正逐渐成为开发者们的热门选择。其强大之处在于结合了现代 Web 开发的需求与 AI 技术的潜力。

NextJS 基于 React 构建，具备服务器端渲染、自动代码分割以及对开发者友好的 API 等优势。这使得开发者能够轻松创建强大且高效的 Web 应用程序。在 AI 应用开发中，NextJS 为开发者提供了稳定的框架基础，让他们能够专注于整合先进的 AI 模型。

例如，OpenAI 在 5 月 2 日公布的 openai-assistants-quickstart 开源项目，就展示了 NextJS 在实施 OpenAI 的 Assistants API 方面的能力。通过这个项目，开发者可以轻松地在自己的应用中集成 AI 助手功能，利用代码解释器、文件搜索器和函数执行器等工具，实现根据用户请求生成响应的功能。

此外，像 Viable 这样的客户分析初创企业也选择了 NextJS 和 Node.js 进行 AI 应用开发。Viable 利用 NextJS 框架创建用户界面和 API，其 CEO 指出，NextJS 可以轻松地在 UI 中的新页面中启动新的 API 端点，相比其他框架更加容易。而且，NextJS 的生态系统庞大，有很多围绕身份验证、数据源、UI 组件等构建的开源库，为开发者提供了丰富的工具，提高了开发效率。

在现代 Web 开发领域，将 NextJS 与 AI 模型结合，为创建智能、个性化和交互式用户体验打开了无限可能。无论是生成动态内容、开发聊天机器人，还是实现语言翻译和图像识别等功能，NextJS 都为开发者提供了强大的支持。

二、快速部署类 ChatGPT 应用

（一）十分钟部署版

使用 NextJS 官方脚手架创建新项目是一个相对简单的过程。首先，运行命令npx create-next-app@latest，在创建项目时，注意勾选 Tailwind CSS 以保证样式美观。接着，为了快速实现类 ChatGPT 应用，需要安装ai和@ai-sdk/openai这两个 npm 包。其中，ai是 Vercel 提供的用于接入 AI 产品、处理流式数据的库，@ai-sdk/openai是 Vercel 基于 openAI 官方提供的 SDK openai的封装。安装完成后，修改app/page.js和新建app/api/chat/route.js文件，配置.env.local文件，设置 OpenAI API Key。最后，命令行运行npm run dev，在浏览器无痕模式下打开http://localhost:3000/进行测试。若要部署到 Vercel，需要有 Vercel 账号并全局安装 Vercel Cli，在项目根目录运行vercel等待自动部署，部署完成后在平台设置环境变量并 Redeploy 一次，即可正常访问项目。

（二）五分钟部署版

如果想要更快速地部署 NextJS + OpenAI 官方模板，前提是拥有 Vercel 账号以及一个 API KEY。打开next-openai（https://github.com/vercel/ai/tree/main/examples/next-openai），点击 Deploy 按钮，然后在 Deploy 界面创建一个 GitHub 仓库，配置环境变量，最后等待部署即可。部署完成后可获取生产地址，这个官方模板除了刚才的例子，还提供了各种示例，也支持 GPT 4。

（三）Vercel AI SDK 的优势

Vercel AI SDK 在处理 AI 和流时具有显著优势。Node 有自己的 Stream 同时也支持 Web Stream，各种类型的流牵涉到各种概念和 API，处理起来非常繁琐，让人头疼。而 Vercel 的 AI SDK 针对多个 AI 模型都提供了 Providers，也支持 Stream。它为 OpenAI、LangChain 和 Hugging Face Inference 提供一流的支持，无论首选的 AI 模型提供商是哪个，都可以利用 Vercel AI SDK 创建前沿的流式 UI 体验。加上是 Vercel 出品，质量有保证，属于官方推荐产品，所以已经成为 NextJS 项目接入 AI 的第一选择。

三、NextJS 全栈开发与数据流管理

（一）项目初始化与目录结构

在使用 NextJS 进行全栈开发时，项目初始化通常可以通过以下步骤进行。首先，安装 Next.js，可以使用命令 npm install next react react-dom。在项目根目录下创建 package.json 文件，可通过命令 npm init -y。接着添加 Next.js 的打包和开发脚本，在 package.json 的 “scripts” 部分添加 “dev”: “next”, “build”: “next build”, “start”: “next start”。同时添加 React 和 React DOM 作为依赖，在 “dependencies” 中添加 “next”: “^9.2.1”, “react”: “^17.0.1”, “react-dom”: “^17.0.1″。创建 pages/index.js 文件作为首页，例如：

function Home() {  return <h1>Hello world!</h1>;}export default Home;

启动 Next.js 开发服务器，使用命令 npm run dev。

NextJS 的目录结构通常包括 pages 目录，用于存放页面组件，每个页面渲染对应组件都放在这个目录下。还有 public 目录用于存放静态资源，如图片、字体等。styles 目录可以存放样式文件，支持 CSS 模块和 Sass。api 目录用于创建 API 端点，提供后端功能。此外，还有 node_modules 目录存放项目依赖，package.json 和 package-lock.json 文件用于管理项目依赖和脚本。

（二）Context 管理数据流

React 的 Context API 是一种在 React 应用中管理全局状态的有效方式。在 NextJS 全栈开发中，可以使用 Context API 来管理数据流，确保数据在不同组件之间的高效传递。

以 User.tsx 和 Chat.tsx 为例，首先创建一个上下文提供程序来处理特定页面的身份验证。例如：

import React, { useState, createContext, useEffect, useContext } from "react";import LogIn from "../../components/adminUI/auth/Login";import { auth } from "../firebase";const AuthContext = createContext({ user: null, isLoding: false, error: null });const AuthContextProvider = (props) => {  const [user, setUser] = useState(null);  const [isLoding, setIsLoading] = useState(false);  const [error, setError] = useState(null);  useEffect(() => {    // listen for auth state changes    auth.onAuthStateChanged((user) => {      if (user) {        setUser(user);      } else {        setUser(null);      }      console.log("user> ", user);    });  });  /**   * render given component   * @param {object} children   */  const renderAuth = (children) => {    return (<div>{children}</div>);  };  // if not authenticated, render Login  if (!user) return renderAuth(<LogIn/>);  return (<AuthContext.Provider value={{ user, isLoding, error }}>{props.children}</AuthContext.Provider>);};export const useAuth = () => useContext(AuthContext);export default AuthContextProvider;

在 Chat.tsx 组件中，可以通过 useAuth 钩子来访问用户状态上下文。这样，无论在哪个组件中，只要使用了 AuthContextProvider 包装，就可以轻松地获取和更新用户状态，实现了数据流的有效管理。

四、案例分享与项目架构

（一）第一个开源项目经验

作者在完全没有编程经验的情况下，决定学习编程并从开源项目开始。在朋友的帮助下，作者几乎每一步都使用了 ChatGPT，从设置环境到安装、连接 API，再到理解代码的含义以及重写函数或更改大小。

在设置环境阶段，作者在朋友的建议下设置了包管理器 tea，它可以帮助安装 node、npm、vercel 和开发所需的其他软件包。接着，作者使用 TypeScript 和 Tailwind CSS 设置 Next.js，通过一系列的命令创建了一个新的 Next.js 项目，并选择了合适的配置。

在查找开源项目阶段，作者使用了两个开源项目：Twitter Alghoritm 和 Twitter Bio generator。作者将它们以 zip 格式下载到计算机上，以便在此基础上进行构建。

在理解代码阶段，作者一开始对看到的代码感到困惑，于是向 ChatGPT 询问应用程序的基本结构，包括复制每个页面的代码并询问其作用以及如何进行更改。通过这种方式，作者逐渐对应用程序和 CSS 有了基本的概念。

在构建项目阶段，作者在了解了一些基础知识之后，开始在这些项目之上构建应用程序。程序包含两个部分：排名和生成器。LinkedIn 帖子生成器算法排名是根据不同的标准对帖子进行排名，从而提高性能。作者使用了多个函数来实现这个功能，例如检测多个主题标签的函数、检测图像或视频的函数、检测网址的函数等。

（二）AIGC 知识库项目架构

前端转全栈的 AIGC 知识库项目 “划水 AI” 有着明确的要求。这个项目必须是真实上线运维的项目，具备域名、备案、SSL 证书、服务器或 Serverless 服务、数据库、CDN、OSS、统计、监控报警等基础服务，还有手机号注册、微信扫码登录、微信支付或退款等常见功能。项目要有一定的技术难度和挑战性，会开发编辑器、AI 能力集成、多人在线协同编辑等功能，这些放到简历中都是亮点。

项目的功能介绍丰富。首先它是一个知识库平台，支持富文本编辑和团队、多人协同编辑。在此基础上，在富文本编辑器中增加 AI 辅助写作功能，例如在空格行点击 space 键唤起 AI 输入框，输入 prompt 提示语让 AI 生成内容，还可以选择一段文字交给 AI 来处理（扩展、缩短、总结、翻译等）。此外，基于这个知识库平台，可集成更多的形式，像 AI 生成图片、音频、视频，或者让 AI 自动审核、发布或者评论。

项目的架构设计图概述了所有的功能。作为 wangEditor 作者，开发者在富文本编辑器方面有优势，而 AI 写作需要将富文本编辑器的能力和 AI 能力结合起来，开发过程难上加难，但一旦做出来效果加倍。用户管理方面，开发注册用户要支持多种注册方式，如微信扫码、github 登录、短信验证码、邮箱验证码等，还要有严格的用户管理机制。VIP 和支付功能方面，由于 ChatGPT 等 AI 模型的 API 都是收费的，所以项目需要搞一个 VIP 和收费机制才能持续运行。

（三）AI 视频下载课程

使用 NextJS 和 OpenAI API 克隆 ChatGPT 的课程内容丰富，涵盖了从设置 Next.js 开发环境到使用 Vercel 将完成的 ChatGPT 聊天机器人克隆部署到网络上的每一个步骤。课程将在 2023 年底进行完整更新，以使用 Next.js 13 应用程序目录。

在这个课程中，学员将学习如何使用 Next.js v13、OpenAI 的 GPT API、Next.js 边缘函数流式传输聊天响应、MongoDB 进行数据存储、Auth0 进行用户认证和用户账号管理以及 Tailwind CSS 进行漂亮的布局和样式设计，创建一个名为 “Chatty Pete” 的强大聊天机器人，其功能与 ChatGPT 相同。课程总时长 4 小时 36 分钟，非常适合希望扩展技能组合，并学习如何使用最新技术构建复杂 Web 应用程序的开发人员，尤其是那些希望通过学习如何创建 SaaS 产品并开始利用 AI 力量来提高其作为开发人员的价值的 React 开发人员。

（四）创建 ChatGPT 应用程序

使用 NextJS、OpenAI API 和其他技术创建 ChatGPT 应用程序需要满足一些先决条件。首先，你的机器上需要安装 Node.js 和 npm，并且要有 React 和 TypeScript 的基本理解，还需要一个 OpenAI API 密钥，可以在 OpenAI 网站上注册帐户并生成。

创建 ChatGPT 应用程序的步骤如下：

1. 设置项目：使用 Apideck 的 Next.js 入门套件来设置项目，它预装了 TypeScript、Tailwind CSS 和 Apideck 组件库。使用命令行创建新项目后，在项目根目录下创建一个 .env.local 文件，并添加 OpenAI API 密钥。
2. 编写 API 客户端：为了不暴露 OpenAI API 密钥，创建一个 API 端点，而不是直接从浏览器向 API 发出请求。在项目的页面文件夹中创建一个名为 api 的子文件夹，并在其中创建一个名为 createMessage.ts 的 TypeScript 文件，用于生成与 AI 的 “对话” 的新消息。
3. 创建消息功能：首先创建 “sendMessage” 函数，通过 API 端点在用户界面和 AI 之间建立通信。然后设置逻辑，在 useMessages 挂钩内创建新消息。最后设计 UI 组件，使用这些函数来创建交互式聊天界面。

免费小程序《字形绘梦》上线啦！

欢迎大家体验！