Next.js 编程教程
欢迎学习 Next.js！本教程将带你从零基础开始，逐步掌握 Next.js 的核心知识和技能。
什么是 Next.js？
Next.js 是一个基于 React 的全栈 Web 应用框架，由 Vercel 公司开发和维护。它提供了构建现代 Web 应用所需的所有功能。
核心特性
- 路由系统：基于文件系统的路由，无需手动配置
- 服务端渲染（SSR）：支持服务端渲染，提升首屏加载速度和 SEO
- 静态站点生成（SSG）：构建时生成静态页面，性能极佳
- 服务端组件：React Server Components 支持，减少客户端 JavaScript 体积
- API 路由：在同一项目中构建 API 接口
- 图片优化：自动优化图片，支持懒加载
- TypeScript 支持：开箱即用的 TypeScript 支持
- 快速刷新：开发时保持组件状态的实时更新
为什么学习 Next.js？
- 开发效率高：内置路由、构建优化等功能，开箱即用
- 性能优秀：服务端渲染和静态生成带来极佳的用户体验
- SEO 友好：服务端渲染使搜索引擎能正确抓取页面内容
- 生态完善：与 React 生态无缝集成，社区活跃
- 就业前景好：越来越多企业选择 Next.js 构建产品
Next.js vs Create React App
| 特性 | Next.js | Create React App |
|---|---|---|
| 路由 | 内置文件系统路由 | 需要额外配置 |
| 渲染方式 | SSR / SSG / CSR | 仅 CSR |
| SEO | 友好 | 需要额外处理 |
| API 路由 | 内置支持 | 需要单独后端 |
| 图片优化 | 内置支持 | 需要额外配置 |
| 构建工具 | Turbopack / Webpack | Webpack |
App Router vs Pages Router
Next.js 13 引入了全新的 App Router，与传统的 Pages Router 并存：
App Router（推荐）
- 使用
app目录 - 支持 React Server Components
- 支持流式渲染
- 更好的布局嵌套支持
- 支持 React 19 新特性
Pages Router
- 使用
pages目录 - 传统路由方式
- 成熟稳定
- 向后兼容
推荐
新项目建议使用 App Router，它提供了更好的开发体验和性能。本教程以 App Router 为主。
教程目录
基础阶段
进阶阶段
高级阶段
- 中间件 - 请求中间件
- 部署与优化 - 部署和性能优化
- Server Actions - 服务端操作
知识速查
- 速查表 - Next.js 常用语法和知识点速查
学习建议
- React 基础：确保已掌握 React 基础知识
- 动手实践：每学一个知识点，都要动手编写代码
- 循序渐进：按照教程顺序学习，不要跳跃
- 阅读文档：遇到问题查阅 Next.js 官方文档
- 项目练习：通过实际项目巩固所学知识
参考资源
版本说明
本教程基于 Next.js 15 编写，涵盖以下主要特性：
- App Router：全新的路由系统
- React Server Components：服务端组件
- Turbopack：新一代构建工具
- Server Actions：服务端操作
- Partial Prerendering：部分预渲染
准备好开始学习了吗？点击下一章开始你的 Next.js 编程之旅！