Next.js Interview Questions and Answers

Sample questions

A few questions from each level with the correct answer and an explanation.

Next.js · Junior

1. What is colocation in the App Router?

   Correct answer: Keeping components and utilities next to routes inside app/

   Files in app/ become public only through page or route. So it's safe to keep a route's components, hooks, styles and tests next to its page.tsx. For clarity, use private _components folders or keep shared code in src/ outside app.

2. What is Next.js?

   Correct answer: A React framework with routing, server rendering and optimizations

   Next.js is built on React and adds what the library lacks: file-based routing, server and static rendering, Server Components and Server Functions, image and font optimization, building and deployment. Components are written in plain React.

3. How do you create a page at /about in the App Router?

   Correct answer: Create app/about/page.tsx with a default-exported component

   A route is defined by a folder, and a page.tsx (or .js) file makes it a public page. Without page, the folder isn't reachable by URL - you can keep components in it (colocation). There's no route configuration in next.config. A pages/about.tsx file is the old Pages Router convention.

4. How does layout.tsx differ from page.tsx?

   Correct answer: A layout wraps pages and preserves state during navigation

   A layout receives children and holds UI shared by nested routes (header, sidebar). When navigating between child pages, the layout doesn't remount: its state and DOM are preserved, and only the changed part renders. Both layout and page are Server Components by default.

Next.js · Middle

1. What is a Server Function (Server Action) in Next.js?

   Correct answer: An async function marked 'use server' that can be called from the client

   The 'use server' directive turns a function into a server function, and Next.js creates an endpoint for it. You can pass it to <form action> or call it from a client handler. The call is a POST request. Server Actions are Server Functions used for mutations, often followed by cache revalidation.

2. What does <form action={createPost}> with a Server Action give you compared to onSubmit + fetch?

   Correct answer: The form works even before JS loads (progressive enhancement), with no API route

   A Server Action receives FormData directly, so you don't need a Route Handler and a client fetch. If the form is rendered by a server component, it submits even before hydration. You still write validation yourself (e.g. with Zod). Submission state is shown via useActionState or useFormStatus.

3. What does revalidatePath('/blog') do after a mutation?

   Correct answer: Marks the cached data and UI of the /blog route as stale

   The next request to /blog gets fresh data. When called in a Server Action, the updated UI comes back right in the action's response. For targeted invalidation of data used on many pages, tags are more convenient (cacheTag + revalidateTag/updateTag).

4. How does updateTag differ from revalidateTag in Next.js 16?

   Correct answer: updateTag expires the cache immediately (read-your-writes), revalidateTag is stale-while-revalidate

   updateTag is available only in Server Actions: the user who changed the data sees the changes immediately. revalidateTag(tag, 'max') marks data as stale: visitors see the old version while the new one is prepared in the background - good for blogs and catalogs. In Next.js 16, revalidateTag requires a second argument - a cacheLife profile.

Next.js · Senior

1. What is the RSC payload?

   Correct answer: The serialized render result of Server Components with references to client ones

   The payload contains the rendered tree of server components, placeholders for client components with references to their JS chunks, and their props. On the first load it's embedded in the HTML (for hydration); during client navigation it's fetched separately. Server component code never reaches the browser.

2. What happens during client navigation via <Link> in the App Router?

   Correct answer: The new segment's RSC payload is loaded, and React updates only the changed parts

   The router requests the payload (or takes a prefetched one from the client cache) and reconciles it with the current tree: shared layouts are preserved and client state isn't lost. If the segment is still loading, loading.tsx is shown. There's no full document reload.

3. With cacheComponents: true, the dev overlay shows "blocking route". What does it mean?

   Correct answer: Uncached data is read outside <Suspense> and blocks the static shell

   With Cache Components, every piece of async work must be either cached via 'use cache' (it goes into the shell) or wrapped in <Suspense> (it streams at request time). Otherwise the whole page would wait for data. This rule is checked in development and at build time.

4. How does 'use cache: remote' differ from 'use cache'?

   Correct answer: It stores the result in a remote handler shared by all instances, at the cost of network latency

   Plain 'use cache' stores entries in process memory (LRU) by default, so in serverless and with multiple instances the cache is short-lived and not shared. remote uses a handler from cacheHandlers (Redis, a platform KV) - more reliable but more expensive. Access to request data comes from 'use cache: private', not remote.

Combined quizzes with this topic

Questions from several topics at once - just like an interview for a specific role.