Top 30 Advanced React & Next.js Concepts Quiz

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

   In a React component, for which scenario would using a ref be the most appropriate choice over state?

   • aHolding an interval ID returned by setInterval that needs to be cleared later.
   • bStoring a user's input that directly updates a displayed text field.
   • cStoring a list of items that are rendered dynamically on the screen.
   • dManaging a boolean flag that toggles the visibility of an element.
   Show the answer

   Answer: a · Holding an interval ID returned by setInterval that needs to be cleared later.

   Refs are ideal for storing mutable values that persist across renders without triggering UI updates, such as an interval ID that is never displayed. Options A, C, and D all involve data that directly affects the UI, requiring state to ensure re-renders when the values change.

   Read the full bite: React Refs: Memory Without Re-renders

2. Question 2 of 30

   When creating a WelcomeDialog component that uses a generic Dialog component to display a fixed title and message, which approach best exemplifies React's "favor composition" principle?

   • aA Higher-Order Component (HOC) wraps Dialog to inject the fixed title and message props for WelcomeDialog.
   • bWelcomeDialog renders the Dialog component internally, passing it specific title and message props.
   • cWelcomeDialog extends the Dialog class component and overrides its default title and message properties.
   • dWelcomeDialog uses React's Context API to provide the fixed title and message to the Dialog component.
   Show the answer

   Answer: b · WelcomeDialog renders the Dialog component internally, passing it specific title and message props.

   The card states that for specialization, a more specific component simply renders a more generic one and configures it with props, as exemplified by WelcomeDialog rendering Dialog. Option C uses class inheritance, which the card explicitly advises against for UI component hierarchies.

   Read the full bite: React's Rule: Favor Composition Over Inheritance

3. Question 3 of 30

   When a useEffect with an empty dependency array sets up a setInterval that needs to log the latest component state, what is the primary benefit of using useEffectEvent?

   • aIt allows the setInterval to run only once, preventing unnecessary re-creations on state changes.
   • bIt ensures the setInterval callback always receives the initial state captured at mount time.
   • cIt automatically adds the setInterval callback to the useEffect's dependency array, resolving linter warnings.
   • dIt enables the setInterval's callback to access the most current state without forcing the useEffect to re-execute.
   Show the answer

   Answer: d · It enables the setInterval's callback to access the most current state without forcing the useEffect to re-execute.

   useEffectEvent provides a stable function that, when called, always accesses the latest props and state from the component's current render, even if the useEffect it's called from has an empty dependency array and thus doesn't re-run. This directly solves the stale closure problem. Option B describes the stale closure problem itself, not the benefit of the solution. Option A describes the behavior of an empty dependency array, not the specific benefit of useEffectEvent. Option C is incorrect as useEffectEvent is used to avoid adding functions to the dependency array.

   Read the full bite: React's Stale Closure Problem in Hooks

4. Question 4 of 30

   When is useLayoutEffect the most appropriate choice over useEffect?

   • aTo perform data fetching operations immediately after a component renders.
   • bTo optimize performance for non-visual updates by ensuring they run synchronously.
   • cTo execute code that must run after the browser has finished painting the screen.
   • dTo measure a DOM element's dimensions and update its position before the user sees any intermediate layout.
   Show the answer

   Answer: d · To measure a DOM element's dimensions and update its position before the user sees any intermediate layout.

   useLayoutEffect is specifically designed for scenarios where you need to read DOM layout and make synchronous updates to prevent visual flickers before the browser paints. Option D directly describes this primary use case. Option C describes useEffect, which runs asynchronously after the browser has painted.

   Read the full bite: useLayoutEffect: Synchronous Effects Before Browser Paint

