nextjs-best-practices

Installation
Summary

Next.js App Router development patterns covering server/client components, data fetching, and routing.

  • Server Components are the default; use Client Components only for interactivity (useState, event handlers, forms)
  • Data fetching belongs in Server Components with three caching strategies: static (build-time), ISR (time-based revalidation), and dynamic (no-store)
  • File conventions organize routes: page.tsx for UI, layout.tsx for shared structure, loading.tsx and error.tsx for states, and route groups (name) to organize without affecting URLs
  • Server Actions handle form submissions and data mutations; validate inputs and mark with 'use server'
  • Avoid common pitfalls: excessive 'use client' directives, client-side data fetching, missing loading/error boundaries, and large client bundles
SKILL.md

Next.js Best Practices

Principles for Next.js App Router development.


1. Server vs Client Components

Decision Tree

Does it need...?
├── useState, useEffect, event handlers
│   └── Client Component ('use client')
├── Direct data fetching, no interactivity
│   └── Server Component (default)
Related skills
Installs
5.1K
GitHub Stars
37.3K
First Seen
Jan 20, 2026