Top 30 Nextjs Interview Questions and Answers

30 questions. Pick an answer, or open “Show the answer” to read it.

Answers are graded in your browser. Nothing is saved, and no XP or streak is earned here. The app keeps score.

1. Question 1 of 30

   What is the significance of Vercel using the same public Adapter API contract as third-party platforms?

   • aThird-party platforms can achieve full framework fidelity without relying on reverse-engineered internals.
   • bAll platforms are required to use an identical runtime configuration generated by modifyConfig.
   • cVercel must submit adapter changes to the Ecosystem Working Group before deployment.
   • dVercel has open-sourced its adapter so platforms can replicate previously private build logic.
   Show the answer

   Answer: a · Third-party platforms can achieve full framework fidelity without relying on reverse-engineered internals.

   The correct answer is B because the card emphasizes that the public contract allows any platform to target the same framework fidelity as Vercel without reverse-engineering build output. Option D is tempting because Vercel did open-source its adapter, but the card explicitly states there are no private hooks, so there was no secret build logic to replicate.

   Read the full bite: Next.js 16.2 ships stable Adapter API for all platforms

2. Question 2 of 30

   According to Dodds, what is the best response when vector search misses exact identifiers like 'React Testing Library'?

   • aFine-tune the embedding model exclusively on technical documentation
   • bSwitch to a more powerful embedding model with a larger context window
   • cAdd a BM25 lexical layer and merge results with Reciprocal Rank Fusion
   • dAbandon vector search and rely solely on a SQLite FTS5 index
   Show the answer

   Answer: c · Add a BM25 lexical layer and merge results with Reciprocal Rank Fusion

   Dodds kept his existing vector pipeline and augmented it with SQLite FTS5 BM25 search, merging both result sets via Reciprocal Rank Fusion, because embedding models inherently optimize for conceptual meaning rather than exact string matches. Simply scaling up the embedding model or switching entirely to lexical search would not solve the hybrid retrieval problem.

   Read the full bite: Kent C. Dodds Adds SQLite FTS5 to Vector Search

3. Question 3 of 30

   Why does the card suggest evaluating Vercel Connect against your current secret management strategy?

   • aBecause it replaces long-lived environment tokens with temporary scoped credentials
   • bBecause it enables service-to-service communication without public internet exposure
   • cBecause it integrates with Amazon Aurora and DynamoDB for credential storage
   • dBecause it provides sandboxed compute for agent code execution
   Show the answer

   Answer: a · Because it replaces long-lived environment tokens with temporary scoped credentials

   The card states that Vercel Connect introduces temporary scoped credentials for agent-to-service authentication, eliminating long-lived environment tokens, which directly addresses secret management and token rotation struggles. Option C confuses Connect with Marketplace database integrations, while B and D describe other distinct products in the Agent Stack.

   Read the full bite: Vercel Ship 2026: agent stack, eve framework, and microservices

4. Question 4 of 30

   When is next/dynamic most effectively used in a Next.js application?

   • aTo ensure all components are pre-rendered on the server for SEO benefits.
   • bAs a general optimization for every component to reduce overall application complexity.
   • cFor small, essential components that are always visible above the fold.
   • dTo load large, non-critical components or those relying on browser-specific APIs only when needed.
   Show the answer

   Answer: d · To load large, non-critical components or those relying on browser-specific APIs only when needed.

   The card states that next/dynamic is ideal for large components not critical for initial paint or for integrating components dependent on browser-specific APIs, loading them only when required. It explicitly advises against using it for small, simple components or for universal server-side rendering.

   Read the full bite: next/dynamic: Defer Loading Heavy Components

5. Question 5 of 30

   Why does runtime CSS-in-JS specifically degrade interactivity during SSR hydration in Next.js?

   • aIt forces every component to re-fetch its CSS from the server on mount
   • bIt runs style serialization and injection on the main thread, competing with hydration
   • cIt blocks the network request for the HTML document until styles compile
   • dIt disables React's concurrent renderer entirely on the client
   Show the answer

   Answer: b · It runs style serialization and injection on the main thread, competing with hydration

   Runtime style generation executes JavaScript during render, occupying the main thread that hydration needs. It does not block the HTML request, disable concurrency, or refetch CSS over the network.

   Read the full bite: Runtime CSS-in-JS performance pitfalls in SSR Next.js

