Next.js Interview Questions for Freshers
The Next.js questions freshers are most often asked, with a short answer for each. Every question links to a full lesson with the traps interviewers look for and a step-by-step trace.
01 · Next.js Rendering Foundations · Easy
Evolution of Web Rendering: CSR, SSR, SSG, and ISR
CSR ships a minimal HTML shell and executes JavaScript in the browser. SSR renders full HTML dynamically on every request on the server.
Full answer, traps and step-by-step trace02 · Next.js Rendering Foundations · Medium
Streaming SSR with React Suspense
Streaming SSR uses HTTP chunked transfer encoding to send HTML to the browser incrementally.
Full answer, traps and step-by-step trace03 · Next.js Rendering Foundations · Medium
Incremental Static Regeneration (ISR) Internals
ISR enables static pages to update incrementally in the background without rebuilding the entire application. When a request arrives after the revalidation window, the edge CDN serves the stale cache immediately while triggering a background worker.
Full answer, traps and step-by-step trace04 · Next.js Rendering Foundations · Easy
Understanding React Server Components (RSC) vs SSR
SSR is a rendering technique that produces initial HTML strings from React components, but still ships their full JavaScript bundle to the browser for hydration.
Full answer, traps and step-by-step trace05 · Next.js Rendering Foundations · Medium
Partial Prerendering (PPR) & Cache Components
Partial Prerendering (PPR) combines static shell pre-rendering with dynamic streaming slots within a single HTTP response. At build time, Next.js generates static HTML for static segments and punches holes around dynamic Suspense boundaries.
Full answer, traps and step-by-step trace06 · App Router File Conventions · Easy
The Route Hierarchy: Layouts, Templates, and Pages
Layouts (layout.tsx) wrap page hierarchies, preserve client state across navigations, and do not re-render their DOM on route changes.
Full answer, traps and step-by-step trace07 · App Router File Conventions · Easy
Route Groups and Multiple Root Layouts
Route groups wrap folder names in parentheses, such as (marketing) and (dashboard), organizing files and layouts without affecting the public URL path.
Full answer, traps and step-by-step trace08 · App Router File Conventions · Easy
Declarative Loading States with loading.tsx
loading.tsx automatically wraps the sibling page.tsx and nested children inside an implicit React Suspense boundary.
Full answer, traps and step-by-step trace09 · App Router File Conventions · Medium
Granular Error Handling with error.tsx and global-error.tsx
error.tsx defines an isolated React Error Boundary around sibling page segments, allowing crashes to be caught without breaking the outer layout. It must be a Client Component and receives error and reset props.
Full answer, traps and step-by-step trace10 · App Router File Conventions · Medium
Not-Found Handling: not-found.tsx and notFound()
not-found.tsx renders a custom 404 UI for unmatched URLs or when programmatically triggered via notFound(). When invoked during server rendering, Next.js emits an HTTP 404 status code header to search engine crawlers.
Full answer, traps and step-by-step trace11 · Server Components & Boundaries · Easy
The "use client" Boundary: What Crosses the Wire?
The "use client" directive marks an entry point to the client bundle boundary, not code that executes exclusively in the browser. Client components still pre-render to HTML on the server during SSR.
Full answer, traps and step-by-step trace12 · Server Components & Boundaries · Medium
Passing Server Components to Client Components as Children
A Client Component cannot directly import a Server Component, but can accept it as a children or slot prop.
Full answer, traps and step-by-step trace13 · Server Components & Boundaries · Medium
Third-Party Library Integration & Client Wrappers
Many npm packages rely on React hooks (useState, useEffect) or browser globals without declaring "use client".
Full answer, traps and step-by-step trace14 · Server Components & Boundaries · Medium
State Management & Context Architecture in RSC
In an RSC-first architecture, server state is managed through the URL and Server Components, eliminating redundant global stores.
Full answer, traps and step-by-step trace15 · Data Fetching & Request Lifecycle · Easy
Async Server Components & Direct Database Access
Async React Server Components execute exclusively on the server, allowing developers to query databases (Prisma, Drizzle, pg) and backend services directly with async/await.
Full answer, traps and step-by-step trace16 · Data Fetching & Request Lifecycle · Medium
Breaking Change: Async Request APIs in Next.js 15+
In Next.js 15+, dynamic request data—specifically params, searchParams, cookies(), and headers()—is asynchronous and must be awaited.
Full answer, traps and step-by-step trace17 · Data Fetching & Request Lifecycle · Medium
Request Waterfalls: Prevention with Promise.all and Suspense
Request waterfalls occur when sequential async operations block subsequent requests unnecessarily.
Full answer, traps and step-by-step trace18 · Data Fetching & Request Lifecycle · Medium
Static Param Pre-generation with generateStaticParams
generateStaticParams replaces Pages Router’s getStaticPaths in the App Router. It runs at build time to define the list of route segment parameters that will be statically prerendered to HTML and RSC Flight files.
Full answer, traps and step-by-step trace19 · Data Fetching & Request Lifecycle · Medium
Request Deduplication & React.cache Internals
Request deduplication ensures that identical data requests within a single server render cycle execute only once. Native fetch() requests with identical URLs and options are deduplicated automatically by Next.js.
Full answer, traps and step-by-step trace20 · Next.js Caching Architecture · Medium
Evolution of Caching: Next.js 14 Implicit vs Next.js 15+ Opt-In
In Next.js 14, fetch requests and Route Handlers were cached aggressively by default (force-cache), leading to widespread developer confusion regarding stale dynamic data.
Full answer, traps and step-by-step trace21 · Next.js Caching Architecture · Medium
On-Demand Revalidation: revalidateTag vs revalidatePath
revalidateTag purges cache entries associated with a specific semantic cache key across the entire application, making it ideal for entity-based updates (e.g. updating a product).
Full answer, traps and step-by-step trace22 · Next.js Caching Architecture · Medium
The Client-Side Router Cache & Stale Prefetch Pitfalls
The client-side Router Cache stores rendered React Server Component Flight payloads in browser memory during a user session. When users navigate, Next.js serves pages instantly from this client cache.
Full answer, traps and step-by-step trace23 · Next.js Caching Architecture · Medium
Dynamic Rendering vs Static Rendering Triggers
In Next.js App Router, routes are statically prerendered by default unless they consume dynamic functions (cookies(), headers(), searchParams) or an uncached data source.
Full answer, traps and step-by-step trace24 · Server Actions & Form Mutations · Medium
Server Actions Fundamentals & RPC Execution Model
Server Actions are asynchronous server functions defined with the "use server" directive. They implement a type-safe Remote Procedure Call (RPC) protocol over HTTP POST requests.
Full answer, traps and step-by-step trace25 · Server Actions & Form Mutations · Medium
Form Architecture: GET Navigation (next/form) vs POST (useActionState)
In modern Next.js form architecture: use next/form for GET search and navigation forms to automatically update the URL query parameters with client-side soft navigation and prefetching.
Full answer, traps and step-by-step trace26 · Server Actions & Form Mutations · Medium
Progressive Enhancement & JavaScript-Disabled Forms
Progressive enhancement ensures that web applications remain fully functional even when client-side JavaScript is disabled, blocked by ad-blockers, or still downloading.
Full answer, traps and step-by-step trace27 · Server Actions & Form Mutations · Medium
Server Action Closures, Revalidation, and Redirection
Server Actions can close over server-side scope and receive bound parameters via Function.prototype.bind. After executing mutations, Server Actions orchestrate data updates through revalidatePath/revalidateTag and page navigation via redirect().
Full answer, traps and step-by-step trace28 · Security & Authentication Architecture · Medium
Preventing Data Leaks with server-only & React Taint APIs
Data leaks in React Server Components occur when sensitive server-side secrets or raw database records are accidentally imported by Client Components or passed across component boundaries.
Full answer, traps and step-by-step trace29 · Advanced Routing & Interception · Medium
Parallel Routes: Dashboards and Conditional Slot Rendering
Parallel Routes allow developers to render one or more independent page slots (@slot) simultaneously within the same parent layout.
Full answer, traps and step-by-step trace30 · Advanced Routing & Interception · Easy
Dynamic Route Catch-Alls: [...slug] vs [[...slug]]
Catch-all routes [...slug] match one or more subsequent path segments and supply them as a string array.
Full answer, traps and step-by-step trace31 · Asset Optimization & Performance · Medium
Next.js Image Optimization (next/image) Internals
The next/image component automatically optimizes images on-demand: converting formats to modern WebP/AVIF, resizing based on device viewport sizes, preventing Cumulative Layout Shift (CLS) via intrinsic aspect ratios, and deferring off-screen images using…
Full answer, traps and step-by-step trace32 · Asset Optimization & Performance · Medium
Zero-CLS Font Optimization with next/font
next/font automatically hosts Google Fonts and custom fonts locally at build time, eliminating external network requests to Google servers for GDPR compliance.
Full answer, traps and step-by-step trace33 · Asset Optimization & Performance · Medium
Third-Party Script Optimization with next/script
Third-party scripts (Google Tag Manager, analytics, chat widgets) are the #1 cause of degraded Total Blocking Time (TBT) and Interaction to Next Paint (INP).
Full answer, traps and step-by-step trace34 · Asset Optimization & Performance · Medium
Code Splitting, Dynamic Imports & Package Optimization
Next.js performs automatic route-based code splitting. To split heavy client components or libraries (like Monaco editor, Three.js, charting suites), developers use next/dynamic with React.lazy.
Full answer, traps and step-by-step trace35 · Dynamic Metadata & SEO · Medium
Static vs Dynamic Metadata Generation
Next.js provides two ways to define SEO tags: static metadata via the export const metadata object, and dynamic metadata via the generateMetadata async function.
Full answer, traps and step-by-step trace36 · Dynamic Metadata & SEO · Medium
Dynamic OpenGraph Image Generation with @vercel/og
Next.js supports programmatically generating social share images (og:image) using opengraph-image.tsx route conventions powered by @vercel/og and Satori.
Full answer, traps and step-by-step trace37 · Dynamic Metadata & SEO · Medium
Dynamic XML Sitemaps and Robots Configuration
Next.js provides special file-convention endpoints for search engine indexing: sitemap.ts generates standard XML sitemaps dynamically, while robots.ts generates robots.txt rules.
Full answer, traps and step-by-step trace38 · Dynamic Metadata & SEO · Medium
Structured Data (JSON-LD) Implementation in Server Components
Structured Data using schema.org vocabulary in JSON-LD format enables Google to understand page semantics and render rich search results (Rich Snippets, Star Ratings, FAQs, Product Badges).
Full answer, traps and step-by-step trace39 · Production Operations & DevOps · Medium
Node.js Runtime vs Edge Runtime Tradeoffs
Next.js supports two server runtimes: the full Node.js Runtime and the lightweight Edge Runtime (V8 isolates). The Node.js runtime supports the full Node API ecosystem, heavy npm libraries, and native database drivers, but has higher cold starts (~200ms).
Full answer, traps and step-by-step trace40 · Production Operations & DevOps · Medium
Managing Environment Variables & Build-Time Inlining
Next.js differentiates between private server-side environment variables and public client-side variables prefixed with NEXT_PUBLIC_.
Full answer, traps and step-by-step trace41 · Pages Router & Migration Strategy · Medium
Pages Router Data Fetching: getServerSideProps vs getStaticProps
In Pages Router, data fetching was defined per-page via exported functions: getServerSideProps executed on every request on the server (SSR), while getStaticProps executed at build time to produce static HTML/JSON (SSG), with optional revalidate for ISR.
Full answer, traps and step-by-step trace42 · Pages Router & Migration Strategy · Medium
Custom _app.js and _document.js Lifecycle
In Pages Router, _document.js rendered strictly on the server to customize the initial HTML shell (<html>, <head>, <body>), but could not contain client logic.
Full answer, traps and step-by-step trace43 · Pages Router & Migration Strategy · Medium
Mapping Pages Router APIs to App Router Equivalents
Migrating from Pages Router to App Router involves direct API mapping: getServerSideProps maps to async Server Components; getStaticProps maps to async fetch or "use cache"; getStaticPaths maps to generateStaticParams; next/head maps to generateMetadata; and…
Full answer, traps and step-by-step trace44 · Pages Router & Migration Strategy · Medium
Migrating Navigation: next/router vs next/navigation
In Pages Router, next/router provided a monolithic useRouter() hook returning pathname, query, asPath, and router events.
Full answer, traps and step-by-step trace45 · Enterprise Architecture & System Design · Medium
Internationalization (i18n): App Router Routing
Unlike Pages Router which featured built-in i18n configuration in next.config.js, App Router relies on subpath routing via dynamic route segments (app/[lang]/...) orchestrated by proxy.ts or middleware.ts.
Full answer, traps and step-by-step trace46 · Enterprise Architecture & System Design · Medium
Monorepo Architecture with Turborepo & Shared Component Libraries
Enterprise Next.js monorepos use Turborepo alongside npm/pnpm workspaces to manage multiple applications (web, mobile, admin, docs) and shared internal packages (ui, database, utils, tsconfig).
Full answer, traps and step-by-step trace47 · Debugging & Production Anti-Patterns · Medium
Next.js Redirect Exception Suppression in try/catch Blocks
In Next.js, redirect() and notFound() intentionally throw internal JavaScript exceptions (NEXT_REDIRECT and NEXT_NOT_FOUND) to interrupt control flow.
Full answer, traps and step-by-step trace
Applying for the role too? Full stack developer resume examples