渲染策略：三种上菜方式
同样是 React，Next.js 提供三种「上菜」时机：
| 策略 | 什么时候生成 HTML | 适合 |
|---|---|---|
| SSG 静态生成 | 构建时（deploy 前） | 教程、博客、文档 |
| SSR 服务端渲染 | 每次请求时 | 个性化、实时内容 |
| CSR 客户端渲染 | 浏览器里现算 | 强交互的后台面板 |
本站选 SSG：内容在构建时就变成了 out/ 目录下的一堆 HTML，访问时 CDN 直接递文件。
App Router：目录即路由
app/
├── page.tsx → / 首页
├── roadmap/page.tsx → /roadmap 学习路线
└── courses/[track]/page.tsx → /courses/ai 动态路由（方括号是参数）
不需要手写路由表，文件夹结构就是网址。配一条 output: 'export'，next build 就会把整站导出为纯静态文件。
上线：静态 + 一个 Serverless 函数
本站的完整架构：
浏览器 ──静态页面──> Vercel 全球 CDN（out/ 里的 HTML）
│
└──/api 请求──> Vercel 函数（香港 hkg1，Hono）
│
└──> Neon Postgres（新加坡）
部署只有三步：vercel login 登录 → vercel link 关联项目 → vercel --prod 构建并上线。环境变量（数据库连接串）在平台里配置，永不进代码库。
💡 你正在看的就是证据：这个学习网站本身就是「Next.js 静态导出 + Serverless API」这套方案的完整示例。