6. Question 6 of 30

   In a React single-page application, what is the key technical difference between using a framework Link component and a standard anchor tag for internal navigation?

   • aLink is just a stylistic wrapper around an anchor tag that helps avoid prop drilling in deeply nested component trees
   • bLink intercepts the click event and updates the URL using the History API without requesting a new document from the server
   • cLink performs a full page refresh like an anchor tag but caches the HTML response to make subsequent loads faster
   • dLink automatically prefetches every linked route's code and data as soon as it appears on screen, regardless of conditions
   Show the answer

   Answer: b · Link intercepts the click event and updates the URL using the History API without requesting a new document from the server

   Link intercepts the click and uses the History API to change the URL without unloading the page, preserving in-memory React state and avoiding CSS/JS reparsing. The distractor that claims Link is merely a stylistic wrapper is wrong because it fundamentally alters the browser navigation lifecycle to enable client-side routing.

   Read the full bite: Why use Link over <a> for internal navigation?

7. Question 7 of 30

   When defining a dynamic UI route in Next.js, what is the fundamental difference between how Pages Router and App Router map the file system to the URL path?

   • aApp Router changes dynamic segment syntax from brackets to named parameters, while Pages Router continues to use bracket notation.
   • bApp Router uses route.js files as page components for every segment, while Pages Router relies solely on [slug].js files for dynamic paths.
   • cApp Router preserves the file-as-route convention but simply renames page files to page.js inside an app folder, keeping all other behavior identical.
   • dApp Router treats folders as route segments and requires page.js for the leaf UI, while Pages Router uses the JavaScript file itself as the route endpoint.
   Show the answer

   Answer: d · App Router treats folders as route segments and requires page.js for the leaf UI, while Pages Router uses the JavaScript file itself as the route endpoint.

   App Router uses folders as route segments and requires page.js for leaf UI, while Pages Router uses JavaScript files directly as route endpoints. Option C is tempting but wrong because App Router is not merely a folder rename; it introduces co-located segment-level primitives like layout.js and loading.js that Pages Router lacks.

   Read the full bite: Compare Pages Router and App Router file-based routing conventions and capabilities

8. Question 8 of 30

   In a standard client-side React Router setup versus a Next.js App Router application, what is the critical difference in HTTP semantics when a user visits an unmatched URL?

   • aReact Router's wildcard route automatically issues an HTTP 404 status for the initial document request, while Next.js not-found.js returns HTTP 200 by default.
   • bBoth routers handle unmatched routes client-side, but React Router requires manual layout wrapping while Next.js preserves shared layouts automatically through file-system conventions.
   • cReact Router relies on implicit file-system routing to discover 404 boundaries, while Next.js App Router requires explicit wildcard route definitions in a central configuration file.
   • dNext.js App Router renders not-found.js on the server and sends a true HTTP 404 status, whereas React Router's catch-all renders in the browser and typically preserves the server's original HTTP 200 response.
   Show the answer

   Answer: d · Next.js App Router renders not-found.js on the server and sends a true HTTP 404 status, whereas React Router's catch-all renders in the browser and typically preserves the server's original HTTP 200 response.

   Next.js App Router's not-found.js convention server-renders a true HTTP 404 response, while React Router's wildcard route only manipulates the DOM client-side and leaves the initial document's HTTP 200 status unchanged. Option A is tempting because it reflects the common misconception that a React Router catch-all route affects the HTTP status code, but the framework has no built-in server-side semantics for doing so.

   Read the full bite: How do you handle 404s in React Router and Next.js App Router?

9. Question 9 of 30

   In Next.js pages router SSR with Redux, what is required to prevent React from discarding server markup during hydration?

   • aRedux Toolkit automatically handles state transfer across the boundary without manual serialization
   • bThe server serializes state to an escaped script tag and the client hydrates the store before ReactDOM.hydrate
   • cThe server should pass the store via props and initialize it during the root render
   • dThe client must refetch identical data after hydration to populate the store
   Show the answer

   Answer: b · The server serializes state to an escaped script tag and the client hydrates the store before ReactDOM.hydrate

   The client must bootstrap the Redux store from the server-injected payload before calling ReactDOM.hydrate so the initial render matches the server HTML exactly; initializing during render or refetching afterwards forces React to rebuild the DOM.

   Read the full bite: What is state hydration in Next.js SSR with Redux or Zustand?

