- 001入门Next.js 16 概述与快速上手零基础第一课:理解元框架、App Router、服务器组件与客户端组件,用 create-next-app 五分钟跑起第一个项目,并建立 Next.js 16 的版本认知。
- 002入门服务器组件与客户端组件边界Next.js App Router 组件边界系统讲解:use client 指令的传播规则、服务器组件作为 children/props 穿过客户端组件的组合模式、props 序列化边界(函数为什么传不了)、第三方库缺 use client 时的包装层写法
- 003入门Next.js 样式方案全局 CSS、CSS Modules 与 Tailwind 的组织与取舍,以及 CSS-in-JS 在服务器组件下的边界
- 004中级Next.js App Router 路由系统布局嵌套、动态路由、导航预取、加载与错误状态——App Router 文件约定的完整入门。
- 005入门Next.js 高级路由约定:平行路由与拦截路由App Router 两组高级文件约定:@slot 平行路由(并行渲染、default.tsx 兜底、独立 loading/error)与拦截路由((.) (..) (...) 约定),配仪表盘多面板与商品模态框两个经典场景
- 006入门国际化路由与本地化[lang] 动态段路由、proxy.ts 语言协商、字典加载策略与静态渲染的配合
- 007中级Next.js 数据获取与缓存服务器组件直接取数、Next.js 15+ 的 fetch 缓存默认语义、四层缓存地图、按需失效与 ISR 增量静态再生。
- 008中级Route Handlers 与 API 设计用 route.ts 编写后端接口:方法、动态段、请求响应与缓存语义。
- 009中级Server Actions 与表单不写 API 也能改数据:'use server'、useActionState 与安全校验。
- 010进阶渲染策略与缓存SSG/ISR/SSR/流式渲染:给每个页面选对渲染方式。
- 011进阶缓存体系与 Cache Components 深入Next.js 16 缓存模型全景:use cache 指令、cacheLife 七档 profile、cacheTag 与 updateTag 按需失效、PPR 静态壳与动态洞,以及从传统缓存语义到新模型的完整迁移映射。
- 012中级Next.js AI 流式体验:Route Handler 与流式响应从「AI 回答要等几十秒」的问题出发建立流式体验心智模型:Route Handler 用 ReadableStream 透传 LLM 流式输出、客户端逐块解析 SSE、useChat 式流式 UI 标准形状(消息列表、isLoading、AbortController 中断)、模型流与 Suspense UI 流的区分、Server Actions 与 Route Handler 选型及安全成本纪律,附动手实验。
- 013中级认证、代理与安全会话、JWT 与 proxy.ts:守住 Next.js 应用的入口。
- 014入门调试与 DevToolsnext dev 错误覆盖层与 DevTools 面板读法、VS Code 服务端断点、Server Action 排错与生产 sourcemap 策略
- 015入门静态资源与性能优化next/image 与 next/font 的生产用法、bundle 体积分析与 Web Vitals 采集上报
- 016中级Next.js 部署与环境配置从 next build 到上线:Turbopack 构建产物怎么读、环境变量分级、四种部署方式(Vercel / standalone / Docker / 静态导出)怎么选。
- 017中级元数据与 SEOMetadata 对象与 generateMetadata、title 模板与 metadataBase、Open Graph 与 Twitter 卡片、opengraph-image 动态生成、sitemap 与 robots 文件约定,以及 JSON-LD 结构化数据。
- 018中级Next.js 学习总结:核心知识体系回顾串联 Next.js 模块全部文档,回顾 App Router 路由、数据获取缓存、API 层、渲染策略与部署安全的全链路。
- 019入门Next.js 应用的测试Next.js App Router 测试策略:Vitest + React Testing Library 测纯函数与同步组件(async 服务器组件的官方边界)、Route Handler 与 Server Action 的测试入口、Playwright 走真实渲染链路验证路由与表单,配购物车表单与列表页两个例子