Next.js 最佳实践

你在 App Router 里常踩的坑

Next.js 13+ 默认走 App Router，但很多项目仍把 'use client' 铺满页面、在浏览器里拉数据，或不清楚 静态 / ISR / 动态 该选哪一种。路由文件（loading.tsx、error.tsx）和缓存层（fetch、revalidate、路由段配置）叠在一起时，也容易写出「能跑但难维护」的结构。

技能在讲什么

本技能把 App Router 开发收成 十条可对照的原则，核心是：默认服务端组件，只在表单、按钮等交互处加客户端组件。

• 数据：构建时静态、revalidate 做 ISR、no-store 做按请求动态；数据库走服务端组件，用户输入走客户端状态 + Server Actions（'use server'、校验输入、类型化返回）。
• 路由：page / layout / loading / error / not-found 各司其职；路由组 (name)、并行 @slot、拦截 (.) 用于组织与模态，不改变「一文件一路由」的心智。
• API 与性能：Route Handler 按 HTTP 方法分工，输入用 Zod，尽量 Edge runtime；图片用 next/image，重组件 动态导入，配合 bundle analyzer。
• 元数据与缓存：静态 metadata 或 generateMetadata；缓存从 fetch、数据标签到整段路由分层控制，按需 revalidatePath / revalidateTag。

适用边界

这是 约定与决策清单，不是替代官方文档的 API 参考；具体框架版本差异需以项目为准。文中 项目结构 一节在资料里未展开，落地时仍要按团队目录规范自行补全。