Next.js Best Practices
Comprehensive coding standards for Next.js App Router applications, optimized for AI agents and LLMs.
Overview
This skill provides 24 rules organized across 8 performance categories:
- App Router (app-) - Server Components, layouts, loading states [CRITICAL]
- Data Fetching (fetch-) - Caching, revalidation, streaming [CRITICAL]
- Server Actions (actions-) - Form handling, mutations, optimistic updates [HIGH]
- Rendering (render-) - SSR vs SSG vs ISR, dynamic vs static [HIGH]
- Middleware (middleware-) - Edge functions, redirects, rewrites [MEDIUM-HIGH]
- Asset Optimization (assets-) - next/image, next/font, placeholders [MEDIUM]
- Route Handlers (routes-) - API endpoints, streaming responses [MEDIUM]
- Deployment (deploy-) - Vercel config, edge runtime, static export [LOW-MEDIUM]
Usage
Reference this skill when:
- Building new Next.js applications
- Migrating from Pages Router to App Router
- Optimizing Next.js performance
- Implementing Server Components or Server Actions
- Configuring caching and revalidation strategies
Build
pnpm build # Compile rules to AGENTS.md
pnpm validate # Validate rule files