Top 30 Next.js 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

   How does Turbopack's Server Fast Refresh in Next.js 16.2 differ from the previous server-side reload behavior?

   • aIt clears require.cache for changed files while preserving untouched node_modules, cutting overhead by about two-thirds.
   • bIt applies tree-shaking to dynamic imports during reload so that only used exports are invalidated instead of the full module graph.
   • cIt reloads only the changed module and leaves the rest of the server process intact, rather than clearing the require.cache for the entire import chain.
   • dIt moves server compilation into Web Workers with corrected origins to isolate changes from the main Node.js process.
   Show the answer

   Answer: c · It reloads only the changed module and leaves the rest of the server process intact, rather than clearing the require.cache for the entire import chain.

   Turbopack now surgically reloads only the changed module while leaving the server process intact, replacing the old behavior of clearing require.cache for the changed file and its entire import chain. Option A is tempting because it mentions require.cache and node_modules, but the old system actually cleared untouched node_modules in the import chain, and the new approach avoids chain-wide cache clearing entirely.

   Read the full bite: Next.js 16.2 brings 67-100% faster server Fast Refresh

2. Question 2 of 30

   A long-running agent job fails on step five after several expensive model calls. How does Vercel Workflow SDK handle the retry?

   • aIt resumes from the last successful checkpoint before the failure, avoiding redundant calls.
   • bIt pauses indefinitely until a developer manually approves the retry.
   • cIt restarts the entire job from step one and re-runs every previous model call.
   • dIt skips the failed step and proceeds to the next step.
   Show the answer

   Answer: a · It resumes from the last successful checkpoint before the failure, avoiding redundant calls.

   Workflow SDK checkpoints every step and persists state, so retries resume from the last good step instead of restarting from zero. Option C describes standard retry behavior without durable execution, while option B conflates automatic retries with the SDK's optional human-in-the-loop pauses.

   Read the full bite: Vercel ships AI Gateway, Workflow SDK, and Sandbox for agents

3. Question 3 of 30

   What happens when an AI agent tries to launch a second next dev process in Next.js 16.2?

   • aThe new process automatically terminates the existing dev server and claims the port
   • bNext.js emits a structured error that includes the exact kill command for the running process
   • cThe agent is directed to consult the AGENTS.md file before proceeding
   • dBrowser errors are streamed to the terminal to warn the agent about the conflict
   Show the answer

   Answer: b · Next.js emits a structured error that includes the exact kill command for the running process

   The dev server lock file at .next/dev/lock stores the PID, port, and URL, enabling Next.js to return a structured error with the precise kill command rather than a generic port-in-use message. Option A is tempting because some dev tools auto-restart, but Next.js 16.2 explicitly returns an error instead, and Option D confuses the lock file feature with the separate browser-to-terminal logging feature.

   Read the full bite: Next.js 16.2 adds agent-native dev tooling

4. Question 4 of 30

   When a React Server Component fetches data required by deeply nested Client Components, which pattern correctly respects the server-client boundary?

   • aFetch the data inside each Client Component using useEffect and hoist the results into a shared global store
   • bPass the fetched data as serializable props to the Client Components or to a Client wrapper that distributes them
   • cCreate a React Context in the Server Component and consume it within the nested Client Components to avoid prop drilling
   • dEncode the fetched data into URL query parameters so Client Components can read it via useSearchParams
   Show the answer

   Answer: b · Pass the fetched data as serializable props to the Client Components or to a Client wrapper that distributes them

   Server Components must communicate with Client Components through serializable props because props are the only channel across the RSC boundary. Creating Context in a Server Component is incorrect because Context cannot be created in a Server Component and consumed by a Client Component.

   Read the full bite: Pass server-fetched data from Server Components to nested Client Components

5. Question 5 of 30

   In a Next.js App Router project, where should you import a global CSS file so it applies to every route without causing build errors?

   • aWithin a shared component used across all pages
   • bInside each route's page.js file
   • cAt the top of the root app/layout.js file
   • dThrough a link tag in a custom Document component
   Show the answer

   Answer: c · At the top of the root app/layout.js file

   Next.js restricts global CSS imports to root-level files in the App Router, so the root layout.js is the correct singleton entry point. Importing inside page.js or components is explicitly blocked to prevent cascade duplication, and a custom Document component is the Pages Router convention, not the App Router idiomatic solution.

   Read the full bite: Where and how to import global stylesheets in Next.js

