nextjs

Next.js 最佳实践

编写或审查 Next.js 代码时，请遵循这些规则。

文件约定

请参阅 file-conventions.md，了解：

• 项目结构和特殊文件
• 路由段（动态、捕获所有、分组）
• 并行路由和拦截路由
• v16 中间件重命名（middleware → proxy）

RSC 边界

检测无效的 React Server Component 模式。

请参阅 rsc-boundaries.md，了解：

• 异步客户端组件检测（无效）
• 不可序列化属性检测
• Server Action 例外情况

异步模式

Next.js 15+ 异步 API 的变更。

请参阅 async-patterns.md，了解：

• 异步 params 和 searchParams
• 异步 cookies() 和 headers()
• 迁移 codemod

运行时选择

请参阅 runtime-selection.md，了解：

• 默认使用 Node.js 运行时
• 适合使用 Edge 运行时的情况

指令

请参阅 directives.md，了解：

• 'use client'、'use server'（React）
• 'use cache'（Next.js）

函数

请参阅 functions.md，了解：

• 导航钩子：useRouter、usePathname、useSearchParams、useParams
• 服务端函数：cookies、headers、draftMode、after
• 生成函数：generateStaticParams、generateMetadata

错误处理

请参阅 error-handling.md，了解：

• error.tsx、global-error.tsx、not-found.tsx
• redirect、permanentRedirect、notFound
• forbidden、unauthorized（身份验证错误）
• 在 catch 块中使用 unstable_rethrow

数据模式

请参阅 data-patterns.md，了解：

• Server Components、Server Actions 与 Route Handlers 的区别
• 避免数据瀑布（Promise.all、Suspense、预加载）
• 客户端组件的数据获取

路由处理程序

请参阅 route-handlers.md，了解：

• route.ts 基础知识
• GET 处理程序与 page.tsx 的冲突
• 环境行为（无 React DOM）
• 何时使用 Route Handlers 而非 Server Actions

元数据和 OG 图像

请参阅 metadata.md，了解：

• 静态和动态元数据
• generateMetadata 函数
• 使用 next/og 生成 OG 图像
• 基于文件的元数据约定

图像优化

请参阅 image.md，了解：

• 始终使用 next/image，而非 <img>
• 远程图像配置
• 响应式 sizes 属性
• 模糊占位符
• 为 LCP 优先加载

字体优化

请参阅 font.md，了解：

• next/font 设置
• Google Fonts、本地字体
• Tailwind CSS 集成
• 预加载子集

打包

请参阅 bundling.md，了解：

• 与服务端不兼容的包
• CSS 导入（而非 link 标签）
• Polyfill（已包含）
• ESM/CommonJS 问题
• 包分析

脚本

请参阅 scripts.md，了解：

• next/script 与原生 script 标签的区别
• 内联脚本需要 id
• 加载策略
• 使用 @next/third-parties 集成 Google Analytics

水合错误

请参阅 hydration-error.md，了解：

• 常见原因（浏览器 API、日期、无效 HTML）
• 使用错误覆盖层进行调试
• 针对各种原因的修复方法

Suspense 边界

请参阅 suspense-boundaries.md，了解：

• 使用 useSearchParams 和 usePathname 时的 CSR 回退
• 哪些钩子需要 Suspense 边界

并行路由和拦截路由

请参阅 parallel-routes.md，了解：

• 使用 @slot 和 (.) 拦截器实现模态框模式
• 使用 default.tsx 作为回退
• 使用 router.back() 正确关闭模态框

自托管

请参阅 self-hosting.md，了解：

• 用于 Docker 的 output: 'standalone'
• 用于多实例 ISR 的缓存处理程序
• 可直接使用的功能与需要额外设置的功能

调试技巧

请参阅 debug-tricks.md，了解：

• 用于 AI 辅助调试的 MCP 端点
• 使用 --debug-build-paths 重建特定路由