WHY IT MATTERS
先用一句白话理解
Next.js 像一间带前厅和后厨的餐厅：Server Component 在后厨准备不必送到浏览器的工作，Client Component 只负责客人真正要操作的部分。
LEARNING OUTCOMES
学完你能做到什么
使用 App Router 组织页面、布局、加载态和错误边界
正确划分 Server Component 与 Client Component
完成服务端数据读取、Server Function、缓存和重新验证
掌握 Streaming、Metadata、图片字体优化和 Route Handler
能完成鉴权、安全配置、监控和多平台部署准备
CONCEPT DEEP DIVE
把每个核心概念讲透
不要把知识点当作名词列表。下面每一项都要回到真实项目中回答：它解决什么问题，如何验证，以及在哪些条件下会失效。
App Router 文件约定
先区分组件、状态、渲染、网络与服务端边界。把这个概念放回“构建带文章、课程、搜索、订阅、草稿预览、后台和 SEO 的商业内容站。”中，回答它解决了什么问题、依赖哪些输入、会在哪些边界失效。
Server 与 Client Components
先区分组件、状态、渲染、网络与服务端边界。把这个概念放回“构建带文章、课程、搜索、订阅、草稿预览、后台和 SEO 的商业内容站。”中，回答它解决了什么问题、依赖哪些输入、会在哪些边界失效。
数据读取与 Streaming
先区分组件、状态、渲染、网络与服务端边界。把这个概念放回“构建带文章、课程、搜索、订阅、草稿预览、后台和 SEO 的商业内容站。”中，回答它解决了什么问题、依赖哪些输入、会在哪些边界失效。
Server Functions 与表单
先区分组件、状态、渲染、网络与服务端边界。把这个概念放回“构建带文章、课程、搜索、订阅、草稿预览、后台和 SEO 的商业内容站。”中，回答它解决了什么问题、依赖哪些输入、会在哪些边界失效。
Cache Components 与重新验证
先区分组件、状态、渲染、网络与服务端边界。把这个概念放回“构建带文章、课程、搜索、订阅、草稿预览、后台和 SEO 的商业内容站。”中，回答它解决了什么问题、依赖哪些输入、会在哪些边界失效。
Route Handlers
先区分组件、状态、渲染、网络与服务端边界。把这个概念放回“构建带文章、课程、搜索、订阅、草稿预览、后台和 SEO 的商业内容站。”中，回答它解决了什么问题、依赖哪些输入、会在哪些边界失效。
Metadata 与 SEO
先区分组件、状态、渲染、网络与服务端边界。把这个概念放回“构建带文章、课程、搜索、订阅、草稿预览、后台和 SEO 的商业内容站。”中，回答它解决了什么问题、依赖哪些输入、会在哪些边界失效。
Turbopack 与 Hydration 调试
先区分组件、状态、渲染、网络与服务端边界。把这个概念放回“构建带文章、课程、搜索、订阅、草稿预览、后台和 SEO 的商业内容站。”中，回答它解决了什么问题、依赖哪些输入、会在哪些边界失效。
Adapter API 与部署
先区分组件、状态、渲染、网络与服务端边界。把这个概念放回“构建带文章、课程、搜索、订阅、草稿预览、后台和 SEO 的商业内容站。”中，回答它解决了什么问题、依赖哪些输入、会在哪些边界失效。
CONCEPT MAP
这一章的学习步骤
完成包含嵌套布局、Loading 和 Error UI 的内容站
为读取与变更设计缓存标签和失效策略
完成一条从服务端表单提交到重新验证页面的闭环
用生产构建检查客户端包中是否混入服务器秘密
HANDS-ON PROJECT
动手任务
构建带文章、课程、搜索、订阅、草稿预览、后台和 SEO 的商业内容站。
交付清单
- ✓Server/Client 边界说明图
- ✓缓存与重新验证策略表
- ✓可部署的生产构建及安全检查单
MINIMUM RUNNABLE CODE
最小可运行的 Server Function 表单
export default function Page() {
async function subscribe(formData: FormData) {
"use server";
const email = String(formData.get("email") ?? "");
console.log("new subscriber", email);
}
return (
<form action={subscribe}>
<label>
邮箱
<input name="email" type="email" required />
</label>
<button type="submit">订阅</button>
</form>
);
}先让它跑起来，再逐行修改。最有效的学习方式，是观察你的改动如何影响结果。
DELIBERATE PRACTICE
三级练习：从复现到生产
每一级都比上一级少一点提示、多一点约束。只有在不看答案也能完成验收时，知识才真正变成能力。
让核心机制第一次跑通
- 完成包含嵌套布局、Loading 和 Error UI 的内容站
- 为读取与变更设计缓存标签和失效策略
- 完成一条从服务端表单提交到重新验证页面的闭环
- 用生产构建检查客户端包中是否混入服务器秘密
改变约束，验证你真的理解
- 不看教程，独立完成：使用 App Router 组织页面、布局、加载态和错误边界
- 不看教程，独立完成：正确划分 Server Component 与 Client Component
- 不看教程，独立完成：完成服务端数据读取、Server Function、缓存和重新验证
- 不看教程，独立完成：掌握 Streaming、Metadata、图片字体优化和 Route Handler
- 不看教程，独立完成：能完成鉴权、安全配置、监控和多平台部署准备
把实验变成能交付的工程
- Server/Client 边界说明图
- 缓存与重新验证策略表
- 可部署的生产构建及安全检查单
- 检查缓存、Hydration、错误恢复、可观测性和部署约束，并把检查结果写进项目复盘。
COMMON PITFALLS
最容易踩的坑
到处添加 use client，让整棵组件树失去服务端优势
把缓存理解成永久保存，忘记失效条件和一致性
在客户端组件中读取服务器环境变量或敏感数据
把 Next.js 16.3 Preview 功能写成稳定版必修内容
SELF CHECK
先回答，再展开参考答案
Q01这一课最核心的业务目标是什么？＋
用 App Router 构建真实内容与商业页面，掌握 Server/Client Components 边界、数据读取、缓存、变更、SEO 和部署，而不是把 Next.js 当成另一个路由库。
Q02如果只能保留三个验收结果，应该保留什么？＋
Server/Client 边界说明图；缓存与重新验证策略表；可部署的生产构建及安全检查单
Q03学习过程中最需要主动避免什么？＋
到处添加 use client，让整棵组件树失去服务端优势；把缓存理解成永久保存，忘记失效条件和一致性；在客户端组件中读取服务器环境变量或敏感数据；把 Next.js 16.3 Preview 功能写成稳定版必修内容
Q04怎样证明你不是“看懂了”，而是真的会做？＋
独立完成“构建带文章、课程、搜索、订阅、草稿预览、后台和 SEO 的商业内容站。”，并用测试、数据或运行结果逐项验收交付清单。
本课完成检查表
全部能打勾，再进入下一课。
- □目标明确：使用 App Router 组织页面、布局、加载态和错误边界
- □核心机制已用最小实验验证：完成包含嵌套布局、Loading 和 Error UI 的内容站
- □风险已检查：到处添加 use client，让整棵组件树失去服务端优势
- □风险已检查：把缓存理解成永久保存，忘记失效条件和一致性
- □风险已检查：在客户端组件中读取服务器环境变量或敏感数据
- □风险已检查：把 Next.js 16.3 Preview 功能写成稳定版必修内容
- □交付物可复现：Server/Client 边界说明图
- □交付物可复现：缓存与重新验证策略表
- □交付物可复现：可部署的生产构建及安全检查单
PRIMARY SOURCES
继续深入的官方资料
课程版本基线：2026 年 7 月。涉及版本号时，以链接中的官方文档为最终依据。