next-best-practices

概览

什么是 next-best-practices？

next-best-practices 是为使用 Next.js 的前端开发者打造的综合技能。它提供了可操作的最佳实践和模式，帮助构建可扩展且易维护的 Next.js 应用。涵盖从文件约定、React Server Component（RSC）边界，到异步数据获取、错误处理和性能优化等内容，助你避免常见陷阱，采用现代 Next.js 工作流。

谁适合使用此技能？

• 使用 Next.js 和 React 的前端开发者
• 正在迁移到 Next.js App Router 的团队
• 希望规范或学习最新 Next.js 约定的任何人

它解决了哪些问题？

• 明确大型 Next.js 项目的文件和文件夹结构
• 指导 Server 和 Client 组件的正确使用
• 讲解 Next.js 15+ 的异步数据模式及迁移
• 帮助避免常见的打包和运行时错误
• 提供健壮的错误处理和调试策略

何时适合使用 next-best-practices？

• 启动新 Next.js 项目或重构现有项目时
• 新团队成员学习 Next.js 约定时
• 解决数据获取、路由或打包问题时

使用指南

安装步骤

1. 使用以下命令将技能添加到项目中：

   npx skills add https://github.com/vercel-labs/next-skills --skill next-best-practices
   

2. 打开 SKILL.md 文件，查看概要介绍和详细指南链接。
3. 查阅支持文件，针对具体主题深入学习：
   • file-conventions.md：了解项目结构、路由分段和特殊文件。
   • rsc-boundaries.md：理解有效与无效的 React Server Component 模式。
   • async-patterns.md：迁移到新的异步 API，处理 params、cookies 和 headers。
   • data-patterns.md：选择合适的数据获取和变更策略。
   • error-handling.md：实现错误边界，处理导航异常。
   • bundling.md：解决第三方包的打包问题。
   • directives.md：使用 React 和 Next.js 指令，如 'use client'、'use server' 和 'use cache'。
   • debug-tricks.md：利用 Next.js 开发工具和端点加速调试。

适配你的项目

• 将提供的模式作为参考，根据你的代码库、工具链和部署环境进行调整。
• 不要照搬代码——请根据你的技术栈和 Next.js 版本逐条审查兼容性。

涵盖的关键主题

• 文件约定与项目结构
• RSC 边界与组件模式
• 异步数据获取与迁移
• 路由处理与运行时选择
• 错误边界与全局错误处理
• 图片和字体优化
• 打包与依赖外部化
• 调试与开发工具

常见问题

如何预览 next-best-practices 的内容？

安装后，打开 Files 标签页浏览所有包含的指南，如 SKILL.md、async-patterns.md、bundling.md 等。每个文件聚焦于特定的 Next.js 最佳实践。

next-best-practices 是否针对特定 Next.js 版本？

该技能针对 Next.js 15+ 进行了更新，涵盖新异步 API 和约定的迁移步骤。部分模式可能不适用于旧版本。

可以在自定义环境中使用 next-best-practices 吗？

可以，但请针对你的自定义配置（尤其是路由、服务器运行时和打包）逐条检查兼容性。

如果我需要某个主题的更多细节怎么办？

每个主题文件都包含实用示例，并引用官方 Next.js 或 React 文档，便于深入学习。

遇到问题时哪里可以获得帮助？

查看 debug-tricks.md 获取高级调试技巧，或参考技能文件中链接的官方 Next.js 文档。