Next.js interviews centre on rendering strategies, the App Router, server components, and caching — the parts that separate Next from plain React. Below are the most common questions with model answers. Senior: architecture, trade-offs, mentoring, and decision-making.
In the App Router every component is a server component by default; "use client" marks the boundary where the client bundle begins. Everything imported below that boundary is shipped to the browser, which is why placing it at the top of a layout accidentally makes the whole subtree client-side. Without it, calling useState or attaching an onClick handler throws at build time.
Next caches on several layers: the fetch result cache, the full route cache for rendered output, and the client router cache for navigations. revalidate sets how long a cached entry stays fresh, either per fetch or exported from the route segment. For event-driven updates you call revalidatePath or revalidateTag after a mutation, which is more precise than a time window.
A Server Action is an async function marked "use server" that a client component can call directly, with Next handling serialisation and the network round trip. It replaces writing an API route for simple mutations such as form submissions, and it composes with revalidatePath to refresh data afterwards. Because it is a public endpoint under the hood, it must still validate input and check authorization.
It generates responsive variants in modern formats such as WebP and AVIF, serves the size that matches the viewport, lazy-loads by default, and reserves layout space so the page does not shift. Requiring explicit width and height or the fill prop is what eliminates cumulative layout shift. The result is usually the single largest Core Web Vitals improvement in a Next app.
Streaming sends HTML to the browser in chunks as it becomes ready instead of waiting for the slowest data source. Wrapping a slow component in Suspense with a fallback lets the rest of the page render immediately while that section arrives later. Practically this means a slow product-recommendations widget no longer delays the whole page, which improves perceived performance and time to first byte.
Export generateMetadata from a page or layout — it receives the route params, can await data, and returns title, description, canonical, and Open Graph fields. For static pages the simpler metadata export is enough. Add an opengraph-image file in the route folder and Next generates the social preview image for that route automatically.
In a real interview you speak under pressure. Cam asks these same questions, scores every answer, and shows exactly what to fix.
Practice a Senior Next.js interview →