Next.js App Router Patterns 是一份针对 Next.js 14+ App Router 架构、服务端组件与现代全栈 React 开发的模式合集。
用途 适合在以下情况使用：构建采用 App Router 的新 Next.js 应用；从 Pages Router 迁移到 App Router；实现服务端组件与流式渲染；设置并行路由与拦截路由；优化数据获取与缓存；使用 Server Actions 构建全栈功能。
核心概念
- 渲染模式：服务端组件（仅在服务端，适用于数据获取、重计算、涉及密钥）、客户端组件（浏览器，适用于交互、hooks、浏览器 API）、静态（构建时，适用于很少变化的内容）、动态（请求时，适用于个性化或实时数据）、流式（渐进式，适用于大页面、慢数据源）。
- 文件约定：app/ 目录下包括 layout.tsx（共享 UI 包装）、page.tsx（路由 UI）、loading.tsx（加载 UI，Suspense）、error.tsx（错误边界）、not-found.tsx（404 UI）、route.ts（API 端点）、template.tsx（重新挂载的布局）、default.tsx（并行路由回退）、opengraph-image.tsx（OG 图片生成）。
使用方式 资料提供快速上手示例：在 app/layout.tsx 中通过 next/font/google 引入 Inter 字体、定义 metadata（标题默认值与模板、描述）、导出 RootLayout 渲染 html/body 并包裹 Providers；在 app/page.tsx 中默认使用服务端组件，通过 fetch 搭配 next: { revalidate: 3600 }（ISR，每小时重新验证）获取数据并渲染。更详细的模式与完整示例见 references/details.md，当上层导航层级不够用时阅读该文件。
最佳实践 推荐做法：从服务端组件开始，仅在需要时添加 'use client'；就近放置数据获取，在用到数据的地方获取；使用 Suspense 边界，为慢数据启用流式；利用并行路由实现独立加载状态；使用 Server Actions 处理变更并支持渐进增强。 应避免：不要传递不可序列化数据（受服务端到客户端边界限制）；不要在服务端组件中使用 hooks（无 useState、useEffect）；不要在客户端组件中直接获取数据（改用服务端组件或 React Query）；不要过度嵌套布局（每个布局都会增加组件树负担）；不要忽略加载状态（始终提供 loading.tsx 或 Suspense）。
适用场景与限制 适用于 Next.js 14+ 的全栈 React 开发与架构设计。资料未提供具体收费、价格、平台支持范围与效果数据。