5. Question 5 of 30

   Which scenario best illustrates the primary purpose of useImperativeHandle?

   • aA child component needs to receive and process all props passed down from its parent in a declarative manner.
   • bA parent component needs to directly access and modify the child's internal state variables.
   • cA parent component needs to call a specific method on a child, like focus() or reset(), without exposing the child's entire DOM node.
   • dA child component needs to trigger a re-render of its parent when its internal data changes.
   Show the answer

   Answer: c · A parent component needs to call a specific method on a child, like focus() or reset(), without exposing the child's entire DOM node.

   Option C is correct because useImperativeHandle allows a child to expose a limited, intentional API (like specific methods) to a parent via a ref, preventing the parent from accessing the child's full internal DOM or state. Option B describes an anti-pattern that useImperativeHandle is designed to prevent, as it breaks encapsulation and top-down data flow.

   Read the full bite: useImperativeHandle: Expose a Custom Ref API

6. Question 6 of 30

   How does useTransition primarily ensure a responsive UI when handling a slow state update?

   • aBy executing the expensive update in a background thread, separate from the main UI thread.
   • bBy automatically memoizing all components affected by the state change to prevent unnecessary re-renders.
   • cBy pausing all other state updates until the slow transition has fully completed its rendering.
   • dBy allowing urgent user interactions to render immediately while the slow update proceeds in a lower-priority lane.
   Show the answer

   Answer: d · By allowing urgent user interactions to render immediately while the slow update proceeds in a lower-priority lane.

   useTransition creates two rendering lanes: an urgent lane for immediate feedback and a non-urgent 'transition' lane for slower updates, allowing the UI to remain interactive. Option A is incorrect because useTransition manages priority on the main thread, it does not move work to a separate background thread.

   Read the full bite: useTransition: Keep Your UI Responsive During State Changes

7. Question 7 of 30

   Which best describes how useDeferredValue maintains UI responsiveness during an expensive update?

   • aIt postpones the state update until the user interaction ceases, similar to debouncing.
   • bIt prevents the component from re-rendering until all background computations are fully completed.
   • cIt caches the expensive computation results to display them instantly on subsequent renders.
   • dIt first renders with the previous deferred value at high priority, then with the new value at low priority.
   Show the answer

   Answer: d · It first renders with the previous deferred value at high priority, then with the new value at low priority.

   Option D correctly describes the mechanism: React performs an immediate, high-priority render with the old deferred value to keep the UI snappy, then schedules a low-priority, interruptible render with the new value. Option A describes debouncing, which the card explicitly states useDeferredValue is not a replacement for.

   Read the full bite: useDeferredValue: Keep UI Responsive During Renders

8. Question 8 of 30

   What critical characteristic must the getSnapshot function in useSyncExternalStore possess to ensure correct behavior and prevent issues like tearing?

   • aIt must directly invoke a re-render of the component when the external data changes.
   • bIt must execute a deep equality check on the external store's current data.
   • cIt must return a new object reference whenever the external state is modified.
   • dIt must return an immutable, cached value for React's comparison.
   Show the answer

   Answer: d · It must return an immutable, cached value for React's comparison.

   The card states that "your getSnapshot function must return an immutable, cached value." This is crucial because React uses Object.is to compare the returned value, and a stable, cached reference allows React to efficiently determine if a re-render is truly necessary. Option C is incorrect because returning a new reference unnecessarily would cause React to re-render even if the underlying data hasn't logically changed, defeating the purpose of the comparison.

   Read the full bite: useSyncExternalStore: Safely Read from External State

9. Question 9 of 30

   For which primary purpose is useDebugValue most effectively utilized in a custom React hook?

   • aTo enhance the performance of state updates within complex custom hooks.
   • bTo replace traditional console.log statements for debugging all custom hook logic.
   • cTo automatically format and display the raw state of every custom hook in the DevTools for easier inspection.
   • dTo display a meaningful, human-readable label for the hook's state in React DevTools, especially for complex shared library hooks.
   Show the answer

   Answer: d · To display a meaningful, human-readable label for the hook's state in React DevTools, especially for complex shared library hooks.

   useDebugValue's core purpose is to provide a custom, more meaningful representation of a hook's state in React DevTools, aiding debugging for complex or shared library hooks. It does not affect application logic or runtime performance; its optional formatting function only optimizes DevTools display performance.

   Read the full bite: useDebugValue: Label Your Custom Hooks in DevTools

