Middle Next.js Interview Questions (50 MCQs)

Question 1

What is common for keeping fetch data fresh in App Router?

Accepted Answer

`revalidate` / `revalidatePath` / `revalidateTag`

Answer

Only `alert()`

Answer

Only `localStorage.clear()`

Answer

`document.write`

Question 2

Where does Middleware typically run?

Accepted Answer

On the Edge before the request completes

Answer

Only inside CSS

Answer

After every component unmounts

Answer

Only in IE11

Question 3

What does `next/image` do?

Accepted Answer

Resize, modern formats, lazy-load, reduce CLS

Answer

Fully replaces a database

Answer

Only removes SVGs

Answer

3D animations

Question 4

What does `generateStaticParams` do?

Accepted Answer

Pre-renders dynamic routes at build time

Answer

Parses query strings

Answer

Generates env variables

Answer

Removes routes at runtime

Question 5

What is a Server Action?

Accepted Answer

An async `"use server"` function run on the server, callable from forms/clients

Answer

A Server Component

Answer

A new middleware

Answer

A build-time-only function

Question 6

Which is true about `error.tsx`?

Accepted Answer

Must be a Client Component and acts as the segment's error boundary

Answer

Must be a Server Component

Answer

Catches errors in the same segment's layout

Answer

Only for 404s

Question 7

What does a `(marketing)` folder do in the App Router?

Accepted Answer

A route group: organizes and allows separate layouts without affecting the URL

Answer

Adds `/marketing` to the URL

Answer

Makes the route private

Answer

Removes the route

Question 8

When a product isn't found, what's the right move in a Server Component?

Accepted Answer

Call `notFound()` from `next/navigation`

Answer

Return `null`

Answer

`throw new Error("404")`

Answer

`window.location = "/404"`

Question 9

Which env variable is available in the browser?

Accepted Answer

`NEXT_PUBLIC_API_URL`

Answer

`API_SECRET`

Answer

`DATABASE_URL`

Answer

Every `.env` variable

Question 10

What's the benefit of passing a Server Action to `<form action={createPost}>`?

Accepted Answer

Progressive enhancement; the form submits even before JavaScript loads

Answer

The form only works after the page fully hydrates

Answer

Data is saved in `localStorage` and sent later

Answer

The form is automatically submitted via GET

Question 11

Why is `useFormStatus().pending` always `false` in the component that renders the `<form>` itself?

Accepted Answer

It only reads a parent `<form>`; it must be used in a child of the form

Answer

Because it only works in Server Components

Answer

Because the form must use GET

Answer

Because `revalidatePath` must be called

Question 12

Which hook fits showing a validation error returned by a Server Action in a form?

Accepted Answer

`useActionState`, which gives the action's returned state and pending status

Answer

`useEffect` with a `fetch` to the action

Answer

`useRef` to hold the server response

Answer

`useLayoutEffect` on the form

Question 13

After creating a post in a Server Action, `/posts` still shows stale data. The right fix?

Accepted Answer

Call `revalidatePath("/posts")` inside the Server Action

Answer

Clear the user's browser cache with JavaScript

Answer

Rebuild the whole project after each post

Answer

Append `?v=Math.random()` to links

Question 14

How do you invalidate all product-related fetches with one call?

Accepted Answer

Use `fetch(url, { next: { tags: ["products"] } })` then `revalidateTag("products")`

Answer

Add an `X-Products: clear` header to requests

Answer

With `router.refresh("products")`

Answer

Delete the `.next` folder at runtime

Question 15

What does `fetch(url, { cache: "no-store" })` in a page do?

Accepted Answer

Data is fetched fresh per request and the page renders dynamically

Answer

The response is cached forever

Answer

The fetch only runs in the browser

Answer

The page is built once at build time and never changes

Question 16

Why does a page that reads `cookies()` stop being statically prerendered?

Accepted Answer

Cookies are only known at request time; it's a Dynamic API

Answer

Because cookies are forbidden in Server Components

Answer

Because cookies increase HTML size

Answer

Because `cookies()` only works in middleware

Question 17

What does `export const dynamic = "force-dynamic"` in a `page.tsx` do?

Accepted Answer

Forces the route to render on the server for every request

Answer

Turns the page into a Client Component

Answer

Disables dynamic segments like `[id]`

Answer

Builds the page only at build time

Question 18

With `export const dynamicParams = false` and `generateStaticParams`, what happens for an `id` not in the list?

Accepted Answer

A 404 is returned

Answer

The page is generated on demand and cached

Answer

It redirects to the first `id` in the list

Answer

The build re-runs

Question 19

What exactly does `router.refresh()` do?

Accepted Answer

Re-fetches the current route's Server Components without losing client state

