# Next.js App Router 模式实施手册 此文件包含该技能引用的详细模式、检查清单和代码示例。 # Next.js App Router 模式 针对 Next.js 14+ App Router 架构、服务端组件及现代全栈 React 开发的综合模式。 ## 何时使用此技能 - 构建使用 App Router 的新 Next.js 应用程序 - 从 Pages Router 迁移到 App Router - 实现服务端组件 (Server Components) 和流式传输 (Streaming) - 设置并行路由和拦截路由 - 优化数据获取和缓存 - 使用服务端操作 (Server Actions) 构建全栈功能 ## 核心概念 ### 1. 渲染模式 | 模式 | 位置 | 何时使用 | |------|-------|-------------| | **服务端组件** | 仅服务端 | 数据获取、繁重计算、敏感信息 | | **客户端组件** | 浏览器 | 交互、Hooks、浏览器 API | | **静态渲染** | 构建时 | 极少变化的内容 | | **动态渲染** | 请求时 | 个性化或实时数据 | | **流式传输** | 渐进式 | 大型页面、缓慢的数据源 | ### 2. 文件约定 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 图像生成 ## 快速开始 typescript // app/layout.tsx import { Inter } from 'next/font/google' import { Providers } from './providers' const inter = Inter({ subsets: ['latin'] }) export const metadata = { title: { default: '我的应用', template: '%s | 我的应用' }, description: '使用 Next.js App Router 构建', } export default function RootLayout({ children, }: { children: React.ReactNode }) { return ( {children} ) } // app/page.tsx - 默认服务端组件 async function getProducts() { const res = await fetch('https://api.example.com/products', { next: { revalidate: 3600 }, // ISR: 每小时重新验证 }) return res.json() } export default async function HomePage() { const products = await getProducts() return (

产品

) } ## 模式 ### 模式 1: 服务端组件与