Next.js 系列围绕“一次页面如何到达用户”展开，重点理解代码在哪里执行、页面何时生成、路由如何导航、数据如何读取，以及缓存和部署如何影响最终结果。这里仅保留方向，不提前规定每篇文章的完整结构。

核心问题

  • 一段代码运行在构建期、请求期还是浏览器？
  • URL 如何匹配路由，首次访问与客户端导航有什么不同？
  • HTML、JavaScript、Hydration 和 RSC 分别承担什么职责？
  • 数据变化后，页面为什么仍可能显示旧内容？
  • Pages Router 与 App Router 共享哪些问题，又有哪些不同机制？

知识地图

Next.js
├── 执行边界
│   ├── 构建期、请求期与浏览器
│   └── Browser、React、Next.js 与 Node.js
├── 路由与导航
│   ├── 文件路由与动态路由
│   ├── 首次访问、Link 与客户端导航
│   └── Pages Router 与 App Router
├── 渲染与页面交付
│   ├── CSR、SSR、SSG 与 ISR
│   ├── HTML、Hydration 与客户端交互
│   └── Server Components、RSC 与 Streaming
├── 数据与缓存
│   ├── 服务端读取与客户端读取
│   ├── Server Action、Route Handler 与 API Route
│   └── 缓存、重新验证与多实例边界
└── 运行边界
    ├── 错误传播与恢复
    ├── 输入、身份与授权
    ├── 构建产物与运行时
    └── 部署形态与验证边界

推荐推进顺序

  1. 先用“在哪里执行、何时执行”建立统一坐标。
  2. 再理解路由、预渲染、Hydration 和客户端导航。
  3. 使用当前 Pages Router 博客串起静态文章、请求期 sitemap、API Route 和浏览器留言。
  4. 使用独立小项目理解 App Router 的路由树、Server/Client Component、Streaming 和数据修改。
  5. 最后讨论缓存、错误、安全、构建和部署。

项目案例与边界

  • 当前博客是 Next.js 15 Pages Router，只用于证明当前代码路径。
  • App Router 使用独立实验；正式写作时再固定 Next.js 版本和缓存配置，避免混用不同模型。
  • 当前文章页没有配置 ISR，ISR 使用独立小实验说明。
  • Pages Router 的页面数据与 App Router 的 RSC Payload 不是同一种协议。
  • Node.js 负责 HTTP、进程、I/O 和连接等底层语义；Next.js 系列关注框架的路由、渲染、缓存和映射方式。