nextjs-best-practices

Next.js Best Practices - App Router 开发规范指南

技能概述

Next.js Best Practices 是一个 Claude AI 技能，提供 Next.js App Router 开发的核心规范和最佳实践，帮助开发者正确使用 Server Components、数据获取模式和路由组织方式。

适用场景

1. Next.js 项目架构决策

当你需要为新项目选择合适的技术方案时，这个技能可以帮你判断何时使用 Server Components、何时必须用 Client Components，以及如何组织路由结构来保持代码可维护性。

2. 性能优化与问题排查

当项目出现加载慢、包体积过大或缓存策略不当时，可以通过这个技能了解正确的数据获取模式、缓存配置和图片优化方法，定位并解决性能瓶颈。

3. 团队代码规范制定

对于需要统一团队编码标准的场景，这个技能提供了完整的最佳实践参考，涵盖项目结构、API 路由、Server Actions 使用规范等，帮助建立一致的代码风格。

核心功能

1. Server/Client 组件选择决策树

通过清晰的决策流程图，快速判断组件应该使用服务端还是客户端渲染。涵盖 useState、useEffect、事件处理器等关键判断条件，以及如何将两者结合使用的架构建议。

2. 数据获取与缓存策略

详细说明 Next.js 的三种数据获取模式（静态、ISR、动态），以及不同数据源（数据库、API、用户输入）应该采用的对应模式。包含完整的缓存层级和重新验证方法。

3. 路由与项目结构规范

提供 App Router 的文件约定说明，包括 page.tsx、layout.tsx、loading.tsx 等文件的用途，以及路由组、并行路由、拦截路由等高级模式的适用场景。

常见问题

Next.js 什么时候应该使用 'use client'？

只有当组件需要使用 React Hooks（如 useState、useEffect）、浏览器 API（如 window、localStorage）或事件处理器（onClick、onChange）时，才需要添加 'use client' 指令。默认情况下，所有组件都是服务端组件，优先保持这种状态可以获得更好的性能和更小的包体积。

Next.js 数据获取应该选择什么缓存策略？

默认使用静态生成（构建时缓存），适合不常变化的内容；需要定期更新的内容使用 ISR（设置 revalidate 时间）；每个请求都需要最新数据时使用 no-store。数据库查询应该在 Server Component 中直接执行，API 调用使用 fetch 并配置合适的缓存选项。

Next.js App Router 的路由组织方式有哪些？

路由组 (name) 用于组织文件而不影响 URL 结构；并行路由 @slot 可以在同一层级渲染多个独立页面；拦截路由 (.) 用于模态框等覆盖场景。通过合理使用这些模式，可以保持代码结构清晰且符合业务逻辑。

Next.js 如何避免常见的反模式？

避免在所有组件上添加 'use client'，应该优先使用服务端组件；不要在客户端组件中获取数据，将数据获取移到服务端；记得使用 loading.tsx 和 error.tsx 提供加载和错误状态；大型组件使用动态导入进行代码分割。