Next.js · Intermediate interview

Next extends fetch with caching: by default in many cases responses are cached (the Data Cache) and deduplicated within a render. You control it with options — cache: 'no-store' for always-fresh dynamic data, and next: { revalidate: N } for time-based revalidation. Note caching defaults have shifted across versions, so the safe approach is to set the cache behaviour explicitly per fetch.

await fetch(url, { next: { revalidate: 60 } });
await fetch(url, { cache: "no-store" });

Incremental Static Regeneration serves a statically generated page and regenerates it in the background after a set interval, so you get static speed with fresh-enough content. You enable it with a revalidate time on a fetch or a route segment. For on-demand updates (e.g. after a CMS change) you call revalidatePath or revalidateTag to invalidate specific cached content immediately.

A route becomes dynamic when it depends on request-time information — reading cookies() or headers(), using searchParams, an uncached (no-store) fetch, or explicitly setting dynamic = 'force-dynamic'. Otherwise Next tries to render it statically at build time. Understanding these triggers is key to controlling whether a page is cached or rendered per request.

Route Handlers (route.ts with GET/POST/etc. exports) let you build API endpoints inside the app directory using the web Request/Response APIs. You use them for webhooks, public APIs, custom auth callbacks, or anything a non-React client must call over HTTP. For internal data mutations from your own forms, Server Actions are often simpler.

// app/api/posts/route.ts
export async function GET() {
  return Response.json(await getPosts());
}

Server Actions are async functions marked with 'use server' that run on the server and can be called directly from components and forms, without you writing an API route. They're ideal for mutations — form submissions, creating/updating data — and they integrate with revalidation so the UI refreshes after the change. They reduce the boilerplate of a client fetch plus an endpoint.

async function create(formData) {
  "use server";
  await db.insert(...); revalidatePath("/posts");
}

Pass the action to a form's action prop; on submit it runs on the server with the FormData, does the mutation, and calls revalidatePath/revalidateTag or redirect to update the UI. On the client you can use useFormStatus for pending state and useActionState (formerly useFormState) for returning validation errors. It works progressively even before JS hydrates.

middleware.ts runs before a request is completed, at the edge by default, letting you rewrite, redirect, or modify headers/cookies — common for auth gating, A/B testing, locale routing, and bot protection. It runs on the Edge runtime so it must be lightweight and can't use Node-only APIs. You scope it with a matcher to avoid running on every request.

For a dynamic route, generateStaticParams returns the list of param values to pre-render at build time (the App Router equivalent of getStaticPaths). Next statically generates a page for each returned param, and can render others on demand depending on your config. It's how you statically build out, say, every blog post page.

export async function generateStaticParams() {
  return (await getSlugs()).map(slug => ({ slug }));
}

The Image component automatically serves correctly sized, modern-format (WebP/AVIF) images, lazy-loads them, and reserves space to prevent layout shift (CLS). It generates responsive srcsets and can optimize on demand. You use it instead of a raw img tag to improve LCP and Core Web Vitals with little effort.

Server Components can stream to the browser progressively: Next sends the shell immediately and streams in slower parts as their data resolves, using Suspense boundaries (or loading.tsx) to show fallbacks meanwhile. This improves perceived performance — users see content sooner instead of waiting for the whole page. You wrap slow sections in Suspense to opt them into streaming independently.

The Node runtime is the full Node environment with all APIs, suited to most server work and heavier dependencies. The Edge runtime is a lighter, V8-based environment that runs closer to users with fast cold starts but a restricted API surface (no native Node modules). You pick Edge for latency-sensitive, simple logic like middleware or lightweight handlers, and Node for everything else.

Route groups ((folder)) organize routes or apply different layouts without affecting the URL. Parallel routes (@slot) render multiple independent sections of a page simultaneously, useful for dashboards or modals. Intercepting routes ((.)folder) let you load a route in the current context — like opening a photo in a modal over the feed while still being a real URL. They're advanced routing tools for richer layouts.