DEVPREP CODEX · #13

Next.js Interview Questions

171 curated questions graded from Foundations (Easy) to Practical Patterns (Medium) and Internals & Architecture (Hard).

TOTAL QUESTIONS

171

THEORY QUESTIONS

150

IMPLEMENTATION FOLIOS

FREE QUESTIONS

5 / Level

Easy Level·57 Questions Total

Foundations & Core Concepts

Open Full Easy List

Q1What is Next.js, and what are its key advantages over a vanilla React SPA?

Answer: Next.js is a production-ready React meta-framework that enables hybrid rendering rendering strategies (SSR, SSG, ISR, CSR) out of the box.

Server-Side Pre-rendering: Delivers pre-rendered HTML to the client, improving SEO and Initial Page Load (LCP).
Built-in Optimizations: Features native components for optimizing images (next/image), scripts (next/script), fonts (next/font), and routes (next/link).
Zero Config: Automatically configures Webpack/Turbopack code splitting, compilation, and minification.
Hybrid Data Fetching: Allows different rendering methods on a page-by-page basis.

Q2Explain the core differences between CSR, SSR, SSG, and ISR rendering models.

Answer:

CSR (Client-Side Rendering): The server sends a bare-bones HTML page containing a JavaScript bundle. The browser downloads and executes the JS to build the UI at runtime.
SSR (Server-Side Rendering): Pre-renders HTML on the server for each incoming request. Best for dynamic, user-specific data that must be search-engine crawlable.
SSG (Static Site Generation): Pre-renders HTML at build time. HTML files remain static on a CDN. Best for static assets like blogs or marketing sites.
ISR (Incremental Static Regeneration): Regenerates static pages in the background periodically after the build has finished, without needing a full rebuild.

Q3What are the main differences between the Pages Router and the App Router?

Answer:

Routing Architecture: Pages Router routes are determined by files in the /pages directory. App Router is built on the /app directory where folders define routes and a page.js file serves as the route leaf.
Default Component Type: Pages Router uses standard React components (Client Components). App Router leverages React Server Components (RSC) by default.
Layout Management: Pages Router uses custom _app.js and _document.js for global layouts. App Router supports nested layouts using layout.js at any route level.
Data Fetching: Pages Router uses getStaticProps and getServerSideProps. App Router uses standard async fetch() with custom cache configurations inside Server Components.

Q4What is the purpose of `_app.js` and `_document.js` in the Pages Router?

Answer:

_app.js: Custom root wrapper that initializes pages. Used for persistent layouts, global CSS imports, state providers (e.g., Redux, React Query), and page-change tracking. Runs on both server and client.
_document.js: Custom HTML shell renderer. Used to inject <html> attributes, language codes, custom fonts, or SSR CSS-in-JS styles. Only runs on the server and cannot use React hooks or client-side logic.

Q5How does Dynamic Routing work in the App Router vs Pages Router?

Answer: Both use bracket syntax, but structure files differently:

Pages Router: File pages/post/[id].js maps to /post/:id.
App Router: Folder app/post/[id]/page.js maps to /post/:id.
Catch-All Routing: Brackets with an ellipsis [...slug] map to nested sub-routes (e.g., /post/a/b/c).
Optional Catch-All: Double brackets [[...slug]] match the base route as well as nested sub-routes (e.g., matching /post as well as /post/a/b).

52 More Easy Questions Locked

Unlock the complete Next.js Easy question bank

Get instant access to all 57 questions, in-depth model answers, code sandboxes, and all 27+ technologies for a single one-time payment.

Unlock All — One-time payment · Lifetime access

Medium Level·57 Questions Total

Mechanisms & Practical Patterns

Open Full Medium List

Q1How does Incremental Static Regeneration (ISR) work under the hood? Explain "Stale-While-Revalidate".

Answer: ISR allows Next.js to update static pages after the initial build without re-deploying the entire site.

