Common Next.js interview questions, paired with clear, concise answers — useful both for interview prep and as a refresher on the concepts that come up most often in day-to-day App Router work.

The Pages Router (pages/) maps files directly to routes and fetches data through exported functions like getServerSideProps. The App Router (app/) is built on React Server Components, supports nested layouts, streaming, and Server Actions, and fetches data directly inside async components. The App Router is the current default; the Pages Router remains supported and the two can coexist in one project during a migration.

A Server Component renders on the server and never ships its own JavaScript to the browser — only its rendered output does. A Client Component, marked with 'use client', is hydrated in the browser and can use state, effects, and event handlers. Every component under app/ is a Server Component unless it or an ancestor opts into 'use client'.

Hydration is the process of attaching React's interactive behavior — event listeners, state — to HTML that was already rendered (on the server or at build time) and sent to the browser. Before hydration completes, the page looks interactive but click handlers and state have not been wired up yet.

SSG (Static Site Generation) renders a page to HTML once at build time. SSR (Server-Side Rendering) renders a page on every request, reflecting the freshest possible data. ISR (Incremental Static Regeneration) is a hybrid: the page is served statically but regenerated in the background after a configured time interval or on demand, so it stays close to fresh without paying the cost of rendering on every single request.

'use client' at the top of a file marks that module, and everything it imports, as part of the client bundle. It does not make the component render only in the browser — it still renders once on the server for the initial HTML — but it also ships that component's JavaScript to the browser so it can hydrate and run interactively. It marks a boundary, not just a single component.

A Server Action is an async function, marked 'use server', that can be called directly from a component like a normal function — Next.js generates the network plumbing for you. A Route Handler (route.ts) is a hand-defined endpoint with its own URL, needed when something outside your app (a webhook, a third party, a public API consumer) needs to call it directly. For mutations that belong purely to your own UI, Server Actions remove a layer of boilerplate that Route Handlers require.

Four, layered on top of each other: the Request Memoization cache (dedupes identical fetch calls within one render), the Data Cache (persists fetch results across requests and deployments), the Full Route Cache (caches rendered HTML/RSC output for static routes at build time), and the Router Cache (a client-side cache of visited route segments for instant back/forward navigation).

A folder named with square brackets, like [id], matches any value at that position in the URL and exposes it through the params prop. [...slug] is a catch-all that matches multiple remaining segments as an array, and [[...slug]] makes that catch-all optional so the base route without any extra segments also matches.

Code in middleware.ts that runs before a request finishes routing — commonly used for authentication redirects, A/B test routing, localization redirects, and rewriting or adding headers. It should stay fast and lightweight since it runs on every matching request, before any page has started rendering.

next/image automatically resizes images to the sizes actually needed, serves modern formats like WebP/AVIF when supported, lazy loads images below the fold by default, and requires explicit width/height (or fill) so the browser can reserve layout space and avoid content shifting as the image loads.

next/font downloads and self-hosts font files at build time, removing the extra network round-trip to a third-party font host, and automatically generates the right font-display and fallback metrics so the browser reserves the correct space for the text before the custom font finishes loading.

Streaming sends a page to the browser in pieces as each piece becomes ready, instead of waiting for the entire page — including its slowest data fetch — to finish before sending anything. Wrapping a slow section in <Suspense> lets the rest of the page render and become interactive immediately, with that section's fallback showing until its data arrives.

Next.js 15 made params and searchParams asynchronous so the framework can start rendering a route before those values are fully resolved, which enables more granular streaming and caching. Practically, this means Server Components and Route Handlers must await params (or searchParams) before reading properties off it.

Not directly — a Client Component module cannot import a Server Component and render it inline, because everything a Client Component file imports becomes part of the client bundle, and Server Components cannot be sent to the browser as code. Instead, pass the already-rendered Server Component down as children or another prop from a parent that is still on the server.

The same way you would a public API endpoint, because that is effectively what it is: check the caller's session/auth on the server inside the action itself, and validate every argument (with a schema library like Zod, for example) before using it. Never assume the action can only be invoked the way your own UI invokes it.

A folder name wrapped in parentheses, like (marketing), that organizes routes or applies a shared layout to a set of routes without adding a segment to the URL. It is purely an organizational tool — (marketing)/about/page.tsx still resolves to /about.

A named slot (an @folder) that renders alongside its sibling routes inside the same layout, independently of the main page content — commonly used for dashboards where several panels load and stream independently, or for a modal slot that can render without replacing the page behind it.

When the entire app is knowable at build time — a marketing site, documentation, a blog — and you want the simplest, cheapest possible hosting. Static export (output: 'export') drops Server Actions, dynamic Route Handlers, ISR, the Image Optimization API, and Middleware, so it only fits apps that do not need per-request server logic.

Export an async generateMetadata function instead of a static metadata object. It receives the same params/searchParams as the page, can fetch data, and returns the metadata object — commonly used to set a blog post's title and description from its actual content.

A lightweight JavaScript runtime, distinct from full Node.js, that can run Middleware and some Route Handlers physically closer to the user for lower latency. It trades away Node.js-specific APIs and some npm packages for that speed and geographic distribution, so it fits latency-sensitive, simple logic — auth checks, redirects — more than heavy server-side work.