深入解析:【前端学习】仿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®

在开始之前,请确保您的框架满足以下要求:

  1. Node.js 18.18或以后。
  2. macOS、Windows(包括 WSL)或 Linux。

Node.js的自定义安装界面

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

Node.jsREPL(Read-Eval-PrintLoop,交互式解释器) 环境

要创建 Next.js 项目,需要

  1. 架构的命令行终端(比如 Windows 的 CMD/PowerShell、macOS/Linux 的 Terminal)
  2. 在命令行终端中执行: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 查看项目

posted @ 2025-11-10 17:19  yxysuanfa  阅读(5)  评论(0)    收藏  举报