10. Question 10 of 30

    Which scenario presents a fundamental limitation for implementing React Theming with Context API and CSS-in-JS?

    • aAvoiding prop-drilling of style-related properties through deeply nested components.
    • bApplying simple, one-off style adjustments to individual components.
    • cManaging a complex design system that requires multiple distinct brand skins.
    • dDeveloping components for an application utilizing React Server Components (RSC).
    Show the answer

    Answer: d · Developing components for an application utilizing React Server Components (RSC).

    The card explicitly states that this pattern's primary limitation is its reliance on client-side React Context, causing it to fail in React Server Components (RSC). While simple style overrides (Option B) are a case where the pattern is overkill, it's not a fundamental limitation of its mechanism, and options C and D describe core use cases or benefits.

    Read the full bite: React Theming: Context API and CSS-in-JS

11. Question 11 of 30

    Which mechanism is primarily responsible for Server-Side Rendering (SSR) for styles preventing the 'flash of unstyled content' (FOUC)?

    • aBy caching all dynamically generated styles on the client-side for subsequent page loads.
    • bBy pre-compiling all CSS-in-JS into a separate, optimized stylesheet that loads asynchronously.
    • cBy ensuring that JavaScript executes and applies styles before the HTML content is rendered on the client.
    • dBy embedding all necessary CSS-in-JS rules directly into a <style> tag within the initial HTML document's <head>.
    Show the answer

    Answer: d · By embedding all necessary CSS-in-JS rules directly into a <style> tag within the initial HTML document's <head>.

    The correct answer is D because SSR for styles works by collecting all CSS-in-JS rules on the server and injecting them directly into the initial HTML's <head> tag. This ensures the browser receives a fully styled page immediately, avoiding the delay where HTML loads before client-side JavaScript can apply styles, which is the cause of FOUC.

    Read the full bite: SSR for Styles: Avoiding the 'Flash'

12. Question 12 of 30

    A SaaS team is building a revenue dashboard in Next.js App Router. They need to ensure unauthenticated users never receive sensitive HTML or data, while avoiding unnecessary edge latency. Which approach aligns with best practices?

    • aCheck localStorage for a token in the root layout and conditionally render the dashboard on the client.
    • bHide the dashboard link in the navigation and redirect unauthenticated users with a client-side useEffect hook.
    • cUse lightweight middleware to catch requests without a session cookie, then validate the token in a server component before fetching data.
    • dValidate the session in edge middleware with a heavy database lookup on every /dashboard request, and render a fallback UI on the client.
    Show the answer

    Answer: c · Use lightweight middleware to catch requests without a session cookie, then validate the token in a server component before fetching data.

    The card emphasizes that the server must gate HTML and data before it ships, and specifically warns against heavy database lookups in edge middleware due to cold-start latency. Option C matches the canonical pattern where lightweight middleware intercepts direct requests and the server component validates the session before any sensitive payload is rendered.

    Read the full bite: Protected Routes: Server Gates, Not Hidden Links

13. Question 13 of 30

    What is the primary purpose of useActionState (formerly useFormState)?

    • aTo manage complex synchronous state transitions involving multiple sub-actions.
    • bTo provide optimistic UI updates before an asynchronous server response.
    • cTo store simple, local, synchronous component state.
    • dTo handle UI state (loading, errors, success) for asynchronous form submissions.
    Show the answer

    Answer: d · To handle UI state (loading, errors, success) for asynchronous form submissions.

    useActionState is specifically designed to manage UI feedback like loading states and validation messages for asynchronous form submissions, especially with Server Actions. Options A and D describe use cases for useReducer and useState, respectively, while option B describes useOptimistic.

    Read the full bite: useFormState (now useActionState): State for Actions

