第 1 章：Next.js 简介
1.1 什么是 Next.js？
Next.js 是一个基于 React 的开源 Web 框架，由 Vercel 公司开发，旨在帮助开发者构建高性能的现代 Web 应用。
它的核心特点是：
- 内置支持 服务端渲染（SSR）
- 自动化的 静态页面生成（SSG）
- 支持 API 路由（后端函数）
- 极简配置、开箱即用
- 高度优化的性能体验（如图片优化、代码分割）
✅ 一句话总结：Next.js 是一个让你能用 React 写出既能跑前端也能跑服务端代码的框架。
1.2 Next.js 与 React 的区别（Next.js vs React）
| 比较项 | React | Next.js |
|---|---|---|
| 渲染方式 | 默认是客户端渲染（CSR） | 支持 SSR / SSG / ISR / CSR |
| 路由系统 | 需要使用第三方库（如 React Router） | 基于文件系统自动生成路由 |
| 构建工具 | 自己配置 Webpack、Babel | 内置配置，开箱即用 |
| API 接口支持 | 不支持，需要单独写后端 | 内置 API Routes，可写后端逻辑 |
| SEO 支持 | CSR 不利于 SEO | SSR/SSG 非常有利于 SEO |
| 图片优化 | 需要手动处理 | 内置 next/image |
📝 总结：Next.js 是对 React 的增强封装，它让你写 React 更轻松，适合中大型项目和对 SEO 要求较高的场景。
1.3 Next.js 的核心特性概览
| 特性 | 说明 |
|---|---|
| SSR（Server-side Rendering） | 页面在服务端实时渲染，首次加载速度快，有利于 SEO。 |
| SSG（Static Site Generation） | 页面在构建时生成静态 HTML，性能极佳。 |
| ISR（Incremental Static Regeneration） | 增量静态生成，可以在后台自动更新页面。 |
| API Routes | 在项目中编写后端接口（Node 函数），不用单独部署服务器。 |
| File-system Routing | 基于文件结构自动生成路由，不用再配置 react-router。 |
| Image Optimization | 内置图片懒加载、自动格式转换（WebP）等。 |
| TypeScript 支持 | 原生支持 TypeScript，无需额外配置。 |
| Middleware（中间件） | 提供基于请求的服务端逻辑能力，如权限、重定向等。 |
1.4 安装与项目初始化
✅ 环境要求：
- Node.js ≥ 16.x
- 推荐使用包管理器：
npm/yarn/pnpm
👉 使用命令快速创建项目：
npx create-next-app@latest my-app
# 或使用 yarn
yarn create next-app my-app
# 或使用 pnpm
pnpm create next-app my-app
然后进入项目目录：
cd my-app
npm run dev
默认会在 http://localhost:3000 启动本地开发服务器。
💡 项目名建议小写、无空格，符合包名规范。
1.5 文件结构说明
my-app/
├── node_modules/ # 项目依赖
├── public/ # 静态资源（图片、favicon、robots.txt等）
├── pages/ # 页面组件 & 路由系统（核心目录）
│ ├── index.js # 首页：对应路径 "/"
│ ├── about.js # 关于页：对应路径 "/about"
│ └── api/ # API 路由（后端逻辑）
│ └── hello.js # 对应接口 "/api/hello"
├── styles/ # 样式文件（默认使用 CSS Modules）
│ ├── globals.css
│ └── Home.module.css
├── .gitignore
├── package.json
├── README.md
└── next.config.js # Next.js 配置文件（可选）
🔖 小贴士：
pages/是最重要的目录，页面路由与文件名一一对应。public/中的资源可直接通过 URL 访问，无需引入。api/子目录下的.js文件是服务器端接口。