10. Question 10 of 30

    Which application type is best suited for Next.js Static Site Generation (SSG)?

    • aA user dashboard displaying personalized, real-time data
    • bA social media feed that updates frequently with new posts
    • cA web application requiring server-side computation for every user request
    • dAn e-commerce product page with content determined at build time
    Show the answer

    Answer: d · An e-commerce product page with content determined at build time

    SSG is ideal for content that can be determined at build time and doesn't change on a per-user basis, such as e-commerce product listings. The other options describe scenarios requiring live, personalized, or per-request dynamic data, for which SSG is unsuitable due to its pre-rendering nature.

    Read the full bite: Next.js SSG: Pre-render Pages for Maximum Speed

11. Question 11 of 30

    What is the correct way to run a database query only once when both a layout and its nested pages need the same data in the App Router?

    • aFetch the data in the layout and pass it down to pages as props
    • bUse getServerSideProps in the layout to fetch the data at request time
    • cWrap the query in React cache and call it from both the layout and nested Server Components
    • dFetch the data in the layout and store it in a module-level variable for child pages
    Show the answer

    Answer: c · Wrap the query in React cache and call it from both the layout and nested Server Components

    React cache memoizes the query for the duration of the request, so invoking it in both the layout and nested pages deduplicates the database call. Option A is tempting but incorrect because App Router layouts cannot pass custom props to their child pages.

    Read the full bite: Recommended App Router pattern to fetch shared data once for child routes

12. Question 12 of 30

    When architecting a Next.js App Router product page, which approach best aligns with the recommended hybrid data strategy?

    • aFetch review summaries in a Server Component and handle inventory checks with a client fetching library
    • bFetch product descriptions and SEO metadata with React Query to enable background refetching on focus
    • cUse a Server Component for the Add to Cart inventory check to leverage automatic request deduplication
    • dMove all data fetching to Client Components to prevent hydration mismatches and simplify mutations
    Show the answer

    Answer: a · Fetch review summaries in a Server Component and handle inventory checks with a client fetching library

    Review summaries are stable and SEO-critical, so they belong in a Server Component, whereas inventory checks need optimistic updates and background refetching best handled by a client library. Option C misapplies server deduplication to interactive data that requires instant mutation feedback.

    Read the full bite: Server Component fetch vs. client-side SWR or React Query

13. Question 13 of 30

    In a Next.js App Router Server Component, which fetch configuration forces the route to render dynamically at request time instead of at build time?

    • aExport getServerSideProps from the page file
    • bCall fetch inside a useEffect hook
    • cPass next revalidate 3600 in the fetch options
    • dPass cache no-store in the fetch options
    Show the answer

    Answer: d · Pass cache no-store in the fetch options

    Passing cache no-store to fetch disables static caching and forces Next.js to render the route on every request. A positive revalidate value such as 3600 enables ISR, not per-request SSR, while getServerSideProps is a Pages Router API.

    Read the full bite: How do you implement SSR in Next.js App Router and configure fetch?

14. Question 14 of 30

    What is the main problem that file-based routing aims to solve compared to traditional routing approaches?

    • aThe difficulty of implementing dynamic routes that capture URL parameters.
    • bThe need for frameworks to parse route configurations at runtime, impacting performance.
    • cThe lack of a clear, intuitive way to structure an application's navigation.
    • dThe potential for URL paths and their corresponding component files to become out of sync.
    Show the answer

    Answer: d · The potential for URL paths and their corresponding component files to become out of sync.

    File-based routing was created to eliminate the 'two sources of truth' problem, where a separate central configuration file could easily fall out of sync with component files. It makes the filesystem the single source of truth for routes. While it simplifies dynamic routes (Option A) and offers intuitive structure (Option C), these are benefits stemming from solving the core synchronization problem, not the primary problem itself.

    Read the full bite: File-Based Routing: Your Filesystem is Your API

