第 142 章:环境搭建
学习目标
- 安装 Node.js 20 LTS 和 pnpm
- 配置 VSCode 与必备插件
- 创建第一个 Next.js 项目
一、Node.js 安装
bash
# 下载:https://nodejs.org (选 20 LTS)
node -v # v20.x.x
npm -v # 10.x.x
# 配置国内镜像
npm config set registry https://registry.npmmirror.com二、pnpm 安装(推荐)
bash
npm install -g pnpm
pnpm -v # 9.x.x
pnpm config set registry https://registry.npmmirror.com三、VSCode 必备插件
| 插件 | 作用 |
|---|---|
| ESLint | 代码规范 |
| Prettier | 格式化 |
| Tailwind CSS IntelliSense | Tailwind 提示 |
| ES7+ React/Redux snippets | 代码片段 |
| TypeScript Vue Plugin | TS 提示 |
| Path Intellisense | 路径补全 |
| Auto Rename Tag | 标签重命名 |
| GitLens | Git 增强 |
四、创建项目
4.1 Next.js 项目(推荐)
bash
pnpm create next-app@latest my-app
# 交互选项
# ✔ TypeScript? Yes
# ✔ ESLint? Yes
# ✔ Tailwind CSS? Yes
# ✔ src/ directory? Yes
# ✔ App Router? Yes
# ✔ Customize import alias? No
cd my-app
pnpm dev # http://localhost:30004.2 Vite + React(更轻量)
bash
pnpm create vite my-app --template react-ts
cd my-app
pnpm install
pnpm dev五、目录结构
my-app/
├── app/ # App Router
│ ├── layout.tsx # 根布局
│ ├── page.tsx # 首页 /
│ └── globals.css
├── components/
├── public/
├── package.json
└── tsconfig.json六、本章小结
| 步骤 | 命令 |
|---|---|
| Node 安装 | node -v |
| pnpm 安装 | npm i -g pnpm |
| 创建 Next.js | pnpm create next-app |
| 启动 | pnpm dev |
动手练习
- 安装 Node 20 LTS
- 全局安装 pnpm
- 创建 Next.js 项目,启动看效果
- 在 VSCode 安装至少 5 个推荐插件
- 修改
app/page.tsx的标题
推荐阅读
下一章:第 143 章:第一个 Next.js 应用 →