Senior Next.js Interview Questions (50 MCQs)

Question 1

How do Suspense + streaming help UX?

Accepted Answer

Ready parts arrive early; slow parts show a fallback

Answer

Blocks the whole page forever

Answer

Only changes colors

Answer

Makes SEO impossible

Question 2

When are Route Handlers a good fit?

Accepted Answer

Webhooks, auth callbacks, proxies, raw HTTP

Answer

A mandatory replacement for all Server Components

Answer

Styling only

Answer

Saving files into `public` from the client with no server

Question 3

What is the idea of Partial Prerendering?

Accepted Answer

Static shell + streamed dynamic holes

Answer

Removing all static parts

Answer

CSR only

Answer

Disabling caching

Question 4

What do parallel routes (`@slot`) enable?

Accepted Answer

Rendering multiple independent pages in one layout (e.g. dashboards)

Answer

Parallel builds

Answer

Multiple domains per app

Answer

Rendering in a Web Worker

Question 5

What are intercepting routes (like `(.)photo`) usually for?

Accepted Answer

Showing a route as a modal on soft nav and full page on refresh

Answer

Blocking malicious requests

Answer

Permanent redirects

Answer

Analytics tracking

Question 6

Main trade-off of Edge runtime vs Node runtime?

Accepted Answer

Lower latency and fast cold starts, but limited APIs (no full Node)

Answer

Full filesystem access

Answer

Always slower than Node

Answer

Only for static files

Question 7

What does `export const revalidate = 60` on a page do?

Accepted Answer

The page is static and regenerates in the background at most every 60s (ISR)

Answer

The page reloads for the user every 60s

Answer

Caches for 60 days

Answer

Delays the build by 60s

Question 8

Two independent fetches in a Server Component: best approach?

Accepted Answer

Start them together with `Promise.all`

Answer

Sequentially with two `await`s

Answer

Move one to the client

Answer

Both in useEffect

Question 9

What does `import "server-only"` give you?

Accepted Answer

Build fails if the module is imported into a Client Component

Answer

Makes the module faster

Answer

Encrypts the code

Answer

Runs the module only on Edge

Question 10

The `/admin` page checks the user's role before rendering. Is the `deleteUser` Server Action defined there also safe?

Accepted Answer

No; a Server Action is a public POST endpoint and must check auth itself

Answer

Yes; the action can only be called from that page

Answer

Yes; Next.js copies the page's checks into the action

Answer

Yes; the action ID is secret and unguessable

Question 11

An inline Server Action closes over an `apiKey` variable from the parent component scope. What happens?

Accepted Answer

The closed-over value is encrypted and round-tripped via the client; avoid secrets in closures

Answer

The value never leaves the server, so there's no risk

Answer

It's put in the HTML as plain text with no protection at all

Answer

Next.js forbids closures and the build fails

Question 12

Why is it recommended that middleware not be your only auth layer?

Accepted Answer

If it's bypassed or the matcher is wrong, data is exposed; check close to the data too

Answer

Because middleware can't read cookies

Answer

Because middleware only runs in development

Answer

Because middleware can't return redirects

Question 13

What's the purpose of React's Taint APIs (like `experimental_taintObjectReference`) in Next.js?

Accepted Answer

Preventing a sensitive object or value from being accidentally passed to a Client Component

Answer

Encrypting the database at rest

Answer

Marking components for lazy loading

Answer

Automatically removing console.log in production

Question 14

What problem does a Data Access Layer with DTOs solve in the App Router?

Accepted Answer

Centralizes access checks and returns only safe fields so sensitive data doesn't leak to the client

Answer

Reduces build time by removing TypeScript

Answer

Fully replaces the database with a cache

Answer

Allows hooks in Server Components

Question 15

How does Next.js protect Server Actions against CSRF?

Accepted Answer

Only POST is allowed and `Origin` is compared with `Host`; `serverActions.allowedOrigins` covers proxies

Answer

Every action requires a CAPTCHA

Answer

Actions are only invoked over WebSockets

Answer

There's no protection; you always need a manual CSRF token

Question 16

Uploading a 5 MB file through a Server Action fails. Likely cause?

Accepted Answer

The default body size limit (about 1MB), configurable via `serverActions.bodySizeLimit`

Answer

Server Actions don't support `FormData`

Answer

Files can only be read in middleware

Answer

The max size is set by `images.deviceSizes`

Question 17

Why is using a Server Action to read data (e.g. a product list in a Client Component) discouraged?

Accepted Answer

They use POST, aren't cached, and the client dispatches them one at a time

Answer

Because Server Actions can't return values

Answer

Because Server Actions only work in the Pages Router

Answer

Because Server Actions always reload the whole page

Question 18

What status code does `redirect()` inside a Server Action produce, and why?

Accepted Answer

303 See Other, so the browser follows with a GET after the POST

Answer

301, because all redirects are permanent

Answer

404, because actions have no page

Answer

200 with the target page's HTML

Question 19

