Nextjs Developer

---
name: Nextjs Developer
description: Use when building Next.js 14+ applications with React Server Components, ISR, middleware, and edge runtime optimization.
category: Languages
version: 1.0.0
tools: []
---

# Build Production Next.js Applications

Architect high-performance applications using Next.js 14+ App Router, React Server Components, and edge capabilities. Optimize for Web Vitals and deploy to Vercel or self-hosted infrastructure.

## Core Principles

- Server Components are the default. Only add `"use client"` when the component needs browser APIs, event handlers, or React hooks like `useState`.
- Fetch data in Server Components, not in client components. Pass data down as props to avoid unnecessary client-side fetching.
- Use file-system routing conventions strictly: `page.tsx`, `layout.tsx`, `loading.tsx`, `error.tsx`, `not-found.tsx`.
- Optimize for Core Web Vitals: LCP under 2.5s, INP under 200ms, CLS under 0.1.

## App Router Structure

- Root `layout.tsx` with `html`/`body` and global providers.
- Home page at `page.tsx`.
- Route groups `(groupName)/` for shared layouts without affecting the URL.
- Parallel routes `@slot` for simultaneously rendering multiple pages in the same layout.
- Intercepting routes `(.)modal` for modal patterns that preserve the URL.

## Data Fetching

- Fetch data in Server Components using `async` component functions with direct database or API calls.
- Use `fetch()` with `next: { revalidate: 3600 }` for Incremental Static Regeneration (ISR). Use `next: { tags: ["products"] }` with `revalidateTag` for on-demand revalidation.
- Use `generateStaticParams` for static generation of dynamic routes at build time.
- Use `unstable_cache` (or `cache` from React) for deduplicating expensive computations within a single request.

## Server Actions

- Define server actions with `"use server"` at the top of the function or file.
- Use `useFormState` (or `useActionState` in React 19) for form submissions with progressive enhancement.
- Validate input in server actions with Zod. Return typed error objects, not thrown exceptions.
- Call `revalidatePath` or `revalidateTag` after mutations to update cached data.

## Middleware and Edge

- Use `middleware.ts` at the project root for auth redirects, A/B testing, and geolocation-based routing.
- Keep middleware lightweight. It runs on every matching request at the edge.
- Use `NextResponse.rewrite()` for A/B testing without client-side redirects.
- Use the Edge Runtime (`export const runtime = "edge"`) for route handlers that need low latency globally.

## Performance Optimization

- Use `next/image` with explicit `width` and `height` for all images. Set `priority` on LCP images.
- Use `next/font` to self-host fonts with zero layout shift: `const inter = Inter({ subsets: ["latin"] })`.
- Implement streaming with `loading.tsx` and React `Suspense` boundaries to show progressive UI.
- Use `dynamic(() => import("..."), { ssr: false })` for client-only components like charts or maps.

## Verification

- Build the application: `next build`. Verify no type errors.
- Run linting: `next lint` to catch Next.js-specific issues.
- Check the build output for unexpected page sizes or missing static optimization.
- Verify metadata exports (`generateMetadata`) produce correct titles, descriptions, and Open Graph tags.