14. Question 14 of 30

    A developer wants to use useFormStatus to disable a submit button. In which scenario would the hook not provide the expected form submission status?

    • aThe button component is a child of a div element that is a sibling to the <form> element.
    • bThe component calling useFormStatus is the same component that renders the <form> element.
    • cThe button component is nested inside a custom FormControls component, which is then placed inside the <form>.
    • dThe button component is a direct child of the <form> element.
    Show the answer

    Answer: b · The component calling useFormStatus is the same component that renders the <form> element.

    The card explicitly states, "Do not call this hook in the same component that renders the <form> tag." It is designed to be used in a child component and only looks upwards in the component tree for a parent form. While a sibling component (Option A) would also fail, the restriction on the component *rendering* the form is specifically highlighted as a 'when not to use it' condition.

    Read the full bite: React's useFormStatus: Read Form State from a Child Component

15. Question 15 of 30

    Which scenario most appropriately utilizes a React Ref?

    • aProgrammatically focusing an input field after a user clicks a button.
    • bUpdating the text content of a paragraph element based on user input.
    • cStoring a value that, when changed, should trigger a component re-render.
    • dManaging the visibility of a UI element by toggling a CSS display property.
    Show the answer

    Answer: a · Programmatically focusing an input field after a user clicks a button.

    Refs are an escape hatch for imperative DOM actions like programmatically focusing an input, which do not have a declarative equivalent in React. Options A and B describe declarative UI updates best handled with state, while option C is incorrect because refs do not trigger component re-renders.

    Read the full bite: React Refs: An Escape Hatch for DOM Manipulation

16. Question 16 of 30

    What is the most critical reason a React <Profiler> component's onRender callback might not execute when deployed in a production environment?

    • aThe onRender callback is asynchronous, and the React scheduler prioritizes rendering over callback execution.
    • bThe baseDuration is significantly higher than actualDuration, indicating efficient memoization that bypasses the onRender call.
    • cThe component wrapped by <Profiler> has not mounted or updated since the application loaded.
    • dThe application is deployed with a standard production build, which disables the <Profiler> component by default.
    Show the answer

    Answer: d · The application is deployed with a standard production build, which disables the <Profiler> component by default.

    The card explicitly states that <Profiler> is disabled in standard production builds by default, and its onRender callback will not be called unless a special profiling production build is enabled. Option C describes a general condition for the callback not firing, not a production-specific failure of the profiler itself.

    Read the full bite: Measure Component Render Costs with <Profiler>

17. Question 17 of 30

    In an ISR-enabled Next.js application, what is the immediate user experience when accessing a page whose cached content has expired?

    • aThe user is served the stale, cached page while a new version is generated in the background.
    • bThe user is redirected to a live server-rendered page to ensure real-time data.
    • cThe user waits for the page to regenerate and then receives the updated content.
    • dThe server initiates a full site rebuild to update the content for all subsequent requests.
    Show the answer

    Answer: a · The user is served the stale, cached page while a new version is generated in the background.

    The card states that if a page is past its 'best before' date, the user still sees the old content instantly, but their visit triggers a background process to create a new version. This 'stale-while-revalidate' approach means the user doesn't wait, making option C incorrect.

    Read the full bite: ISR: Static Speed with Dynamic Freshness

18. Question 18 of 30

    What is the primary benefit of normalizing your application state, especially for relational data from APIs?

    • aIt simplifies updating individual data items and minimizes unnecessary UI re-renders.
    • bIt allows for direct embedding of related objects, ensuring all data is available in one place.
    • cIt reduces the total memory consumption of the state by eliminating nested objects.
    • dIt automatically handles data fetching and caching mechanisms for API responses.
    Show the answer

    Answer: a · It simplifies updating individual data items and minimizes unnecessary UI re-renders.

    Normalization simplifies updates and prevents unnecessary re-renders by flattening data and using IDs for references, making each item a single source of truth. Option B describes the problem normalization solves, as it avoids embedding full objects in favor of ID references.

    Read the full bite: State Normalization: Treat Your Store Like a Database