6. Question 6 of 30

   For which scenario would a developer choose a template.js file instead of a layout.js file in Next.js?

   • aTo define a persistent navigation bar that retains its state across different routes.
   • bTo embed global HTML structure like <html> and <body> tags for the entire application.
   • cTo create a shared UI shell, such as a sidebar, that wraps multiple child pages.
   • dTo ensure a component re-renders and resets its internal state upon every page navigation.
   Show the answer

   Answer: d · To ensure a component re-renders and resets its internal state upon every page navigation.

   The card states that a template.js file should be used when a component needs to re-render and reset its state on every navigation, for example, to trigger a useEffect hook or an enter animation. Layouts, in contrast, are designed to persist state and avoid re-rendering across navigations, making options A, C, and D incorrect as they describe typical layout use cases.

   Read the full bite: Next.js Layouts: Shared UI That Survives Navigation

7. Question 7 of 30

   What is the main advantage of using CSS Modules for component-specific styling in a Next.js application?

   • aIt ensures that styles defined for one component do not unintentionally affect other components.
   • bIt significantly reduces the total CSS file size by only including necessary styles at runtime.
   • cIt enables the use of global utility classes like those from Tailwind CSS within any component.
   • dIt allows styles to be dynamically changed based on component state or props.
   Show the answer

   Answer: a · It ensures that styles defined for one component do not unintentionally affect other components.

   The card emphasizes that CSS Modules prevent global conflicts by scoping styles to individual components, ensuring encapsulation. Dynamic styling (Option D) is typically a feature of CSS-in-JS libraries, not the primary benefit of CSS Modules.

   Read the full bite: Global vs. Component CSS in React/Next.js

8. Question 8 of 30

   When using router.push with shallow: true on the same page in the Next.js Pages Router, which of the following occurs?

   • aThe URL changes without triggering a re-render of the React page component, keeping the current UI state intact.
   • bThe URL changes and the shallow option allows the same behavior when navigating to a different page or when using the App Router.
   • cThe URL changes and browser history updates, but getServerSideProps and getStaticProps do not re-run; the page component still re-renders.
   • dThe URL changes and the shallow option prevents execution of both server-side data methods and manual client-side fetches.
   Show the answer

   Answer: c · The URL changes and browser history updates, but getServerSideProps and getStaticProps do not re-run; the page component still re-renders.

   Shallow routing updates the URL and history without re-running getServerSideProps or getStaticProps, but it does not prevent the React page component from re-rendering. Option A is a common misconception because shallow routing only skips server data method execution, not React's render cycle.

   Read the full bite: Explain Shallow Routing in Next.js Pages Router

9. Question 9 of 30

   What is the essential initial step to enable Sass/SCSS compilation in a Next.js project?

   • aConfigure next.config.js with sassOptions to define Sass paths
   • bManually add a Sass loader to the project's webpack configuration
   • cChange the file extension of all existing CSS files to .scss
   • dInstall the sass npm package as a development dependency
   Show the answer

   Answer: d · Install the sass npm package as a development dependency

   The card explicitly states that you 'must install the sass package' as the first step, and Next.js then automatically handles compilation. Manual webpack configuration is not required, and sassOptions are for advanced configuration after Sass is enabled.

   Read the full bite: Integrating Sass/SCSS in Next.js

10. Question 10 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'

11. Question 11 of 30

    A developer needs to display thousands of product pages, each with a unique ID. How should they implement this in Next.js?

    • aCreate a separate page.js file for every single product ID.
    • bStore all product data in a single app/products/page.js and filter based on query parameters.
    • cUse a dynamic route like app/products/[productId]/page.js.
    • dImplement client-side routing to fetch product data based on the URL hash.
    Show the answer

    Answer: c · Use a dynamic route like app/products/[productId]/page.js.

    Dynamic routes are designed to solve the problem of creating many pages from a single template, making them ideal for collections like product pages. Manually creating a file for each product is unscalable and explicitly advised against in the card.

    Read the full bite: Next.js Dynamic Routes: Pages on Demand

