综合练习与部署

这一课你将能做到

1. 独立完成一个端到端小功能：「学习笔记」——动态路由 + Server 取数 + Server Action 写入 + 门控，把 12 课知识串成一条线
2. 跑通 npm run build 并读懂路由输出表，修掉构建期暴露的类型与环境问题
3. 完成一次真实部署（Vercel 或 Node 服务器 + Nginx），并掌握上线前检查清单

为什么要学

课程学到这里，你已经有了完整的技术地图：路由、RSC、取数缓存、渲染模式、接口、MDX、样式、认证，还走读过生产仓库。但「知道」和「做出来」之间隔着一个构建与部署的深渊——大量项目死在最后一公里：npm run build 时类型报错、部署后环境变量丢失、页面白屏、后端跨域 403。本课把最后这一公里走完。

综合练习的题目刻意选得小而全：「学习笔记」功能 200 行代码以内，却同时用到动态路由（第 3 课）、Server 取数（第 5 课）、Server Action 写入、门控（第 10 课）、Tailwind（第 9 课）。做完它，你就有了一个能写进简历、能当面演示、能被面试官追问细节的完整作品。

部署的意义再强调一次：面试官对「本地能跑」和「线上能访问」的项目，评估完全不同。一个有公网 URL 的作品集，胜过十份「代码在我电脑上」的简历。

先建立图像

本课的完整交付物架构：

┌─ 你的 Next.js 项目（生产构建产物）
│    /notes            列表页（Server：读当前用户笔记）
│    /notes/new        新建页（Server Action 提交）
│    /notes/[id]       详情页（动态段）
│    /api/auth/*       登录/登出 BFF（第 10 课代码复用）
└─ 数据来源（三选一，练习难度递增）
     ① 本地 JSON 文件（fs 读写，纯前端自洽）
     ② 内存 Map（重启即失，最快验证）
     ③ Spring Boot REST（真实架构，对接第 5 课封装）

部署形态对比：
  Vercel：git push 即部署，免费额度，零运维 ← 练习推荐
  Node 服务器：npm run build && npm run start，Nginx 反代 ← 企业常见
  Docker 容器：环境一致，本站 platform 就是 Dockerfile 部署

上线前后行为差异速查（踩坑高发区）：

环节	dev 行为	生产行为
环境变量	读 .env.local	读部署平台配置（构建时注入）
未捕获错误	红屏详细堆栈	白屏/error.tsx，细节进日志
路由渲染	一律动态、即时生效	按 build 判定，静态页冻结
localhost	指向你的机器	指向服务器自己，注意 API 地址

跟着做

步骤 1：搭建笔记模块骨架

src/app/notes/
├── page.tsx          # 列表
├── new/page.tsx      # 新建
├── [id]/page.tsx     # 详情
└── actions.ts        # Server Action（写操作）

数据层用内存 Map（步骤最简，真实项目换成 fetch Spring Boot）：

// src/lib/notes.ts
export interface Note {
  id: string;
  title: string;
  content: string;
  createdAt: string;
}

const notes = new Map<string, Note>();

export async function listNotes(): Promise<Note[]> {
  return [...notes.values()].sort((a, b) => b.createdAt.localeCompare(a.createdAt));
}

export async function getNote(id: string): Promise<Note | null> {
  return notes.get(id) ?? null;
}

export async function createNote(title: string, content: string): Promise<Note> {
  const note: Note = {
    id: crypto.randomUUID(),
    title,
    content,
    createdAt: new Date().toISOString(),
  };
  notes.set(note.id, note);
  return note;
}