Answer

Reloads the whole page like F5

Answer

Fully wipes the server Data Cache

Answer

Navigates the user to the home page

Question 20

Passing which prop from a Server Component to a Client Component errors?

Accepted Answer

A plain function like `onSelect={() => ...}`

Answer

A plain object with strings and numbers

Answer

An array of strings

Answer

A JSX element as `children`

Question 21

How do you render a Server Component inside a Client Component (e.g. a Modal)?

Accepted Answer

Pass it as `children` or a prop from a parent Server Component

Answer

Import it directly in the Client Component file

Answer

With `dynamic(() => import(...), { ssr: false })`

Answer

It's not possible

Question 22

When a file has `"use client"`, what about the modules it imports?

Accepted Answer

They also become part of the client bundle, even without the directive

Answer

They remain Server Components

Answer

Next.js errors unless each has `"use client"`

Answer

They run only on the server and their output is serialized

Question 23

What's the right way to use React Context (e.g. a ThemeProvider) across an App Router app?

Accepted Answer

Create a Client Component provider and wrap `children` with it in the root layout

Answer

Call `createContext` directly in the root layout (a Server Component)

Answer

Context isn't supported in the App Router

Answer

Register the provider in `next.config.js`

Question 24

In a Route Handler `GET(request: NextRequest)`, how do you read `?page=2`?

Accepted Answer

`request.nextUrl.searchParams.get("page")`

Answer

`request.query.page`

Answer

`useSearchParams().get("page")`

Answer

`request.body.page`

Question 25

How do you run middleware only for `/dashboard/*` routes?

Accepted Answer

With `export const config = { matcher: "/dashboard/:path*" }`

Answer

By placing the middleware file inside `app/dashboard`

Answer

With `export const runtime = "dashboard"`

Answer

Middleware always runs on all routes and can't be limited

Question 26

How does `NextResponse.rewrite()` differ from `NextResponse.redirect()` in middleware?

Accepted Answer

Rewrite serves another path's content while the browser URL stays the same

Answer

Rewrite sends the user to a new URL and the address bar changes

Answer

Redirect only works for external domains

Answer

There's no difference

Question 27

Where can you set a cookie with `cookies().set()`?

Accepted Answer

In a Server Action or Route Handler (and middleware via the response)

Answer

In any Server Component during render

Answer

In `generateMetadata`

Answer

In `generateStaticParams`

Question 28

`getUser()` (using an ORM) is called in both layout and page. How do you query only once per request?

Accepted Answer

Wrap it with React's `cache`

Answer

Store the result in `localStorage`

Answer

Keep it in a module-level global variable

Answer

Move the query to a Client Component

Question 29

If `generateMetadata` and `page` both `fetch` the same URL and options, how many network requests happen?

Accepted Answer

One; identical fetches in a render pass are memoized

Answer

Two; each fetch is sent separately

Answer

Zero; data is read from `public`

Answer

Three; one extra for prefetch

Question 30

`app/dashboard/loading.tsx` exists, but a slow fetch lives in `app/dashboard/layout.tsx`. What happens?

Accepted Answer

The loading UI won't show; it wraps the page and below, not the same-level layout

Answer

The loading UI shows immediately

Answer

The layout automatically renders client-side

Answer

The build fails

Question 31

An error is thrown in `app/shop/layout.tsx`. Which error boundary catches it?

Accepted Answer

The `error.tsx` in the parent segment (e.g. `app/error.tsx`)

Answer

`app/shop/error.tsx`

Answer

`app/shop/not-found.tsx`

Answer

None; layout errors are ignored

Question 32

A dashboard has one slow widget (3s) and the rest are fast. Best way to show the page quickly?

Accepted Answer

Wrap the slow widget in its own `<Suspense fallback={...}>` so the rest streams first

Answer

Make the whole page wait for the slow widget

Answer

Load the slow widget with `setTimeout` on the client

Answer

Set `dynamic = "force-static"`

Question 33

A map library needs `window`. Where is `dynamic(..., { ssr: false })` allowed?

Accepted Answer

Only inside a Client Component

Answer

Only inside a Server Component

Answer

Only inside `next.config.js`

Answer

Only inside a Route Handler

Question 34

You change `NEXT_PUBLIC_API_URL` on the server after building, but client code still has the old value. Why?

Accepted Answer

`NEXT_PUBLIC_` variables are inlined into the JS bundle at build time

Answer

The browser caches environment variables

Answer

Next.js only reads variables every 24 hours

Answer

You must move `.env` into `public`

Question 35

When using `<Image fill />`, what's required of the parent element?

Accepted Answer

The parent must have `position` set to `relative`, `absolute` or `fixed`

Answer

