技能 nextjs-best-practices
📦

nextjs-best-practices

安全

Master Next.js App Router Best Practices

Build production-ready Next.js applications with confidence. Learn Server Components, data fetching strategies, and routing patterns that scale.

支持: Claude Codex Code(CC)
📊 71 充足
1

下载技能 ZIP

2

在 Claude 中上传

前往 设置 → 功能 → 技能 → 上传技能

3

开启并开始使用

测试它

正在使用“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.

安全审计

安全
v2 • 2/24/2026

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.

1
已扫描文件
209
分析行数
0
发现项
2
审计总数
未发现安全问题
审计者: claude 查看审计历史 →

质量评分

38
架构
100
可维护性
87
内容
31
社区
100
安全
91
规范符合性

你能构建什么

Migrating from Pages to App Router

Transition existing Next.js projects to App Router architecture with proper Server Component patterns.

Building New Next.js Applications

Start new projects with correct folder structure, caching strategies, and component architecture from day one.

Code Review and Optimization

Audit existing codebases for anti-patterns like unnecessary Client Components or missing loading states.

试试这些提示

Component Type Decision 
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.
Data Fetching Strategy 
What is the recommended fetch pattern for displaying product listings that should update every 5 minutes? Show the implementation.
Route Organization 
How do I organize a dashboard with multiple sections (analytics, settings, users) that share a common layout but should not affect the URL structure?
Full Feature Implementation 
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.

最佳实践

  • Start with Server Components by default, add Client Components only when interactivity is required
  • Use route groups with parentheses to organize routes without affecting the URL path
  • Implement loading.tsx and error.tsx for every major route segment to handle pending and error states

避免

  • Adding 'use client' to every component - this defeats the purpose of Server Components and increases bundle size
  • Fetching data in Client Components instead of Server Components - causes waterfall requests and slower loads
  • Skipping proper error boundaries - unhandled errors crash the entire application instead of showing fallback UI

常见问题

When should I use Server Components vs Client Components?
Use Server Components by default for data fetching, layout, and static content. Use Client Components only when you need useState, useEffect, event handlers, or browser APIs. Split large components to keep Client portions minimal.
How does caching work in the App Router?
Next.js caches fetch requests by default. Use revalidate for time-based revalidation (ISR), revalidatePath or revalidateTag for on-demand updates, and no-store to disable caching. Each route segment can also have its own caching configuration.
What are Server Actions and when should I use them?
Server Actions are async functions marked with 'use server' that run on the server. Use them for form submissions, data mutations, and triggering revalidation. Always validate inputs and handle errors properly.
How do I handle authentication in App Router?
Check authentication in Server Components before rendering protected content. Use middleware for route-level protection. For Client Components, fetch auth status from a Server Component or use a client-side auth provider.
What is the difference between layout.tsx and template.tsx?
layout.tsx persists across navigation and maintains state. template.tsx creates a new instance on each navigation, remounting children. Use layout for persistent UI like navigation, template when you need reset behavior.
Can I use API routes with the App Router?
Yes. Create route.ts files in the app directory with GET, POST, PUT, PATCH, DELETE handlers. Use Route Handlers for API endpoints. Consider Edge runtime for better performance on simple endpoints.

开发者详情

作者

sickn33

许可证

MIT

仓库

https://github.com/sickn33/antigravity-awesome-skills/tree/main/skills/nextjs-best-practices

引用

main

文件结构

📄 SKILL.md