--- title: "Next.js Interview Questions (2026): By Level, With Model Answers" url: https://weworkworldwide.com/nextjs-developer-interview-questions/ description: "Next.js interview questions for junior, mid and senior developers — rendering strategies, the App Router, server components and caching — with answers and red flags." date: 2026-07-04T15:33:05+00:00 source: https://weworkworldwide.com/llms.txt --- # Next.js Interview Questions (2026): By Level, With Model Answers How to use this 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? What a strong answer covers File-based routing, server-side rendering and static generation, API routes, image optimisation and a build toolchain. Red flag Thinks Next.js is just React with a folder convention. ### What is the difference between SSR, SSG and CSR? What a strong answer covers SSR renders per request on the server, SSG renders at build time, CSR renders in the browser; each trades freshness against speed and load. Red flag Cannot say which one runs where. ### How does file-based routing work? What a strong answer covers Files/folders under the app (or pages) directory map to routes automatically. Red flag Sets up a manual router unaware of the convention. ### What is the difference between the App Router and Pages Router? What a strong answer covers The App Router uses the `app/` directory with Server Components and nested layouts; the Pages Router is the older `pages/` model. Red flag Doesn’t know two routers exist. ### How do you fetch data in a Next.js page? What a strong answer covers In the App Router, async Server Components fetch directly; in the Pages Router, via `getServerSideProps`/`getStaticProps`. Red flag Fetches everything client-side and loses SSR benefits. ### What are API routes / route handlers? What a strong answer covers Server endpoints colocated in the project for building backend logic without a separate server. Red flag Spins up a separate backend for trivial endpoints. ### How does `next/image` help? What a strong answer covers Automatic resizing, lazy loading and modern formats to improve performance and Core Web Vitals. Red flag Uses raw `` with huge unoptimised images. ### How does `next/link` differ from an anchor? What a strong answer covers It enables client-side navigation and prefetching between routes for a faster experience. Red flag 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? What a strong answer covers Server Components run on the server and ship no JS; Client Components (`"use client"`) run in the browser for interactivity. Compose them deliberately. Red flag Marks everything `"use client"` and loses the benefit. ### How does data caching work in the App Router? What a strong answer covers Fetches can be cached and revalidated (time-based or on-demand); understanding the caching layers is key to correct freshness. Red flag No idea why stale data appears after a deploy. ### What is Incremental Static Regeneration? What a strong answer covers Statically generated pages that revalidate in the background after a set time, combining static speed with freshness. Red flag Rebuilds the whole site to update one page. ### How do layouts and nested routing work? What a strong answer covers Shared layouts persist across route segments and don’t re-render on navigation, enabling nested UI. Red flag Duplicates chrome in every page. ### How do you handle loading and error states? What a strong answer covers Convention files (`loading`, `error`) provide Suspense-based loading and error boundaries per segment. Red flag Handles loading manually in every component. ### What are Server Actions? What a strong answer covers Server-side functions callable from components/forms without hand-writing an API, with progressive enhancement. Red flag Writes boilerplate API routes for every mutation. ### How do environment variables work in Next.js? What a strong answer covers Server-only by default; only `NEXT_PUBLIC_` vars are exposed to the browser, protecting secrets. Red flag Leaks a secret by prefixing it `NEXT_PUBLIC_`. ### How do you handle authentication? What a strong answer covers Middleware and server-side checks in layouts/handlers, keeping tokens server-side. Red flag 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? What a strong answer covers By data freshness, personalisation and traffic: static for stable content, ISR for periodic updates, SSR for per-request data, client for interactivity. Red flag Uses SSR for everything by default. ### How do you optimise Core Web Vitals in Next.js? What a strong answer covers Server Components to cut JS, image and font optimisation, streaming, code splitting and caching — measured with real data. Red flag Guesses at performance with no field data. ### What are the caching layers and how do you reason about them? What a strong answer covers Request memoisation, the data cache, the full route cache and the router cache; knowing which to revalidate avoids stale-data bugs. Red flag Cannot explain why content is stale. ### How does streaming and Suspense improve UX? What a strong answer covers The server streams HTML as it’s ready, showing fast shells while slower parts load, improving perceived performance. Red flag Blocks the whole page on the slowest data. ### How do you structure a large Next.js app? What a strong answer covers Clear route/segment organisation, colocated server logic, a data-access layer, and a deliberate client/server boundary. Red flag Mixes data access and UI everywhere. ### How do you handle mutations and revalidation together? What a strong answer covers Server Actions plus targeted revalidation (path or tag) so the UI reflects changes without over-fetching. Red flag Manually reloads the whole page after a write. ### What are the tradeoffs of the App Router? What a strong answer covers More power (server components, streaming) but a steeper mental model around caching and boundaries; migration from Pages takes care. Red flag Presents it as strictly simpler. ### How do you deploy and scale a Next.js app? What a strong answer covers Edge/serverless or Node hosting depending on needs, CDN for static assets, and awareness of cold starts and function limits. Red flag No thought given to the runtime it deploys to. **Skip the screening entirely.**We vet Next.js engineers so you don’t have to — embed one in your team, or have us build it. [Hire Next.js developers](https://weworkworldwide.com/hire-remote-svelte-developers/)[Compare us](https://weworkworldwide.com/compare/) Build and score a full interview with our free [interview scorecard tool](https://weworkworldwide.com/developer-interview-scorecard/), browse the [full question hub](https://weworkworldwide.com/interview-questions/), or see [how we interview engineers](https://weworkworldwide.com/how-we-interview-engineers/).