深入解析:【前端学习】仿Deepseek官网AI聊天网站React
仿Deepseek官网AI聊天网站React
学习视频来源:仿Deepseek官网AI聊天网站React(Nextjs)项目实战哔哩哔哩bilibili
Next.js
一个 React web 应用框架就是利用 Next.js 来搭建 React 项目,Next.js
基本上使用了 Next.js 你不需要再去处理工程化相关事项。也能够通过很简单的方式去优化打包性能,且每次构建都会输出页面资源大小信息
官网:Next.js by Vercel - The React Framework
认识数以千计的精美网站,这些网站是采用 Vercel 的 Next.js 构建的:

Next.js 是一个用于构建全栈 Web 应用程序的 React 框架。您许可启用 React 组件来构建用户界面,并Next.js其他功能和优化。
它还会自动配置较低级别的工具,例如捆绑器和编译器。相反,您可以专注于构建您的产品并快速发货。
下载nodejs:Node.js — 下载 Node.js®
在开始之前,请确保您的框架满足以下要求:
- Node.js 18.18或以后。
- macOS、Windows(包括 WSL)或 Linux。

Node.js的自定义安装界面
- Node.js runtime运行 Node.js 工具的基础,必须安装。就是:Node.js 核心运行时(包含 node.exe),
- corepack manager:Node.js 内置的包管理器工具,用于管理 yarn、pnpm 等其他包管理器的版本。
- npm package manager:Node.js 官方的包管理器(Node Package Manager),用于下载、安装和管理工程依赖的第三方包(如 React、Next.js 等)。
- Online documentation shortcuts:在线文档快捷方式,安装后会在系统中生成指向 Node.js 官方文档的快捷方式,方便查阅。
- Add to PATH:将 Node.js 的可执行文件路径添加到系统环境变量 PATH 中。这样你就许可在任意命令行终端(如 CMD、PowerShell)中直接输入 node 或 npm 命令,无需手动指定安装路径。

Node.js的REPL(Read-Eval-PrintLoop,交互式解释器) 环境
要创建 Next.js 项目,需要
- 架构的命令行终端(比如 Windows 的 CMD/PowerShell、macOS/Linux 的 Terminal)
- 在命令行终端中执行:npx create-next-app@latest(此时是在正确的命令行工具CLI 环境中,能识别 npx 命令)。
创建新Next.js应用程序的最快方法是使用create-next-app,它会自动设置所有内容。要创建项目:npx create-next-app@latest
调整 PowerShell 的执行策略:
以管理员身份打开PowerShell
查看当前执行策略:Get-ExecutionPolicy
Restricted(默认值,禁止运行大多数脚本)
修改执行策略为RemoteSigned:执行命令(这是最常用的 “允许运行本地脚本,远程脚本需签名” 的策略,兼顾安全与开发需求):Set-ExecutionPolicy RemoteSigned



在 PowerShell终端中启动Next.js项目创建服务器
npm run dev
可以通过浏览器访问 http://localhost:3000 查看项目


浙公网安备 33010602011771号