A developer stores the current user in a module-level `let currentUser` on the server. What's wrong?

Accepted Answer

Modules are shared across concurrent requests, leaking one user's data to another

Answer

Nothing; each request gets a fresh module

Answer

It only causes a minor slowdown

Answer

Next.js automatically makes module variables per-request

Question 20

What is the memoization scope of React's `cache` function in Next.js?

Accepted Answer

A single server request; not shared across requests or users

Answer

The entire server process lifetime

Answer

Persisted across deployments

Answer

The browser's `localStorage`

Question 21

What problem does the preload pattern (e.g. `preload(id)` calling `void getItem(id)`) solve?

Accepted Answer

Starts a request early before a blocking await to remove a waterfall; used with `cache()`

Answer

Preloading fonts in `<head>`

Answer

Loading images before hydration

Answer

Running code at build time instead of runtime

Question 22

After a new deployment, which Next.js server cache is cleared automatically?

Accepted Answer

The Full Route Cache (rendered HTML/RSC payload); the Data Cache can persist across deploys

Answer

The Data Cache, while the Full Route Cache persists

Answer

Neither; both persist forever

Answer

Only users' browser caches

Question 23

You self-host on 3 containers behind a load balancer, and after `revalidateTag` some users still see stale data. Why?

Accepted Answer

The default cache is per-instance on disk; configure a shared `cacheHandler` (e.g. Redis)

Answer

`revalidateTag` only works on Vercel

Answer

The load balancer caches responses forever

Answer

You must set `output: "export"`

Question 24

What does `output: "standalone"` in `next.config` give you for Docker?

Accepted Answer

A minimal `server.js` with only needed deps; `public` and `.next/static` must be copied separately

Answer

Fully static HTML output with no server needed

Answer

Running the app without Node.js

Answer

Automatically enabling the Edge runtime for all routes

Question 25

With `output: "export"`, which feature is unavailable?

Accepted Answer

Server Actions and ISR (anything needing a server at request time)

Answer

Server Components rendered at build time

Answer

Client Components

Answer

CSS Modules

Question 26

A Client Component renders `new Date().toLocaleTimeString()` directly in JSX and throws a hydration error. Best fix?

Accepted Answer

Set the client-dependent value after mount in `useEffect`

Answer

Convert it to a Server Component so the time never changes

Answer

Disable `reactStrictMode`

Answer

Put `suppressHydrationWarning` on `<html>` to hide all errors

Question 27

In parallel routes, why is a `default.tsx` needed for a slot?

Accepted Answer

On hard navigation (refresh), if the slot has no match for the URL, default renders; otherwise 404

Answer

It's required to pick the default slot on soft navigation

Answer

To define each slot's loading state

Answer

It replaces the root layout

Question 28

A photo opened in a modal over the feed via an intercepting route (`/photo/1`). The user refreshes. What do they see?

Accepted Answer

The full `/photo/1` page, without feed or modal

Answer

The same modal over the feed

Answer

A 404 error

Answer

The feed without the modal

Question 29

Using route groups you have two root layouts: `(shop)` and `(admin)`. What happens navigating between them?

Accepted Answer

A full page load happens instead of client-side navigation

Answer

A normal soft navigation without reload

Answer

The build fails because only one root layout is allowed

Answer

Both layouts render nested

Question 30

Navigating from `/dashboard/settings` to `/dashboard/analytics`, what does the server render?

Accepted Answer

Only the changed segment (`analytics`); the shared `dashboard` layout isn't re-rendered

Answer

The whole tree from the root layout down

Answer

Nothing; everything renders on the client

Answer

Only the root layout

Question 31

In production, how much of a dynamic route does a default `<Link>` prefetch?

Accepted Answer

Only down to the nearest `loading.tsx` (shell and layouts), not the full page data

Answer

The entire page with all its data

Answer

Nothing; prefetch is disabled for dynamic routes

Answer

Only CSS files

Question 32

A table has 500 rows, each with a `<Link>` to a details page, and the server is swamped by prefetches. Sensible fix?

Accepted Answer

Use `prefetch={false}` on the links (or prefetch on hover only)

Answer

Replace all links with `window.open`

Answer

Disable JavaScript entirely

Answer

Raise `revalidate` to one year

Question 33

A large layout got `"use client"` just for a theme toggle button. Consequence and fix?

Accepted Answer

Its whole imported subtree ships to the client; extract the button into a small Client Component

Answer

No consequence; `"use client"` only affects that file

Answer

The layout no longer renders on the server and SEO is fully lost

Answer

Make the whole app client-side for consistency

Question 34

If `notFound()` is called inside a component within `<Suspense>` after streaming has begun, what's the HTTP status?

Accepted Answer

200, since headers were already sent; Next.js injects a `noindex` meta tag

Answer

Always 404, since Next.js aborts and resends the response

Answer

500

Answer

A 301 to the home page

Question 35

A store has 2 million products. Best strategy for `generateStaticParams`?

Accepted Answer