15. Question 15 of 30

    Which statement best describes how React Server Components change data fetching compared to getStaticProps and getServerSideProps?

    • aThey move all data fetching to build time by default, acting as granular getStaticProps for each component in the page.
    • bThey preserve the page-level fetch model but automatically pass returned data through context to avoid explicit prop drilling.
    • cThey are essentially getServerSideProps refactored into individual components, so every fetch runs at request time for that component.
    • dThey allow individual components anywhere in the tree to fetch data via async/await, enabling streaming and mixed static or dynamic data without prop drilling.
    Show the answer

    Answer: d · They allow individual components anywhere in the tree to fetch data via async/await, enabling streaming and mixed static or dynamic data without prop drilling.

    Server Components move data fetching from the page level into individual components, enabling streaming and eliminating prop drilling. Option C is tempting but wrong because it treats them as a simple rename of getServerSideProps, missing the component-level granularity and build-time flexibility.

    Read the full bite: How does Server Component fetching differ from getStaticProps and getServerSideProps?

16. Question 16 of 30

    What is a primary advantage of the App Router's "component-centric" mental model compared to the Pages Router's "page-centric" approach?

    • aIt requires all components to be client components, simplifying state management.
    • bIt allows individual components to fetch their own data and supports nested layouts.
    • cIt removes the need for any server-side code, making applications entirely client-rendered.
    • dIt exclusively uses static site generation, making deployments faster.
    Show the answer

    Answer: b · It allows individual components to fetch their own data and supports nested layouts.

    The card states the App Router is "component-centric" where "server-side components can fetch their own data independently" and "provides superior features like nested layouts." Distractor B is incorrect because the App Router heavily utilizes server-side components and data fetching, not eliminating it.

    Read the full bite: Next.js: Pages Router vs. App Router

17. Question 17 of 30

    In a Next.js App Router dynamic route using generateStaticParams for known slugs, what determines whether an unmatched slug is server-rendered on demand instead of returning a 404?

    • aThe revalidate export specifying a time-based revalidation window
    • bReturning fallback true from generateStaticParams alongside the params array
    • cThe dynamic export set to force-dynamic
    • dThe dynamicParams export set to true or false
    Show the answer

    Answer: d · The dynamicParams export set to true or false

    The dynamicParams route segment config controls whether slugs not returned by generateStaticParams are server-rendered on demand or return a 404. Returning fallback true is a Pages Router getStaticPaths pattern that does not apply to App Router, where generateStaticParams has no fallback property.

    Read the full bite: How would you use generateStaticParams for known products and on-demand unknowns?

18. Question 18 of 30

    What type of information should NEVER be placed directly into next.config.js?

    • aSettings for optimizing images from a CDN
    • bRules for redirecting old URLs to new ones
    • cPrivate API keys or sensitive database credentials
    • dEnvironment variables intended for client-side use
    Show the answer

    Answer: c · Private API keys or sensitive database credentials

    The card explicitly states, "Do not put secrets or private API keys directly into next.config.js" because anything in the env block is exposed to the client-side browser bundle. While environment variables can be made available to the client, this should only be for non-sensitive public variables, not private secrets.

    Read the full bite: next.config.js: Your Next.js App's Control Panel

19. Question 19 of 30

    What is the main purpose of implementing loading.js in a Next.js route segment?

    • aTo display an immediate UI shell while waiting for server-rendered content to stream.
    • bTo automatically apply a loading state to all parent layouts of the segment.
    • cTo enable client-side data fetching for components within that segment.
    • dTo reduce the total server-side rendering duration for complex pages.
    Show the answer

    Answer: a · To display an immediate UI shell while waiting for server-rendered content to stream.

    The card explains that loading.js shows an "instant UI shell while streaming in server-rendered content" to improve perceived performance by preventing blank screens. Option B is incorrect because the card explicitly states that a loading UI "only wraps its own route segment and children, not parent layouts."

    Read the full bite: Next.js Loading UI: Instant Shells, Streamed Content

20. Question 20 of 30

    After a user updates their profile picture, what is the most appropriate way to ensure the new image is displayed?

    • aImplement revalidatePath('/profile') in a Server Action after the database update.
    • bConfigure the fetch call for the profile data with revalidate: 3600 to update hourly.
    • cRely on Next.js to automatically detect the database change and revalidate the cache.
    • dDisable caching for the profile data using cache: 'no-store' in the fetch call.
    Show the answer

    Answer: a · Implement revalidatePath('/profile') in a Server Action after the database update.

    Option A uses on-demand revalidation, which is specifically designed for data that changes as a direct result of user actions, ensuring the UI reflects the change on the next page load. Option B, time-based revalidation, is for data that updates periodically, not for immediate updates after a user action.

    Read the full bite: Next.js Caching: When and How to Revalidate Data