12. Question 12 of 30

    You are building a Next.js newsletter form that must work without JavaScript and show server validation errors. Which pattern correctly wires the Server Action to the form?

    • aImport useFormStatus in the same component that renders the form to disable the submit button while pending
    • bPass the Server Action to useFormState, place the bound action on the form's action prop, and read validation errors from the returned state
    • cCall the Server Action inside the form's onSubmit handler and manage errors with local useState
    • dReturn a Response object from the Server Action and parse it manually in the client component
    Show the answer

    Answer: b · Pass the Server Action to useFormState, place the bound action on the form's action prop, and read validation errors from the returned state

    useFormState is designed for progressive enhancement by binding the returned action directly to the form's action attribute and surfacing server-returned state, whereas calling the action in onSubmit with useState breaks JavaScript-free submission and defeats the purpose of the hook.

    Read the full bite: How do you use a Server Action for form submission and useFormState?

13. Question 13 of 30

    Which scenario best illustrates the primary use case for Next.js's useRouter hook over the Link component?

    • aAutomatically redirecting a user to a dashboard page after their form submission is successfully processed by an API.
    • bDisplaying a list of navigation links in a header that users can click to visit different sections.
    • cImplementing a "Go Back" button that navigates to the previously viewed page in the browser history.
    • dCreating a button that, when clicked, takes the user to a specific external website.
    Show the answer

    Answer: a · Automatically redirecting a user to a dashboard page after their form submission is successfully processed by an API.

    The useRouter hook is designed for programmatic navigation, such as redirecting after an API call or form submission, where the application's logic dictates the route change. Option B describes a static link, which is the primary use case for the Link component. While useRouter can handle history navigation (Option C), its core distinction from Link is for event-driven, application-controlled redirects.

    Read the full bite: useRouter: Programmatic Navigation in Next.js

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

15. Question 15 of 30

    What mechanism allows Next.js to split routes into separate chunks without developers using React.lazy?

    • aThe bundler scans the app directory and splits at every component boundary it detects.
    • bThe file-system routing convention treats each page.js as an entry point, producing chunks at build time.
    • cNext.js automatically wraps each page component in React.lazy during the build process.
    • dThe router creates chunks by prefetching code in the background when links enter the viewport.
    Show the answer

    Answer: b · The file-system routing convention treats each page.js as an entry point, producing chunks at build time.

    Next.js uses its file-system routing convention to make each page.js a discrete bundler entry point, automatically emitting separate chunks at build time. It does not rely on React.lazy under the hood, and prefetching is only an optimization that loads chunks already created by the routing contract.

    Read the full bite: How does Next.js routing auto-implement code splitting?

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

17. Question 17 of 30

    When using a bundle analyzer to optimize web application performance, which metric is most critical to focus on for identifying load time issues?

    • aThe raw, uncompressed size of each module.
    • bThe parsed size, reflecting the code size after minification.
    • cThe gzipped size, representing the actual data transferred to the user.
    • dThe total number of dependencies included in the bundle.
    Show the answer

    Answer: c · The gzipped size, representing the actual data transferred to the user.

    The card explicitly states that the 'footgun' is to focus on gzipped size, not raw size. This is because gzipped size accurately reflects the amount of data transferred over the network, which directly impacts load times, unlike raw or parsed sizes.

    Read the full bite: Bundle Analysis: An X-Ray for Your App's Weight

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

19. Question 19 of 30

    In the proposed Next.js test pyramid, why are integration tests allocated to data fetching and route boundaries instead of expanding end-to-end coverage?

    • aThey run faster than unit tests and provide more precise failure signals than e2e tests
    • bThey validate framework wiring like middleware redirects without the speed and compute cost of a real browser
    • cServer Components cannot be unit tested, so integration tests serve as the base of the pyramid
    • dEnd-to-end tests lack sufficient confidence for business-critical flows like checkout and auth
    Show the answer

    Answer: b · They validate framework wiring like middleware redirects without the speed and compute cost of a real browser

    Integration tests target Next.js boundaries to catch framework wiring bugs without the cost of a real browser, while unit tests still dominate for speed. Option C is tempting but wrong because Server Components can be unit tested in a Node.js sandbox, so integration tests should not replace the pyramid base.

    Read the full bite: How do you balance unit, integration, and end-to-end tests in Next.js?

