用途:这是一份针对 Next.js 14+ App Router 的开发模式参考,帮助开发者按约定组织路由、布置数据获取与缓存、编写中间件和服务端操作,并以反模式和检查清单自查代码质量。
主要能力与内容:
- App Router 目录约定:layout.tsx、page.tsx、loading.tsx、error.tsx、not-found.tsx;路由组 (marketing) 只组织代码不影响 URL;并行路由 @analytics、@activity 等 @slot 可同时渲染多个页面;api/webhooks/route.ts 作为路由处理器。
- 服务端组件与数据获取:默认使用服务端组件,可直接访问数据库、不向客户端发送 JavaScript;用 Suspense 包裹较慢的异步组件;通过参数对象读取动态路由参数。
- ISR 与缓存:导出 revalidate 常量设定重新验证周期;fetch 可传入 next: { revalidate, tags };变更数据后在 Server Action 中调用 revalidateTag 或 revalidatePath。
- 中间件:在边缘于每个匹配请求前运行,可用于会话校验、重定向与设置响应头;通过 config.matcher 限定匹配路径,应保持轻量。
- Server Actions:以 "use server" 声明,结合 Zod 校验表单输入,写入数据库后调用 revalidatePath 刷新页面数据。
反模式要点:不要在顶层 layout 或 page 添加 'use client';不要在客户端可服务端完成时改为客户端获取;避免用 useEffect 获取数据;慢的异步组件应包 Suspense;中间件不要放重逻辑;不要忽略 loading.tsx 与 error.tsx 约定。检查清单覆盖默认服务端组件、缓存、Suspense 边界、路由级 loading/error、轻量中间件、Zod 校验与变更后重新验证等。
使用方式与限制:资料未提供安装命令、版本要求、运行步骤或收费信息;代码示例为模式演示,需自行结合项目数据库与依赖调整,且示例中的 db、组件等未在本资料中定义。