21. Question 21 of 30

    What is the expected behavior when a user refreshes the browser while viewing content via a Next.js intercepting route?

    • aAn error occurs because the intercepted state cannot be re-established on a full page reload.
    • bThe application navigates back to the route from which the interception originated.
    • cThe full, dedicated page corresponding to the intercepted route is rendered, without the modal context.
    • dThe modal content persists, but the URL in the address bar reverts to the underlying page's path.
    Show the answer

    Answer: c · The full, dedicated page corresponding to the intercepted route is rendered, without the modal context.

    Intercepting routes are designed so that a page refresh or direct navigation bypasses the interception, rendering the full, dedicated page for that route. The URL remains the intercepted route's path, but the content is no longer in a modal.

    Read the full bite: Next.js Intercepting Routes: Modals on Rails

22. Question 22 of 30

    In which context would Next.js's `next` and `cache` options for `fetch` be disregarded?

    • aWhen no `next` or `cache` options are explicitly provided to `fetch`.
    • bInside a Route Handler processing an API request.
    • cWithin a Server Component fetching data from a database.
    • dWhen making a `fetch` call from a Client Component.
    Show the answer

    Answer: d · When making a `fetch` call from a Client Component.

    The card explicitly states that the `next` and `cache` options are server-side features and are ignored when `fetch` is called from a Client Component. In other server-side contexts like Server Components or Route Handlers, these options are processed by Next.js. If no options are provided, Next.js applies default caching behavior, it doesn't "disregard" provided options.

    Read the full bite: Next.js Extends `fetch` for Server-Side Caching

23. Question 23 of 30

    Why must the variant ID be injected server-side into the HTML or data layer when using NextResponse.rewrite for A/B testing in Middleware?

    • aBecause client-side analytics scripts see only the public URL and not the internal rewrite target.
    • bBecause React Context cannot access cookies set by Middleware during server-side rendering.
    • cBecause NextResponse.rewrite strips custom headers and cookies before they reach the page component.
    • dBecause the browser address bar must display the variant path for proper SEO indexing.
    Show the answer

    Answer: a · Because client-side analytics scripts see only the public URL and not the internal rewrite target.

    Client-side trackers execute after the rewrite and only see the public URL, so the variant ID must be injected server-side for accurate attribution. Option D is tempting but backwards: preserving the public URL via rewrite avoids SEO issues that exposing the variant path would create.

    Read the full bite: Implement A/B testing with Middleware rewrites and cookies

24. Question 24 of 30

    A teammate prefixes the Postgres DATABASE_URL with NEXT_PUBLIC_ so a client component can query it directly. What is the most important problem with this approach?

    • aThe value stays hidden because it is rendered on the server and never sent to the client
    • bThe database credentials become embedded in the client JavaScript bundle visible to every user
    • cThe prefix is only a naming convention and does not change how the variable is bundled
    • dVercel encrypts the value in the browser bundle, keeping the credentials safe from users
    Show the answer

    Answer: b · The database credentials become embedded in the client JavaScript bundle visible to every user

    NEXT_PUBLIC_ tells Next.js to inline the literal value into the client bundle at build time, so the credentials are visible in the page source to every user. This is not prevented by server-side rendering, because the string is still shipped to the browser for hydration.

    Read the full bite: How do you manage Next.js env variables on Vercel and use NEXT_PUBLIC_?

25. Question 25 of 30

    When fetching private user data in Next.js Pages Router, why is getServerSideProps the correct choice?

    • aIt moves the data fetch to the browser so the server never handles sensitive tokens directly.
    • bIt executes on each request with access to the incoming request and user authentication cookies.
    • cIt supports incremental static regeneration to refresh private data without a full redeploy.
    • dIt pre-renders static HTML and JSON at build time that can be cached globally for fast loads.
    Show the answer

    Answer: b · It executes on each request with access to the incoming request and user authentication cookies.

    getServerSideProps runs per request and can read session cookies, ensuring private data is user-specific and never baked into shared static files. Incremental static regeneration is a tempting distractor because it still produces shared static output that any visitor could receive from the CDN.

    Read the full bite: Would you use getServerSideProps or getStaticProps for private user data?

