Next.js has more rendering modes than most developers can keep straight. These questions check whether a candidate actually understands when each one runs.
Hiring a Next.js developer is easy. Telling a real one from a convincing résumé is the hard part — and it’s most of what we do. These are grouped by level, because the same question that stretches a junior is a warm-up for a senior.
Junior Next.js interview questions
0–2 years
Routing and rendering basics.
What does Next.js add on top of React?
File-based routing, server-side rendering and static generation, API routes, image optimisation and a build toolchain.
Thinks Next.js is just React with a folder convention.
What is the difference between SSR, SSG and CSR?
SSR renders per request on the server, SSG renders at build time, CSR renders in the browser; each trades freshness against speed and load.
Cannot say which one runs where.
How does file-based routing work?
Files/folders under the app (or pages) directory map to routes automatically.
Sets up a manual router unaware of the convention.
What is the difference between the App Router and Pages Router?
The App Router uses the app/ directory with Server Components and nested layouts; the Pages Router is the older pages/ model.
Doesn’t know two routers exist.
How do you fetch data in a Next.js page?
In the App Router, async Server Components fetch directly; in the Pages Router, via getServerSideProps/getStaticProps.
Fetches everything client-side and loses SSR benefits.
What are API routes / route handlers?
Server endpoints colocated in the project for building backend logic without a separate server.
Spins up a separate backend for trivial endpoints.
How does next/image help?
Automatic resizing, lazy loading and modern formats to improve performance and Core Web Vitals.
Uses raw <img> with huge unoptimised images.
How does next/link differ from an anchor?
It enables client-side navigation and prefetching between routes for a faster experience.
Uses full-page anchor reloads everywhere.
Mid-level Next.js interview questions
2–5 years
App Router and server components.
What are Server and Client Components?
Server Components run on the server and ship no JS; Client Components ("use client") run in the browser for interactivity. Compose them deliberately.
Marks everything "use client" and loses the benefit.
How does data caching work in the App Router?
Fetches can be cached and revalidated (time-based or on-demand); understanding the caching layers is key to correct freshness.
No idea why stale data appears after a deploy.
What is Incremental Static Regeneration?
Statically generated pages that revalidate in the background after a set time, combining static speed with freshness.
Rebuilds the whole site to update one page.
How do layouts and nested routing work?
Shared layouts persist across route segments and don’t re-render on navigation, enabling nested UI.
Duplicates chrome in every page.
How do you handle loading and error states?
Convention files (loading, error) provide Suspense-based loading and error boundaries per segment.
Handles loading manually in every component.
What are Server Actions?
Server-side functions callable from components/forms without hand-writing an API, with progressive enhancement.
Writes boilerplate API routes for every mutation.
How do environment variables work in Next.js?
Server-only by default; only NEXT_PUBLIC_ vars are exposed to the browser, protecting secrets.
Leaks a secret by prefixing it NEXT_PUBLIC_.
How do you handle authentication?
Middleware and server-side checks in layouts/handlers, keeping tokens server-side.
Checks auth only on the client.
Senior Next.js interview questions
5+ years
Performance and architecture.
How do you decide between rendering strategies for a route?
By data freshness, personalisation and traffic: static for stable content, ISR for periodic updates, SSR for per-request data, client for interactivity.
Uses SSR for everything by default.
How do you optimise Core Web Vitals in Next.js?
Server Components to cut JS, image and font optimisation, streaming, code splitting and caching — measured with real data.
Guesses at performance with no field data.
What are the caching layers and how do you reason about them?
Request memoisation, the data cache, the full route cache and the router cache; knowing which to revalidate avoids stale-data bugs.
Cannot explain why content is stale.
How does streaming and Suspense improve UX?
The server streams HTML as it’s ready, showing fast shells while slower parts load, improving perceived performance.
Blocks the whole page on the slowest data.
How do you structure a large Next.js app?
Clear route/segment organisation, colocated server logic, a data-access layer, and a deliberate client/server boundary.
Mixes data access and UI everywhere.
How do you handle mutations and revalidation together?
Server Actions plus targeted revalidation (path or tag) so the UI reflects changes without over-fetching.
Manually reloads the whole page after a write.
What are the tradeoffs of the App Router?
More power (server components, streaming) but a steeper mental model around caching and boundaries; migration from Pages takes care.
Presents it as strictly simpler.
How do you deploy and scale a Next.js app?
Edge/serverless or Node hosting depending on needs, CDN for static assets, and awareness of cold starts and function limits.
No thought given to the runtime it deploys to.
Build and score a full interview with our free interview scorecard tool, browse the full question hub, or see how we interview engineers.