Next.js 完全指南:目录
By Leeting Yan
卷 I:基础篇
第 1 章:Next.js 简介与核心理念
1.1 Next.js 的出现背景
1.2 与 React 的关系
1.3 单页应用 → 混合渲染 → 全栈框架的演进
1.4 Next.js 的核心哲学
1.5 App Router vs Pages Router
1.6 适用场景与价值
第 2 章:快速上手:创建你的第一个项目
2.1 create-next-app 初始化
2.2 TypeScript 与目录结构
2.3 开发模式、热更新、调试工具
2.4 编写第一个页面 page.tsx
2.5 编写第一个 API route.ts
2.6 引入 TailwindCSS
2.7 发布到 Vercel
第 3 章:App Router 全解构
3.1 app/ 目录的设计理念
3.2 源码组织原则
3.3 Layouts、Pages、Templates 区别
3.4 嵌套路由、并行路由、拦截路由
3.5 Suspense / Streaming
3.6 Error Boundary 与 loading.tsx
卷 II:核心渲染模型篇
第 4 章:现代渲染模型:RSC、SSR、CSR 全讲透
4.1 CSR 的局限
4.2 SSR(Server-Side Rendering)
4.3 SSG(Static Generation)
4.4 ISR(Incremental Static Regeneration)
4.5 RSC(React Server Components)内部机制
4.6 混合渲染实战场景
第 5 章:Server Components 深入解析
5.1 Server Components 的设计动机
5.2 为什么它比 SSR 更高效
5.3 Hybrid Rendering:部分 UI 上客户端
5.4 Server Components 的缓存
5.5 流式渲染流水线
5.6 RSC 限制与最佳实践
第 6 章:Client Components 与浏览器交互
6.1 如何声明 use client
6.2 状态管理(useState / useReducer)
6.3 与服务端组件协作
6.4 事件、动画、图表等必须用客户端
6.5 重量组件拆分策略
6.6 与第三方 UI 库结合(Shadcn / MUI / AntD)
卷 III:数据获取与缓存篇
第 7 章:Next.js 的数据获取体系
7.1 fetch 的扩展机制(缓存 / 标签 / revalidate)
7.2 SSR fetch vs RSC fetch
7.3 强缓存 / 弱缓存 / 动态渲染
7.4 revalidatePath / revalidateTag
7.5 use / await 实战
第 8 章:Route Handlers(API 路由)
8.1 route.ts 的 GET/POST/PUT/DELETE
8.2 请求对象与响应对象
8.3 RSC 调用 route.ts 的方式
8.4 上传文件、流式 Body、JSON
8.5 安全、CORS、鉴权中间层
8.6 实战:构建一个 REST API
第 9 章:Server Actions(后端函数调用)
9.1 什么是 Server Actions
9.2 “use server” 的语法
9.3 表单 → Server Action → 数据库
9.4 调用规则与安全策略
9.5 与客户端组件协作
9.6 Server Action vs API Route 的选择
卷 IV:数据库与后端篇
第 10 章:连接数据库(Postgres / MySQL / SQLite)
10.1 如何在 RSC 中读数据库
10.2 Prisma 集成
10.3 Drizzle ORM 集成
10.4 连接池管理(Vercel / 自建服务器)
10.5 分页与缓存策略
10.6 使用 PlanetScale / Neon
第 11 章:认证与会话管理
11.1 使用 NextAuth.js 完整登录流程
11.2 OAuth(Google, Github, Steam)
11.3 JWT 与数据库 Session
11.4 自建 Token 认证(SaaS 必备)
11.5 中间件实现权限验证
11.6 多租户身份系统
第 12 章:中间件(Middleware)与 Edge Runtime
12.1 中间件的用途
12.2 重定向、安全、鉴权
12.3 域名路由、AB 测试、国际化
12.4 Edge Runtime 与轻量函数
12.5 静态缓存与边缘缓存协作
卷 V:UI、优化与工程化篇
第 13 章:Next.js + TailwindCSS 深度结合
13.1 最佳目录结构
13.2 布局组件与 UI 模块化
13.3 使用 shadcn/ui
13.4 响应式与暗色模式
13.5 主题系统与设计系统
第 14 章:图片优化与字体优化
14.1 next/image 内部工作原理
14.2 自托管 vs Vercel Image Optimization
14.3 next/font 自动子集化
14.4 字体加载策略(FOIT / FOUT)
第 15 章:SEO、OpenGraph、Metadata API
15.1 Metadata API
15.2 Sitemap + robots.txt
15.3 OG 图自动生成
15.4 国际化 SEO
15.5 性能指标优化(LCP / TTFB / CLS)
第 16 章:工程化:CI/CD、环境变量、Lint、测试
16.1 环境变量管理
16.2 Docker 化 Next.js
16.3 GitHub Actions 部署
16.4 Jest / Vitest / Playwright 测试
16.5 Monorepo(Turborepo)
卷 VI:高级篇:架构、SaaS、部署
第 17 章:多租户 SaaS 架构(行级隔离 + 域名路由)
17.1 Middleware 提取租户
17.2 数据库租户隔离(tenant_id)
17.3 Page → Server Action → DB 结构
17.4 权限系统设计
17.5 可扩展插件系统
17.6 SaaS 计费与元数据存储
第 18 章:国际化与多语言(i18n)
18.1 Next.js 内置国际化
18.2 URL 前缀与域名路由
18.3 使用 next-intl
18.4 服务端与客户端的翻译模式
18.5 LTR/RTL UI
第 19 章:WebSockets、实时功能与流式更新
19.1 在 Next.js 中使用 WebSocket
19.2 SSE(Server-Sent Events)
19.3 Streaming 更新 UI
19.4 聊天/实时仪表盘示例
第 20 章:部署:Vercel / Docker / Cloudflare / Render / Railway
20.1 Vercel 零配置部署
20.2 Dockerfile 最佳实践
20.3 Cloudflare Pages + Functions
20.4 Render 部署 SSR
20.5 使用 PM2 / Nginx 自建服务器
20.6 Edge Network 与 CDN
第 21 章:安全、性能与防护
21.1 CSRF / XSS / SSRF
21.2 HTTP Header 安全
21.3 速率限制
21.4 API 保护
21.5 RSC 安全边界
第 22 章:大型项目架构案例(综合示例)
22.1 博客系统
22.2 SaaS CRM(含多租户)
22.3 后台管理系统(RBAC)
- 附录 A:Next.js 常用 API 速查表
- 附录 B:经典错误与调试指南
- 附录 C:Next.js 与其他框架对比(Remix / Nuxt / Astro)
- 附录 D:项目模板与脚手架合集(含 20+ 示例)
- 附录 E:完整项目骨架(可直接复制)