26. Question 26 of 30

    Why is storing session state in a module-level variable unreliable in a Next.js app?

    • aModule variables are encrypted and cannot be read back later
    • bNext.js forbids variables outside React components
    • cServerless and edge functions are stateless and may run on many short-lived instances
    • dMiddleware overwrites all module-level state on each request
    Show the answer

    Answer: c · Serverless and edge functions are stateless and may run on many short-lived instances

    Each function invocation can hit a fresh, short-lived instance, so in-process memory is not shared or persistent. Session state must live in a cookie or external store, not a module variable.

    Read the full bite: Session auth in Next.js with API routes and middleware

27. Question 27 of 30

    You need to show a personalized 'like' button on a statically generated blog post. Which approach best follows Next.js static generation patterns?

    • aAccess the request headers and cookies directly inside getStaticProps to personalize the initial HTML
    • bSwitch the entire page to getServerSideProps so the server can render the correct state on every request
    • cRender a static shell with getStaticProps, then fetch the user's like status client-side after hydration
    • dPass the user ID as a query parameter to getStaticProps to generate a personalized static page at build time
    Show the answer

    Answer: c · Render a static shell with getStaticProps, then fetch the user's like status client-side after hydration

    getStaticProps runs exclusively at build time and has no access to the incoming request, cookies, or session, so user-specific state must be hydrated client-side after mount. Attempting to read cookies inside getStaticProps is impossible, while falling back to getServerSideProps for the entire page sacrifices the performance benefits of static generation.

    Read the full bite: How do you handle user-specific content on a getStaticProps page?

28. Question 28 of 30

    A Next.js app needs fast JWT route guards and live database session validation. Which split best fits platform constraints?

    • aRun all auth logic in Edge Middleware because most Node.js auth libraries are compatible with the Edge Runtime's Web APIs
    • bRun both JWT validation and database queries in Edge Middleware to minimize origin-region latency
    • cUse Edge Middleware for JWT route guards and getServerSideProps for live database session validation
    • dAvoid getServerSideProps entirely because its cold starts make it unsuitable for any authentication logic
    Show the answer

    Answer: c · Use Edge Middleware for JWT route guards and getServerSideProps for live database session validation

    Edge Middleware is ideal for lightweight JWT checks and rewrites before caching, but it lacks the Node.js net and tls modules that most database drivers require, so heavy session hydration belongs in getServerSideProps. Option B is tempting because Edge cold starts are extremely fast, yet it is wrong because Middleware cannot directly query Postgres or run standard Node.js ORM logic.

    Read the full bite: How can you use Edge Middleware for auth and trade-offs versus getServerSideProps?

29. Question 29 of 30

    Which statement accurately describes how CORS is managed in Next.js API Routes?

    • aCORS is primarily handled by the client-side application, not the API route.
    • bCORS is configured globally in a Next.js project for all API routes.
    • cCORS headers must be manually set on the response object for each specific API Route Handler.
    • dNext.js automatically adds CORS headers for all cross-origin requests.
    Show the answer

    Answer: c · CORS headers must be manually set on the response object for each specific API Route Handler.

    The card explicitly states that "CORS isn't a global config; it's a per-route response header" and that developers "must manually set headers... in your Route Handlers," making option C correct. Options A and C are incorrect because CORS requires explicit, per-route configuration, not global or automatic handling. Option A is wrong as CORS is a server-side mechanism to relax browser security policies.

    Read the full bite: Handling CORS in Next.js API Routes

30. Question 30 of 30

    What critical attribute pair must be provided to the next/image component to prevent Cumulative Layout Shift (CLS)?

    • aThe width and height attributes
    • bThe src attribute pointing to the image file
    • cThe alt attribute for screen readers
    • dThe priority attribute for above-the-fold images
    Show the answer

    Answer: a · The width and height attributes

    The card explicitly states that next/image requires 'width and height attributes to prevent Cumulative Layout Shift (CLS) by reserving the correct space'. While other attributes are important, they do not directly address CLS prevention.

    Read the full bite: Next.js `next/image`: Stop Shipping Giant Images