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

一、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:AI 应用开发的强大利器

(一)十分钟部署版

使用 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:AI 应用开发的强大利器

(一)项目初始化与目录结构

在使用 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 包装,就可以轻松地获取和更新用户状态,实现了数据流的有效管理。

四、案例分享与项目架构

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

(一)第一个开源项目经验

作者在完全没有编程经验的情况下,决定学习编程并从开源项目开始。在朋友的帮助下,作者几乎每一步都使用了 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 组件,使用这些函数来创建交互式聊天界面。

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

RA/SD 衍生者AI训练营。发布者:風之旋律,转载请注明出处:https://www.shxcj.com/archives/7244

Like (0)
Previous 2024-11-19 2:09 下午
Next 2024-11-19 2:50 下午

相关推荐

发表回复

Please Login to Comment
本文授权以下站点有原版访问授权 https://www.shxcj.com https://www.2img.ai https://www.2video.cn