Skills nextjs-best-practices
📦

nextjs-best-practices

Safe

Apply Next.js Best Practices with Claude

Developers struggle to keep up with Next.js App Router patterns and often use outdated approaches. This skill provides comprehensive best practices for Server Components, data fetching, routing, and performance optimization.

Supports: Claude Codex Code(CC)
🥉 73 Bronze
1

Download the skill ZIP

2

Upload in Claude

Go to Settings → Capabilities → Skills → Upload skill

3

Toggle on and start using

Test it

Using "nextjs-best-practices". Should I make this component a Server or Client Component? It displays user profile data and has a button to toggle a theme.

Expected outcome:

Split the component: Create a Server Component to fetch and display the user profile data, then pass that data to a Client Component for the interactive theme toggle button. This keeps data fetching on the server (efficient) while keeping interactivity on the client.

Using "nextjs-best-practices". How should I cache API responses that change every hour?

Expected outcome:

Use ISR (Incremental Static Regeneration) with revalidate: 3600 (seconds). This caches the response for one hour, then regenerates on the next request after expiry. For on-demand updates, use revalidatePath or revalidateTag when your data source updates.

Security Audit

Safe
v1 • 2/16/2026

Security evaluation complete. All static findings are false positives. The skill contains only markdown documentation about Next.js best practices. Code examples (e.g., page.tsx, revalidate: 60) are displayed in markdown code fences, not executed as shell commands. No cryptographic algorithms, network calls, or file operations are present. This is a safe reference guide for Next.js development.

1
Files scanned
204
Lines analyzed
0
findings
1
Total audits
No security issues found

Detected Patterns

False Positive: Markdown Code ExamplesFalse Positive: Weak Cryptographic Algorithm
Audited by: claude

Quality Score

38
Architecture
100
Maintainability
87
Content
50
Community
100
Security
83
Spec Compliance

What You Can Build

New Next.js Project Setup

A developer starting a new Next.js project wants to follow best practices from the beginning. They use the skill to understand the correct component architecture.

Refactoring Legacy Code

A team migrating from Pages Router to App Router needs guidance on converting client-side fetches to Server Components.

Performance Review

A developer auditing an existing Next.js application uses the skill to identify anti-patterns and optimization opportunities.

Try These Prompts

Component Decision Guide 
Should I use a Server Component or Client Component for a [component description] that [describe functionality]? Explain the trade-offs.
Data Fetching Pattern 
What is the best way to fetch [data type] from [data source] in Next.js? I need [describe freshness requirements].
Route Structure 
How should I organize routes for [describe application sections]? Should I use route groups? Show the file structure.
Performance Optimization 
My Next.js page with [describe content] is loading slowly. What optimization techniques from best practices should I apply?

Best Practices

  • Start with Server Components by default - only add 'use client' when you need interactivity like useState, useEffect, or event handlers
  • Fetch data in Server Components to leverage server-side caching and reduce client bundle size
  • Use loading.tsx and error.tsx files to provide good UX during data loading and graceful error handling

Avoid

  • Adding 'use client' to every component - this defeats the performance benefits of Server Components and increases bundle size
  • Fetching data in Client Components with useEffect - this creates unnecessary client-side requests and loading states
  • Skipping loading.tsx and error.tsx - users see blank screens or raw error messages instead of proper UX

Frequently Asked Questions

What is the default component type in Next.js App Router?
Server Components are the default. You do not need any directive - components are server-side by default. Add 'use client' only when you need client-side features.
When should I use Client Components?
Use Client Components when you need React hooks (useState, useEffect), event handlers (onClick, onChange), browser APIs, or third-party libraries that depend on client-side rendering.
How does data caching work in Next.js?
fetch requests are cached by default. Use 'no-store' for dynamic data that changes on every request. Use 'revalidate' for time-based ISR. Use revalidatePath or revalidateTag for on-demand cache invalidation.
What are route groups in Next.js?
Route groups use (folderName) syntax to organize routes without affecting the URL. They let you apply different layouts to route sections while keeping a clean URL structure.
How do I handle errors in Next.js App Router?
Create error.tsx (error.ts in API routes) to catch errors and display a recovery UI. Use not-found.tsx for 404 pages. Both are automatically wrapped by error boundaries.
Can I use Server Actions with Client Components?
Yes. Define Server Actions in a file with 'use server', then import and call them from Client Components. The action runs on the server while the component remains interactive.

Developer Details

Author

sickn33

License

MIT

Repository

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

Ref

main

File structure

📄 SKILL.md