Initial Request: The server serves the pre-rendered HTML/JSON generated at build time (instantaneous CDN delivery).
Revalidation Window: If a request comes after the defined revalidate period (e.g., 60 seconds):
1. Next.js serves the stale static page to the current visitor.
2. Next.js triggers a revalidation process in the background on the server.
3. The server regenerates the page and updates the CDN cache with new static files.
4. Subsequent visitors receive the newly updated static page.

Q2What is On-Demand Revalidation, and how is it superior to time-based ISR?

Answer: On-Demand Revalidation updates static pages instantly when data changes, rather than waiting for a time interval to expire.

Action: Uses revalidatePath() or revalidateTag() inside server context to purge the cache.
Superiority:
- Efficiency: Eliminates unnecessary API queries during low-traffic periods.
- Freshness: Solves the stale-data issue by updating the CDN cache immediately when a database write occurs.

Q3Explain Server Actions in Next.js and how they eliminate client-to-server API boilerplate.

Answer: Server Actions are asynchronous functions that run on the server but can be invoked directly from Client or Server Components.

Mechanism: Next.js generates an implicit POST request endpoint under the hood when a Server Action is declared.
Benefits:
- No API Controllers: Eliminates writing custom Route Handlers or fetch() boilerplate to save form data.
- Progressive Enhancement: Forms can submit and work even before the client-side JavaScript has fully loaded.
- Security: Runs inside the server environment with access to backend services.

Q4How does Middleware work in Next.js? Detail its execution order and limitations.

Answer: Middleware runs code before a request is completed, enabling request rewrite, headers manipulation, and redirection.

Execution Timing: Executes after routing but before matches in the filesystem (pages or public folder) are processed.
Runtime: Runs on the Edge Runtime (lightweight V8 engine), not standard Node.js.
Limitations:
- Cannot use standard Node.js APIs (like fs, child_process).
- Limited external package compatibility (only packages using standard web APIs).
- Max execution memory and time limits apply (Vercel limits).

Q5Explain Route Groups in the App Router and how they affect path layouts.

Answer: Route Groups are directories wrapped in parentheses, such as (marketing) or (shop).

Path Exclusion: The folder name is omitted from the URL path (e.g., app/(shop)/product/page.js is accessed via /product).
Layout Isolation: Allows creating distinct layouts for specific groups of pages without creating subdirectories in the URL.
Multiple Root Layouts: Can be used to create multiple root layouts with different <html> tags by placing pages inside separate route group folders.

52 More Medium Questions Locked

Unlock the complete Next.js Medium question bank

Get instant access to all 57 questions, in-depth model answers, code sandboxes, and all 27+ technologies for a single one-time payment.

Unlock All — One-time payment · Lifetime access

Hard Level·57 Questions Total

Internals & System Architecture

Open Full Hard List

Q1Detail the React Server Components (RSC) serialization protocol. How does the client-side reconciler merge the stream?

Answer:

Serialization Protocol: Server Components compile to a flight JSON stream rather than HTML. This stream contains element types, props, and references to client component JS bundles (known as client references) but completely excludes the actual JS implementation of the server components.
Transmission: The stream is pushed over HTTP to the client in real time as chunks resolve on the server.
Client-Side Merging: The React client-side reconciler reads the stream. When it encounters a Client Component reference, it fetches the pre-chunked JS from the CDN, boots it, and instantiates the component. It then merges this virtual DOM representation into the existing DOM tree without destroying state inside active React client islands.

Q2How does the Rust-based Next.js Compiler (SWC) optimize server vs client bundle splitting?

Answer:

AST Analysis: SWC parses the file Abstract Syntax Tree (AST) to identify exports, imports, and directives.
Dead Code Elimination: When 'use client' is declared, SWC splits the module, packaging the client dependencies into browser bundles and exporting an empty reference proxy to the server bundle.
Inlining and Minification: SWC compiles TS/JSX down to native JS, inline-evaluates static conditions, strips unused code paths, and hashes chunks, executing these tasks up to 10x faster than Webpack's Babel loader.

Q3What memory leak hazards exist in Next.js Server-Side Rendering (SSR) and how do you resolve them?

