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. Junior: core theory, definitions, and simple practical cases.
Topics to prepare
✓SSR, SSG, ISR and CSR
✓App Router vs Pages Router
✓Server components
✓Route handlers and API
✓Caching and revalidation
✓Image and font optimization
6 Junior-level questions with answers
1
What is the difference between SSR, SSG, ISR and CSR? When do you use each?
Answer
SSG builds HTML at deploy time — fastest and cheapest, right for content that rarely changes. SSR renders per request, needed when the page depends on the user or on data that must be current. ISR serves a static page and regenerates it in the background after a revalidation interval, giving static speed with fresh-enough data. CSR renders in the browser and suits dashboards behind a login where SEO does not matter.
2
What are React Server Components and how do they differ from client components?
Answer
Server components run only on the server, so they can query a database or read files directly and never ship their code to the browser. They cannot use state, effects, or browser APIs. Client components are the traditional React model and are needed for interactivity. The pattern is to keep pages as server components and push "use client" as far down the tree as possible so the bundle stays small.
3
Why is the "use client" directive needed?
Answer
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.
4
How does caching work in the App Router? What is revalidate?
Answer
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.
5
What are Server Actions and when do you use them?
Answer
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.
6
How does next/image optimize images?
Answer
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.
🦎
Reading answers is not enough
In a real interview you speak under pressure. Cam asks these same questions, scores every answer, and shows exactly what to fix.