Next.js

Overview

Next.js is a full-stack React framework featuring the App Router with Server Components, Server Actions for mutations, and multiple rendering strategies (SSG, SSR, ISR, PPR). It provides automatic code splitting, image optimization, and deployment options from Vercel to self-hosted Docker.

Instructions

• When creating routes, use file-based routing in the app/ directory with page.tsx for pages, layout.tsx for persistent layouts, loading.tsx for streaming, and error.tsx for error boundaries.
• When building components, default to Server Components (no directive needed) for zero client-side JavaScript, and add "use client" only for components needing event handlers, hooks, or browser APIs.
• When fetching data, query databases directly in Server Components with async/await, use fetch() with caching options (revalidate, force-cache), and co-locate data fetching with the component that needs it.
• When handling mutations, use Server Actions with "use server" directive and <form action={...}> for progressive enhancement, then call revalidatePath() or revalidateTag() after mutations.
• When choosing rendering, default to ISR with revalidate for most pages, use generateStaticParams() for fully static pages, and dynamic = "force-dynamic" only when fresh data is required on every request.
• When adding middleware, use middleware.ts at the project root for auth redirects, geolocation, and A/B testing with matcher config to scope it to specific routes.
• When optimizing, use next/image for all images (WebP/AVIF, lazy loading), next/font for zero layout shift fonts, and generateMetadata() for dynamic SEO.

Examples

Example 1: Build a dashboard with Server Components