nextjs-best-practices

Next.js App Router development patterns covering server/client components, data fetching, and routing. Principles for Next.js App Router development. Remember: Server Components are the default for a reason. Start there, add client only when needed. This skill is applicable to execute the workflow or actions described in the overview. - 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 - Validate input with Zod - Return proper status codes - Handle errors gracefully - Use Edge runtime when possible - Use next/image component - Set priority for above-fold - Provide blur placeholder - Use responsive sizes - Dynamic imports for heavy components - Route-based code splitting (automatic) - Analyze with bundle analyzer - title (50-60 chars) -...