从今天开始，我们要开始学习next.js,会出一套完整的，系统性的教程，本教程是从零开始，当然前端基础还得要有的，js、ts、react等基础知识并不在本课程的范围之内。本节课程只是对环境的安装和配置教程。
系统要求
在开始之前，请确保您的系统满足以下要求：
必需软件
| 软件 | 最低版本 | 推荐版本 | 检查命令 |
|---|---|---|---|
| Node.js | 18.17.0 | 20.x LTS | node --version |
| npm | 9.0.0 | 10.x | npm --version |
| Git | 2.0 | 最新版 | git --version |
安装步骤
步骤 1：安装 Node.js
Windows 用户
- 访问 nodejs.org
- 下载 LTS（长期支持）版本
- 运行安装程序，按照提示完成安装
- 打开终端，验证安装：
node --version
npm --version
macOS 用户
使用 Homebrew 安装：
brew install node
或者从 nodejs.org 下载安装包。
Linux 用户
# 使用包管理器安装（Ubuntu/Debian）
curl -fsSL https://deb.nodesource.com/setup_lts.x | sudo -E bash -
sudo apt-get install -y nodejs
# 验证安装
node --version
npm --version
步骤 2：选择包管理器
Next.js 支持三种包管理器：
npm（默认）
npm --version
yarn（可选）
npm install -g yarn
yarn --version
pnpm（推荐，速度更快）
npm install -g pnpm
pnpm --version
步骤 3：安装代码编辑器
编辑器太多了，我最常用的是 Visual Studio Code，下载地址就不给贴了，随便百度一搜就有，vsCode有很多插件能给我们的开发带来极大的便利，下边是我推荐的插件
- ESLint
- Prettier
- Tailwind CSS IntelliSense
- Auto Import
- TypeScript Vue Plugin (如果使用 TypeScript)
创建 Next.js 项目
方法 1：使用 create-next-app（推荐）
这是创建新项目的最快方式：
# 使用 npm
npx create-next-app@latest my-app
# 使用 yarn
yarn create next-app my-app
# 使用 pnpm
pnpm create next-app my-app
交互式安装选项
运行命令后，您会看到以下选项：
选项说明
| 选项 | 含义 | 适用场景 |
|---|---|---|
| Yes, use recommended defaults | 使用推荐默认配置（TypeScript + ESLint + Tailwind CSS + App Router + AGENTS.md） | 推荐选择 - 适合大多数新项目，技术栈现代化 |
| No, reuse previous settings | 复用之前创建项目时的配置 | 你之前创建过项目且想保持相同配置 |
| No, customize settings | 自定义每一项配置（会逐个询问） | 有特殊需求（如不用 TypeScript、使用 Pages Router 等） |
我这里就选择了第一个，选择后等待一会，等项目创建、依赖安装完成项目就创建成功了，之后就可以得到当前项目
项目结构说明
my-app/
├── .gitignore # Git 忽略文件
├── next.config.js # Next.js 配置文件
├── package.json # 项目依赖和脚本
├── tsconfig.json # TypeScript 配置
├── tailwind.config.ts # Tailwind CSS 配置
├── postcss.config.js # PostCSS 配置
├── app/ # App Router 目录
│ ├── layout.tsx # 根布局
│ ├── page.tsx # 首页
│ └── globals.css # 全局样式
├── public/ # 静态资源
├── node_modules/ # 依赖包
└── README.md # 项目说明
运行开发服务器
# 进入项目目录
cd my-app
# 启动开发服务器
npm run dev
# 或
yarn dev
# 或
pnpm dev
开发服务器将在 http://localhost:3000 启动。
配置文件详解
package.json
{
"name": "my-app",
"version": "0.1.0",
"private": true,
"scripts": {
"dev": "next dev",
"build": "next build",
"start": "next start",
"lint": "eslint"
},
"dependencies": {
"next": "16.2.1",
"react": "19.2.4",
"react-dom": "19.2.4"
},
"devDependencies": {
"@tailwindcss/postcss": "^4",
"@types/node": "^20",
"@types/react": "^19",
"@types/react-dom": "^19",
"eslint": "^9",
"eslint-config-next": "16.2.1",
"tailwindcss": "^4",
"typescript": "^5"
}
}
脚本说明
| 命令 | 说明 |
|---|---|
npm run dev | 启动开发服务器（热重载） |
npm run build | 构建生产版本 |
npm start | 启动生产服务器 |
npm run lint | 运行 ESLint 检查 |
当看到这个页面完整运行的时候，这个next项目也就成功搭建了，项目环境也成功搭建好了，如果有疑问可以在评论区提出来大家一起学习。