Prebuild only top sellers; generate the rest on demand with `dynamicParams` and revalidation

Answer

Build all 2 million pages on every build

Answer

Set `dynamicParams = false` to speed up the build

Answer

Convert the whole site to a client-side SPA

Question 36

A CMS must invalidate the cache after publishing. Which implementation is secure?

Accepted Answer

A Route Handler that verifies a secret, then calls `revalidateTag`

Answer

A public Route Handler that invalidates all tags on any GET

Answer

Calling `revalidateTag` in a Client Component

Answer

Auto-redeploying the site on every publish

Question 37

With ISR, if background regeneration of a page fails due to an API error, what do users see?

Accepted Answer

The last successfully generated version keeps being served and it retries later

Answer

A 500 error page for everyone

Answer

A blank page

Answer

The site falls back to development mode

Question 38

To invalidate all `app/blog/[slug]` pages in one call, which form is correct?

Accepted Answer

`revalidatePath("/blog/[slug]", "page")`

Answer

`revalidatePath("/blog/*")`

Answer

`revalidatePath("/blog/:slug")`

Answer

`revalidateTag("/blog/[slug]")`

Question 39

What's the purpose of `export const dynamic = "error"`?

Accepted Answer

Forces static rendering and fails the build if code uses Dynamic APIs

Answer

Sends any runtime error to a custom 500 page

Answer

Always makes the page dynamic

Answer

Disables error logs in the browser console

Question 40

To filter UI by `?sort=`, what's the trade-off of reading `searchParams` in the page versus `useSearchParams` on the client?

Accepted Answer

The prop makes the page dynamic but filters on the server; the hook lets the page stay static

Answer

There's no difference

Answer

The hook makes the page dynamic while the prop keeps it static

Answer

The prop only works in the Pages Router

Question 41

What's the rendering impact of implementing CSP with a nonce generated in middleware?

Accepted Answer

Pages must render dynamically since the nonce is per request; static and CDN caching are lost

Answer

No impact; pages remain static

Answer

Next.js generates the nonce once at build time

Answer

CSP only applies to Client Components

Question 42

In production, what does a Server Component error's `error.message` look like in the client `error.tsx`?

Accepted Answer

A generic message plus a `digest` to match server logs; sensitive details aren't sent

Answer

The full message with the server stack trace

Answer

Always `undefined`

Answer

The SQL query that ran

Question 43

Where do you initialize OpenTelemetry or monitoring tooling when the Next.js server starts?

Accepted Answer

The `register` function in `instrumentation.ts` at the project root

Answer

In a `useEffect` in the root layout

Answer

Separately in every Route Handler

Answer

In `next-env.d.ts`

Question 44

In Next.js 15+, how do you run analytics logging after the response is sent so it doesn't slow the response?

Accepted Answer

With `after()` from `next/server`

Answer

With `setTimeout` in a Server Component

Answer

With `useEffect` in a Server Component

Answer

By adding `await` before the log call

Question 45

Middleware without a `matcher` makes a network call to check the session, and the site is slow. Main issue?

Accepted Answer

It runs on every request, even `_next/static` and images; exclude them with a matcher

Answer

Middleware runs only once at build time

Answer

Middleware can't fetch on the Edge

Answer

The problem is `next/font`

Question 46

When self-hosting with high traffic, the built-in image optimizer is eating server CPU. Good fix?

Accepted Answer

Configure a custom `loader` to offload optimization to an image CDN (e.g. Cloudinary/imgix)

Answer

Remove `alt` from all images

Answer

Convert every `<Image>` into a Server Action

Answer

Increase page `revalidate`

Question 47

In the App Router, what do you use to send real-user metrics (LCP, INP, CLS) to an analytics service?

Accepted Answer

The `useReportWebVitals` hook in a Client Component

Answer

The `next build` output

Answer

The `generateMetadata` function

Answer

`revalidateTag("vitals")`

Question 48

In the App Router, how is multilingual routing (like `/fa/about` and `/en/about`) usually implemented?

Accepted Answer

A dynamic `app/[lang]/...` segment plus middleware to detect and redirect locale

Answer

With the `i18n` option in `next.config`, designed for the App Router

Answer

With two separate Next.js projects

Answer

It's not possible

Question 49

A Client Component deletes an item via `fetch` to a Route Handler, but the server-rendered list still shows it. Fix?

Accepted Answer

Move the mutation to a Server Action with `revalidatePath` (or call `router.refresh()` after fetch)

Answer

Call `localStorage.clear()`

Answer

Move the Route Handler into `next.config`

Answer

Enable `reactStrictMode`

Question 50

In `app/[category]/[product]/page.tsx`, if the `[category]` layout has its own `generateStaticParams`, what does the product page's `generateStaticParams` receive?

Accepted Answer

The parent `params` (e.g. `category`) so it can generate products per category

Answer

No arguments; it must build all combinations itself

Answer

The `request` object

Answer

The user's cookies

Next.js · Senior · 50

How do Suspense + streaming help UX?