19. Question 19 of 30

    When implementing SSR state hydration, which scenario represents a significant "footgun" or common pitfall?

    • aA global, singleton state store on the server leaks user-specific data between concurrent requests.
    • bThe server-rendered HTML contains stale data because the state was not properly updated.
    • cThe client's JavaScript bundle is too large, delaying interactivity after hydration.
    • dThe client attempts to hydrate with a different state management library than the server used.
    Show the answer

    Answer: a · A global, singleton state store on the server leaks user-specific data between concurrent requests.

    The card explicitly states, "The biggest footgun is defining a global, singleton store on the server; it will be shared across concurrent user requests, leaking private data." This highlights the critical need for isolated state stores per request to prevent data contamination. The other options describe general SSR or client-side issues, but not the specific state management pitfall of data leakage due to a shared server store.

    Read the full bite: SSR State Hydration: Syncing Server and Client State

20. Question 20 of 30

    Which scenario would be an inappropriate use case for RTK Query, according to its design principles?

    • aManaging the loading and error states for data retrieved from a backend server.
    • bAutomatically refetching data when a component mounts or a mutation completes.
    • cFetching and caching a list of blog posts from a REST API.
    • dStoring the current user's selected language preference for the UI.
    Show the answer

    Answer: d · Storing the current user's selected language preference for the UI.

    RTK Query is designed for managing asynchronous server state, not global client-side UI state. Storing a user's selected language preference is an example of client-side UI state, for which a regular Redux slice created with createSlice is the appropriate tool. The other options describe core functionalities and appropriate use cases for RTK Query, such as fetching, caching, and automatic refetching of server data.

    Read the full bite: RTK Query: Your Redux Data Fetching Layer

21. Question 21 of 30

    In a browser environment, how does Mock Service Worker (MSW) enable mocking without altering the application's API calls?

    • aIt registers a Service Worker to intercept network requests before they leave the browser.
    • bIt modifies the application's build process to inject mock data directly into API client libraries.
    • cIt sets up a local proxy server that reroutes API requests to mock endpoints.
    • dIt replaces the browser's native fetch and XMLHttpRequest with custom mock implementations.
    Show the answer

    Answer: a · It registers a Service Worker to intercept network requests before they leave the browser.

    The card states that in the browser, MSW registers a Service Worker script that listens for fetch events at the network level, allowing the app to make real requests. Option D describes a traditional mocking approach that MSW aims to avoid, as it doesn't directly patch global objects but intercepts at a lower network layer.

    Read the full bite: MSW: Mock APIs at the Network Layer

22. Question 22 of 30

    Which scenario best illustrates a potential pitfall of over-relying on cy.intercept for all network interactions in Cypress tests?

    • aIt becomes impossible to test dynamic request modifications or error handling scenarios effectively.
    • bTest execution becomes significantly slower due to the overhead of intercepting every request.
    • cThe application's UI might not accurately reflect real-world network latency or server response times.
    • dTests could pass even if the frontend and backend APIs have diverged, masking real integration issues.
    Show the answer

    Answer: d · Tests could pass even if the frontend and backend APIs have diverged, masking real integration issues.

    The card explicitly states that "Over-stubbing can create tests that pass even when the real application is broken because the frontend and backend have drifted apart," highlighting the risk of masking integration issues. While cy.intercept can simulate latency, its primary pitfall when overused is losing true end-to-end contract verification.

    Read the full bite: cy.intercept: Control Network Traffic in Cypress Tests

23. Question 23 of 30

    Which statement accurately describes how act is exposed and documented in React Testing Library?

    • aIt is re-exported from DOM Testing Library but must be imported separately because React Testing Library does not include it in its main export list.
    • bIt is a React-specific wrapper fully documented with usage examples in the React Testing Library guide, positioned after cleanup and before renderHook.
    • cIt is a top-level named export grouped with render and renderHook, but its detailed behavioral documentation lives outside the React Testing Library render guide.
    • dIt is returned as a property on the render result object, alongside queries and unmount, because it operates on the mounted component instance.
    Show the answer

    Answer: c · It is a top-level named export grouped with render and renderHook, but its detailed behavioral documentation lives outside the React Testing Library render guide.

    React Testing Library surfaces act as a module-level peer to render and renderHook, not as a render result property, and the package lists it as an export without detailing its signature or behavior. The distractor suggesting it lives on the render result object is wrong because the card explicitly states act is imported directly and is not nested under render results or options.

    Read the full bite: The act Utility in React Testing Library

