nextjs-best-practices
掌握 Next.js App Router 最佳实践
自信地构建生产级 Next.js 应用程序。了解服务器组件、数据获取策略和可扩展的路由模式。
下載技能 ZIP
在 Claude 中上傳
前往 設定 → 功能 → 技能 → 上傳技能
開啟並開始使用
測試它
正在使用「nextjs-best-practices」。 Should I use useState in a Server Component?
預期結果:
No. Server Components cannot use useState, useEffect, or event handlers. These hooks require browser JavaScript. If you need state, mark the component with 'use client' or extract the interactive parts into a separate Client Component.
正在使用「nextjs-best-practices」。 How do I cache API responses in Next.js?
預期結果:
Use the fetch options: fetch(url, { next: { revalidate: 60 } }) caches for 60 seconds. For static content, omit revalidate for build-time caching. Use 'no-store' to disable caching entirely.
正在使用「nextjs-best-practices」。 What is the purpose of loading.tsx?
預期結果:
loading.tsx provides automatic loading states during navigation and data fetching. It renders while the new segment loads, improving perceived performance. Place it alongside page.tsx in any route segment.
安全審計
安全This skill is documentation-only content describing Next.js App Router best practices. Static analysis flagged 18 patterns (external_commands, weak cryptographic algorithms), but all are FALSE POSITIVES. The SKILL.md file contains only educational markdown content with code examples - no executable code, no shell commands, no cryptographic operations. Safe for publication.
品質評分
你能建構什麼
从 Pages 迁移到 App Router
使用正确的服务器组件模式将现有 Next.js 项目过渡到 App Router 架构。
构建新的 Next.js 应用程序
从第一天起就以正确的文件夹结构、缓存策略和组件架构启动新项目。
代码审查和优化
审计现有代码库中的反模式，如不必要的客户端组件或缺失的加载状态。
試試這些提示
I have a component that displays user profile data and has a follow button. Should this be a Server Component or Client Component? Explain the reasoning.
What is the recommended fetch pattern for displaying product listings that should update every 5 minutes? Show the implementation.
How do I organize a dashboard with multiple sections (analytics, settings, users) that share a common layout but should not affect the URL structure?
Create a comment form using Server Actions. Include input validation with Zod, optimistic UI updates, and error handling. Show both the Server Component and Client Component code.
最佳實務
- 默认从服务器组件开始，仅在需要交互性时添加客户端组件
- 使用带括号的路由组来组织路由，同时不影响 URL 路径
- 为每个主要路由段实现 loading.tsx 和 error.tsx 以处理待处理状态和错误状态
避免
- 为每个组件添加 'use client' - 这违背了服务器组件的目的并增加打包大小
- 在客户端组件中而非服务器组件中获取数据 - 导致瀑布式请求和加载变慢
- 跳过正确的错误边界 - 未处理的错误会导致整个应用程序崩溃，而不是显示后备 UI