20. Question 20 of 30

    To create a publicly accessible /dashboard route in the Next.js App Router, which setup is required?

    • aA file named app/dashboard/page.js that exports a React component by default
    • bA file named app/dashboard/layout.js that exports a React component by default
    • cA file named app/dashboard/page.js that exports a React component as a named export
    • dA file named app/dashboard.js that exports a React component by default
    Show the answer

    Answer: a · A file named app/dashboard/page.js that exports a React component by default

    The App Router requires a page.js file with a default export inside the route segment to create an addressable page; layout.js only wraps children and does not create a route, while app/dashboard.js follows the Pages Router convention and will not work.

    Read the full bite: How do you create a /dashboard route in Next.js App Router?

21. Question 21 of 30

    In Next.js App Router, how does a sidebar in layout.js behave during sibling navigation compared to one imported in every page.js?

    • aThe layout.js sidebar stays mounted and keeps its state, but the shared header remounts and loses state.
    • bThey are functionally identical, and layout.js exists only as a DRY convenience for shared UI.
    • cBoth preserve state because React automatically reuses identical components across pages.
    • dThe layout.js sidebar runs once globally and never re-renders, unlike a header inside page.js.
    Show the answer

    Answer: a · The layout.js sidebar stays mounted and keeps its state, but the shared header remounts and loses state.

    layout.js remains mounted during sibling navigation, preserving local and DOM state, while a header imported into each page.js is destroyed and recreated on every route change. Option B is a common misconception because layout.js is a framework-level primitive with state guarantees, not merely a DRY pattern.

    Read the full bite: What is layout.js and how does it differ from shared headers?

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

23. Question 23 of 30

    In the Next.js App Router, how should a Client Component read a dynamic route parameter such as slug from a /blog/[slug] path?

    • aImport useParams from next/navigation and call it inside the component
    • bParse window.location.pathname to extract the slug segment manually
    • cDestructure slug from the params prop passed to the component
    • dImport useRouter from next/router and read router.query.slug
    Show the answer

    Answer: a · Import useParams from next/navigation and call it inside the component

    Client Components in the App Router must use the useParams hook from next/navigation because they do not receive params as direct props like Server Components do. Destructuring slug from props works only for Server Components, while useRouter from next/router is specific to the legacy Pages Router.

    Read the full bite: How do you create a /blog/[slug] route and access the slug value?

24. Question 24 of 30

    Which statement accurately describes how loading.js and error.js integrate with React primitives in the App Router?

    • aloading.js blocks navigation until the segment's async work resolves, and error.js catches runtime errors in both server and client components below it
    • bloading.js wraps its segment in a React Suspense boundary, and error.js adds a client-side Error Boundary for child segments
    • cloading.js provides instant feedback only during client-side navigation, and error.js catches rendering errors on the server during SSR
    • dThey eliminate the need for manual error handling in data fetching libraries and manual Suspense components inside page code
    Show the answer

    Answer: b · loading.js wraps its segment in a React Suspense boundary, and error.js adds a client-side Error Boundary for child segments

    loading.js is a convention that automatically wraps its segment in a React Suspense boundary to stream a fallback immediately during navigation, while error.js is explicitly a client-side Error Boundary. Distractor A is wrong because loading.js is not limited to client-side navigation, and error.js does not catch errors on the server during SSR.

    Read the full bite: How do loading.js and error.js integrate with Suspense and Error Boundaries?

25. Question 25 of 30

    Which file structure gives /about and /dashboard independent root layouts without extra URL segments in Next.js App Router?

    • aapp/(marketing)/about/page.tsx and app/(app)/dashboard/page.tsx, each group with its own layout.tsx
    • bapp/marketing/about/page.tsx and app/app/dashboard/page.tsx, each folder with its own layout.tsx
    • capp/[marketing]/about/page.tsx and app/[app]/dashboard/page.tsx, each segment with its own layout.tsx
    • dapp/about/page.tsx and app/dashboard/page.tsx, each with a local layout.tsx but sharing app/layout.tsx
    Show the answer

    Answer: a · app/(marketing)/about/page.tsx and app/(app)/dashboard/page.tsx, each group with its own layout.tsx

    Route Groups use parentheses to organize routes and can each define a root layout, while the group name is omitted from the URL. Option D is tempting but wrong because local layouts are nested and still inherit the single app root layout.

    Read the full bite: What are Next.js Route Groups and a practical use case?