24. Question 24 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

25. Question 25 of 30

    What is the primary role of a default.js file within a Next.js Parallel Route slot?

    • aTo display a loading indicator while the slot's content is being fetched
    • bTo define a shared layout that applies to all pages within that parallel route
    • cTo handle unhandled exceptions or errors occurring within that specific slot
    • dTo render content when the slot's specific route segment is not explicitly matched
    Show the answer

    Answer: d · To render content when the slot's specific route segment is not explicitly matched

    The default.js file provides a fallback UI for a Parallel Route slot when its specific route is not matched, preventing a 404. Error handling is managed by error.js, and loading states by loading.js.

    Read the full bite: Next.js Parallel Routes: Multiple Pages in One View

26. Question 26 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

27. Question 27 of 30

    For an e-commerce application with product pages and a complex checkout process, how does Next.js Route Segment Config best optimize performance?

    • aIt allows setting a global 'edge' runtime in next.config.js for all pages, ensuring maximum speed.
    • bIt enables configuring product pages to run on the 'edge' and the checkout process on 'nodejs' with a longer maxDuration.
    • cIt automatically applies the most efficient runtime ('edge' or 'nodejs') to each route based on its detected complexity.
    • dIt ensures that all child routes automatically inherit the runtime and maxDuration settings from their parent segment.
    Show the answer

    Answer: b · It enables configuring product pages to run on the 'edge' and the checkout process on 'nodejs' with a longer maxDuration.

    Route Segment Config is designed for mixed requirements, allowing specific routes like product pages to use the 'edge' runtime for speed, while complex processes like checkout can use 'nodejs' with an extended maxDuration. The card explicitly states that settings do not cascade to child routes, making option D incorrect.

    Read the full bite: Next.js Route Segment Config

28. Question 28 of 30

    Which approach best describes how Partial Prerendering (PPR) enhances user experience for pages combining static and dynamic elements?

    • aIt sends a static HTML shell instantly, then streams server-rendered dynamic content into designated client-side placeholders.
    • bIt generates a fully static HTML page at build time, pre-filling all dynamic sections with placeholder data.
    • cIt loads a minimal static page, then fetches and renders all dynamic content exclusively using client-side JavaScript.
    • dIt renders the entire page on the server and waits for all data, static and dynamic, before sending any HTML.
    Show the answer

    Answer: a · It sends a static HTML shell instantly, then streams server-rendered dynamic content into designated client-side placeholders.

    PPR's key mechanism is to immediately deliver a static HTML shell, providing an instant first meaningful paint. Subsequently, dynamic components are rendered on the server and their HTML is streamed to the client to fill in placeholders, which is distinct from traditional SSR (option D) that waits for all data, or purely client-side rendering (option C).

    Read the full bite: Partial Prerendering (PPR): Static Speed for Dynamic Pages

29. Question 29 of 30

    For a Next.js API route that generates a complex report requiring file system access and CPU-intensive processing, which runtime is most appropriate?

    • aEither runtime, depending on whether the report generation is synchronous or asynchronous.
    • bThe Edge runtime, because it prioritizes speed and low latency for all server-side logic.
    • cThe Node.js runtime, as it supports a full API set and handles CPU-intensive operations.
    • dA separate microservice, as Next.js runtimes are not designed for such complex tasks.
    Show the answer

    Answer: c · The Node.js runtime, as it supports a full API set and handles CPU-intensive operations.

    The Node.js runtime is necessary for tasks involving CPU-intensive processing and access to native Node.js APIs like 'fs' for file system operations, which are not supported by the Edge runtime's limited environment. The Edge runtime is optimized for speed in simple, low-latency tasks.

    Read the full bite: Next.js Runtimes: Edge vs. Node.js

30. Question 30 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