Answer:

Module-Scope Singletons: Declaring shared connections (e.g., database clients like Knex or Prisma) in the global module scope of files can create new database connections on every dynamic server-side rebuild or hot-reload.
Dynamic Event Listeners: Appending events to global objects (like process or custom EventEmitters) inside server renders causes listeners to pile up, exhausting process memory.
Resolution: Implement the singleton pattern utilizing global context caching (globalThis or Node's global object) to reuse active instances across compiler hot-reloads in development.

Q4Explain the difference between React Server hydration and incremental hydration of Client islands.

Answer:

React Server hydration: Traditional React SSR hydrates the entire page at once. If any part of the component tree is missing its client-side JS bundle, hydration is delayed, blocking interactions.
Incremental Hydration: Next.js divides Client Components into discrete boundaries (islands) wrapped in Suspense.
Prioritization: Allows the browser to hydrate visible or highly interactive parts of the page first, using event delegation to record user actions on non-hydrated elements and replay them once their bundle arrives.

Q5How does Partial Prerendering (PPR) merge React's streaming HTML with static shell compilation?

Answer: PPR optimizes rendering by splitting pages into a static shell and dynamic segments:

Build Time: Next.js compiles layout, structural wrappers, and static components to pure HTML.
Request Time: The CDN serves the static HTML shell instantly.
Streaming Holes: Unresolved promises inside <Suspense> boundaries are left as empty placeholders. The server processes these dynamic fetches and streams the resolved HTML chunks to fill the holes, merging them without client-side navigation.

52 More Hard Questions Locked

Unlock the complete Next.js Hard question bank

Get instant access to all 57 questions, in-depth model answers, code sandboxes, and all 27+ technologies for a single one-time payment.

Unlock All — One-time payment · Lifetime access

DEDICATED LEVEL PAGES

Browse All Next.js Questions by Difficulty

Easy57 Questions

Core concepts, definitions, basic syntax, and first principles expected in round 1 screening.

VIEW FULL LIST

Medium57 Questions

Real-world mechanisms, state management, edge cases, performance trade-offs, and practical coding.

VIEW FULL LIST

Hard57 Questions

Deep runtime internals, memory models, distributed design, concurrency failure modes, and architectural decisions.

VIEW FULL LIST

INTERNAL LINKING & DEPENDENCIES

Related Technologies to Next.js

CAREER PATHWAYS

Next.js is a key requirement for these engineering roles:

Frontend Engineer Guide Full Stack Engineer Guide

DEVPREP CODEX · #13

Next.js Interview Questions

171 curated questions graded from Foundations (Easy) to Practical Patterns (Medium) and Internals & Architecture (Hard).

TOTAL QUESTIONS

171

THEORY QUESTIONS

150

IMPLEMENTATION FOLIOS

FREE QUESTIONS

5 / Level

Easy Level·57 Questions Total

Foundations & Core Concepts

Open Full Easy List

Q1What is Next.js, and what are its key advantages over a vanilla React SPA?

Answer: Next.js is a production-ready React meta-framework that enables hybrid rendering rendering strategies (SSR, SSG, ISR, CSR) out of the box.

Server-Side Pre-rendering: Delivers pre-rendered HTML to the client, improving SEO and Initial Page Load (LCP).
Built-in Optimizations: Features native components for optimizing images (next/image), scripts (next/script), fonts (next/font), and routes (next/link).
Zero Config: Automatically configures Webpack/Turbopack code splitting, compilation, and minification.
Hybrid Data Fetching: Allows different rendering methods on a page-by-page basis.

Q2Explain the core differences between CSR, SSR, SSG, and ISR rendering models.

Answer:

CSR (Client-Side Rendering): The server sends a bare-bones HTML page containing a JavaScript bundle. The browser downloads and executes the JS to build the UI at runtime.
SSR (Server-Side Rendering): Pre-renders HTML on the server for each incoming request. Best for dynamic, user-specific data that must be search-engine crawlable.
SSG (Static Site Generation): Pre-renders HTML at build time. HTML files remain static on a CDN. Best for static assets like blogs or marketing sites.
ISR (Incremental Static Regeneration): Regenerates static pages in the background periodically after the build has finished, without needing a full rebuild.

Q3What are the main differences between the Pages Router and the App Router?

Answer:

Routing Architecture: Pages Router routes are determined by files in the /pages directory. App Router is built on the /app directory where folders define routes and a page.js file serves as the route leaf.
Default Component Type: Pages Router uses standard React components (Client Components). App Router leverages React Server Components (RSC) by default.
Layout Management: Pages Router uses custom _app.js and _document.js for global layouts. App Router supports nested layouts using layout.js at any route level.
Data Fetching: Pages Router uses getStaticProps and getServerSideProps. App Router uses standard async fetch() with custom cache configurations inside Server Components.

Q4What is the purpose of `_app.js` and `_document.js` in the Pages Router?

Answer:

_app.js: Custom root wrapper that initializes pages. Used for persistent layouts, global CSS imports, state providers (e.g., Redux, React Query), and page-change tracking. Runs on both server and client.
_document.js: Custom HTML shell renderer. Used to inject <html> attributes, language codes, custom fonts, or SSR CSS-in-JS styles. Only runs on the server and cannot use React hooks or client-side logic.

Q5How does Dynamic Routing work in the App Router vs Pages Router?

Answer: Both use bracket syntax, but structure files differently:

Pages Router: File pages/post/[id].js maps to /post/:id.
App Router: Folder app/post/[id]/page.js maps to /post/:id.
Catch-All Routing: Brackets with an ellipsis [...slug] map to nested sub-routes (e.g., /post/a/b/c).
Optional Catch-All: Double brackets [[...slug]] match the base route as well as nested sub-routes (e.g., matching /post as well as /post/a/b).

52 More Easy Questions Locked

Unlock the complete Next.js Easy question bank

Get instant access to all 57 questions, in-depth model answers, code sandboxes, and all 27+ technologies for a single one-time payment.

Unlock All — One-time payment · Lifetime access

Medium Level·57 Questions Total

Mechanisms & Practical Patterns

Open Full Medium List

Q1How does Incremental Static Regeneration (ISR) work under the hood? Explain "Stale-While-Revalidate".

Answer: ISR allows Next.js to update static pages after the initial build without re-deploying the entire site.

Initial Request: The server serves the pre-rendered HTML/JSON generated at build time (instantaneous CDN delivery).
Revalidation Window: If a request comes after the defined revalidate period (e.g., 60 seconds):
1. Next.js serves the stale static page to the current visitor.
2. Next.js triggers a revalidation process in the background on the server.
3. The server regenerates the page and updates the CDN cache with new static files.
4. Subsequent visitors receive the newly updated static page.

Q2What is On-Demand Revalidation, and how is it superior to time-based ISR?

Answer: On-Demand Revalidation updates static pages instantly when data changes, rather than waiting for a time interval to expire.

Action: Uses revalidatePath() or revalidateTag() inside server context to purge the cache.
Superiority:
- Efficiency: Eliminates unnecessary API queries during low-traffic periods.
- Freshness: Solves the stale-data issue by updating the CDN cache immediately when a database write occurs.

Q3Explain Server Actions in Next.js and how they eliminate client-to-server API boilerplate.

Answer: Server Actions are asynchronous functions that run on the server but can be invoked directly from Client or Server Components.

Mechanism: Next.js generates an implicit POST request endpoint under the hood when a Server Action is declared.
Benefits:
- No API Controllers: Eliminates writing custom Route Handlers or fetch() boilerplate to save form data.
- Progressive Enhancement: Forms can submit and work even before the client-side JavaScript has fully loaded.
- Security: Runs inside the server environment with access to backend services.

Q4How does Middleware work in Next.js? Detail its execution order and limitations.

Answer: Middleware runs code before a request is completed, enabling request rewrite, headers manipulation, and redirection.

Execution Timing: Executes after routing but before matches in the filesystem (pages or public folder) are processed.
Runtime: Runs on the Edge Runtime (lightweight V8 engine), not standard Node.js.
Limitations:
- Cannot use standard Node.js APIs (like fs, child_process).
- Limited external package compatibility (only packages using standard web APIs).
- Max execution memory and time limits apply (Vercel limits).

Q5Explain Route Groups in the App Router and how they affect path layouts.

Answer: Route Groups are directories wrapped in parentheses, such as (marketing) or (shop).

Path Exclusion: The folder name is omitted from the URL path (e.g., app/(shop)/product/page.js is accessed via /product).
Layout Isolation: Allows creating distinct layouts for specific groups of pages without creating subdirectories in the URL.
Multiple Root Layouts: Can be used to create multiple root layouts with different <html> tags by placing pages inside separate route group folders.

52 More Medium Questions Locked

Unlock the complete Next.js Medium question bank

Get instant access to all 57 questions, in-depth model answers, code sandboxes, and all 27+ technologies for a single one-time payment.

Unlock All — One-time payment · Lifetime access

Hard Level·57 Questions Total

Internals & System Architecture

Open Full Hard List

Q1Detail the React Server Components (RSC) serialization protocol. How does the client-side reconciler merge the stream?

Answer:

Serialization Protocol: Server Components compile to a flight JSON stream rather than HTML. This stream contains element types, props, and references to client component JS bundles (known as client references) but completely excludes the actual JS implementation of the server components.
Transmission: The stream is pushed over HTTP to the client in real time as chunks resolve on the server.
Client-Side Merging: The React client-side reconciler reads the stream. When it encounters a Client Component reference, it fetches the pre-chunked JS from the CDN, boots it, and instantiates the component. It then merges this virtual DOM representation into the existing DOM tree without destroying state inside active React client islands.

Q2How does the Rust-based Next.js Compiler (SWC) optimize server vs client bundle splitting?

Answer:

AST Analysis: SWC parses the file Abstract Syntax Tree (AST) to identify exports, imports, and directives.
Dead Code Elimination: When 'use client' is declared, SWC splits the module, packaging the client dependencies into browser bundles and exporting an empty reference proxy to the server bundle.
Inlining and Minification: SWC compiles TS/JSX down to native JS, inline-evaluates static conditions, strips unused code paths, and hashes chunks, executing these tasks up to 10x faster than Webpack's Babel loader.

Q3What memory leak hazards exist in Next.js Server-Side Rendering (SSR) and how do you resolve them?

Answer:

Module-Scope Singletons: Declaring shared connections (e.g., database clients like Knex or Prisma) in the global module scope of files can create new database connections on every dynamic server-side rebuild or hot-reload.
Dynamic Event Listeners: Appending events to global objects (like process or custom EventEmitters) inside server renders causes listeners to pile up, exhausting process memory.
Resolution: Implement the singleton pattern utilizing global context caching (globalThis or Node's global object) to reuse active instances across compiler hot-reloads in development.

Q4Explain the difference between React Server hydration and incremental hydration of Client islands.

Answer:

React Server hydration: Traditional React SSR hydrates the entire page at once. If any part of the component tree is missing its client-side JS bundle, hydration is delayed, blocking interactions.
Incremental Hydration: Next.js divides Client Components into discrete boundaries (islands) wrapped in Suspense.
Prioritization: Allows the browser to hydrate visible or highly interactive parts of the page first, using event delegation to record user actions on non-hydrated elements and replay them once their bundle arrives.

Q5How does Partial Prerendering (PPR) merge React's streaming HTML with static shell compilation?

Answer: PPR optimizes rendering by splitting pages into a static shell and dynamic segments:

Build Time: Next.js compiles layout, structural wrappers, and static components to pure HTML.
Request Time: The CDN serves the static HTML shell instantly.
Streaming Holes: Unresolved promises inside <Suspense> boundaries are left as empty placeholders. The server processes these dynamic fetches and streams the resolved HTML chunks to fill the holes, merging them without client-side navigation.

52 More Hard Questions Locked