The parent must be `display: grid`

Answer

The parent must be a `<picture>`

Answer

The parent must have no dimensions

Question 36

What does the `sizes` prop on `next/image` (e.g. `"(max-width: 768px) 100vw, 33vw"`) do?

Accepted Answer

Tells the browser the image's display width so it picks the smallest suitable `srcset` entry

Answer

Resizes the original file on disk

Answer

Sets the maximum allowed file size

Answer

Sets how many times the image reloads

Question 37

Your site is static, and CMS editors want to preview unpublished drafts. Which Next.js feature fits?

Accepted Answer

Draft Mode, which renders the page at request time for that user

Answer

Removing static generation from the whole site

Answer

Rebuilding the whole site on every CMS save

Answer

Showing drafts only in `next dev`

Question 38

Why doesn't `redirect("/done")` inside a `try { ... } catch {}` in a Server Action work?

Accepted Answer

`redirect` works by throwing a special error, and `catch` swallows it

Answer

Because `redirect` is forbidden in Server Actions

Answer

Because `redirect` only accepts absolute URLs

Answer

Because `redirect` must be awaited

Question 39

The old `/old-blog/:slug` should permanently move to `/blog/:slug`. Simplest approach?

Accepted Answer

Define `redirects()` in `next.config` with `permanent: true`

Answer

A page that redirects in `useEffect`

Answer

Duplicate all pages under both paths

Answer

Add `<meta refresh>` to the root layout

Question 40

To proxy `/api/*` to an external backend without CORS issues, which config fits?

Accepted Answer

`rewrites()` in `next.config` with `destination` set to the backend

Answer

`redirects()` with `permanent: false`

Answer

`images.remotePatterns`

Answer

`basePath: "/api"`

Question 41

Stripe needs to send a webhook to your app. Server Action or Route Handler?

Accepted Answer

Route Handler; external clients need a stable HTTP endpoint with a known URL

Answer

Server Action; it automatically exposes a public URL for external services

Answer

A Client Component with `useEffect`

Answer

Middleware; it's the only place the body can be read

Question 42

You want a like to appear instantly in the UI and be confirmed after the Server Action responds. Which hook?

Accepted Answer

`useOptimistic`

Answer

`useDeferredValue`

Answer

`useId`

Answer

`useSyncExternalStore`

Question 43

On a static page, a Client Component using `useSearchParams` has no `<Suspense>` around it. Result?

Accepted Answer

The build warns/errors, as everything up to the nearest Suspense would render client-only

Answer

The whole site becomes dynamic

Answer

`useSearchParams` always returns an empty string

Answer

There's no effect

Question 44

In `next build` output, what does `ƒ` next to a route mean?

Accepted Answer

The route is dynamic and server-rendered on each request

Answer

The route is fully statically prerendered

Answer

The route has a build error

Answer

The route only exists in development

Question 45

What does `subsets: ["latin"]` in `next/font/google` do?

Accepted Answer

Only the given character subset is preloaded, reducing download size

Answer

The font only shows for users in Latin countries

Answer

All other languages are removed from the site

Answer

The font is rendered as SVG

Question 46

Why set `metadataBase` in the root layout?

Accepted Answer

So relative URLs in metadata (like Open Graph images) resolve to absolute URLs

Answer

To change the base path of all pages

Answer

To store metadata in a database

Answer

To generate metadata only in development

Question 47

How do you make every title look like `About | MySite` without repeating the site name per page?

Accepted Answer

In the layout: `title: { template: "%s | MySite", default: "MySite" }`

Answer

Set `document.title` in `useEffect` on every page

Answer

Define `title` in `next.config.js`

Answer

It's not possible

Question 48

Both `app/blog/new/page.tsx` and `app/blog/[slug]/page.tsx` exist. Which renders `/blog/new`?

Accepted Answer

`blog/new`; static segments take precedence over dynamic ones

Answer

`blog/[slug]` with `slug = "new"`

Answer

The build fails due to a conflict

Answer

One is chosen randomly each time

Question 49

A carousel library uses `useState` but lacks `"use client"`, and errors in a Server Component. Fix?

Accepted Answer

Create a `"use client"` file that re-exports it and import from there

Answer

Edit the library code in `node_modules`

Answer

Move the whole app back to the Pages Router

Answer

Mark the library as server-only in `next.config.js`

Question 50

A layout sets `revalidate = 3600` and its page sets `revalidate = 60`. How often does the route revalidate?

Accepted Answer

Every 60 seconds; the lowest value in the route wins

Answer

Every 3600 seconds; the layout wins

Answer

The average of the two

Answer

Never; the conflict disables caching

Next.js · Middle · 50

What is common for keeping fetch data fresh in App Router?