26. Question 26 of 30

    Why does a sidebar accordion in app/dashboard/layout.js keep its open state when navigating between /dashboard/settings and /dashboard/profile?

    • aBecause route groups automatically isolate layout state from page transitions in the App Router
    • bBecause the root layout re-renders but passes down the previous dashboard layout state as props
    • cBecause the dashboard layout acts as a persistent shell that remains mounted during child segment changes
    • dBecause Next.js uses a dedicated state management API to preserve layout boundaries across navigations
    Show the answer

    Answer: c · Because the dashboard layout acts as a persistent shell that remains mounted during child segment changes

    The dashboard layout stays mounted as a persistent shell when only its child page segment changes, so standard React state survives naturally. The distractor about a dedicated Next.js state management API is wrong because persistence is simply standard React behavior, not a framework-specific API.

    Read the full bite: How do nested layouts work in the App Router?

27. Question 27 of 30

    When a user hard-refreshes a photo modal opened via an intercepting route inside a @modal parallel slot, which outcome does a robust implementation produce?

    • aThe modal overlay persists because the intercepting route continues to match the refreshed URL.
    • bThe full photo page renders because the intercept is bypassed and the slot falls back to its own page.js or default.js.
    • cThe slot renders empty unless middleware rewrites the request to the intercepted route.
    • dThe slot renders null because default.js returns null once the client-side intercept is lost.
    Show the answer

    Answer: b · The full photo page renders because the intercept is bypassed and the slot falls back to its own page.js or default.js.

    A hard refresh bypasses the intercept, so the parallel slot renders the full photo page via its own page.js or default.js. Distractor D misapplies the concrete example where default.js returns null for an inactive slot, not for a bypassed intercept.

    Read the full bite: What are Parallel and Intercepting Routes? Describe a photo gallery modal scenario.

28. Question 28 of 30

    You are building a Next.js App Router page that fetches product data from a database and includes an interactive 'Add to Cart' button. What is the recommended approach?

    • aKeep the page as a Server Component and import only the button as a Client Component
    • bKeep both the page and button as Server Components since they can render interactive HTML
    • cMark the entire page as a Client Component so the button can use onClick
    • dFetch the data inside a Client Component using useEffect and add the button there
    Show the answer

    Answer: a · Keep the page as a Server Component and import only the button as a Client Component

    The App Router defaults to Server Components for direct data access and minimal bundle size, while Client Components should be used granularly only where interactivity is needed. Option C is a common mistake that ships unnecessary JavaScript to the browser, and D incorrectly assumes Server Components can handle client-side interactions.

    Read the full bite: Key difference between Server and Client Components in Next.js?

29. Question 29 of 30

    How do you correctly fetch data for static generation in a Next.js App Router Server Component?

    • aExport an async component that calls native fetch directly in its body, producing prerendered static HTML.
    • bDefine getStaticProps in page.js to fetch data at build time and pass it as props to the page component.
    • cImport fetch from next/server and call it inside a synchronous component to retrieve data during the build.
    • dUse useEffect and useState inside the Server Component to fetch data after the page hydrates on the client.
    Show the answer

    Answer: a · Export an async component that calls native fetch directly in its body, producing prerendered static HTML.

    In the App Router, an async Server Component uses the built-in fetch API directly to fetch at build time for static routes. A incorrectly applies the Pages Router getStaticProps pattern, C wrongly uses client hooks that are forbidden in Server Components, and D is incorrect because fetch requires no import and the component must be async to use await.

    Read the full bite: How do you fetch data for SSG in a Next.js Server Component?

30. Question 30 of 30

    According to the Next.js documentation, what is the primary role of Cypress in testing Next.js applications?

    • aTo analyze and report on code coverage for the entire codebase.
    • bTo verify the correct functioning of API endpoints and server-side logic.
    • cTo simulate complete user workflows by interacting with the application in a browser.
    • dTo perform isolated unit tests on individual React components.
    Show the answer

    Answer: c · To simulate complete user workflows by interacting with the application in a browser.

    The card states Cypress acts as a "virtual user" that "automates a browser to click, type, and navigate through your application just like a real person would" for end-to-end testing. Option D describes unit testing, which is a different scope than Cypress's primary focus.

    Read the full bite: Cypress for End-to-End Testing in Next.js