92 Next.js interview questions with answers (2026)

All Next.js interview questions

How does the App Router differ from the Pages Router in Next.js?

How does file-based routing work in the Next.js App Router?

What are layouts in the Next.js App Router?

How do loading.tsx and Suspense work in the Next.js App Router?

How do error.tsx and not-found.tsx work in Next.js?

What are Route Groups in Next.js?

How do dynamic routes and catch-all routes work in the Next.js App Router?

What are Parallel Routes and Intercepting Routes in Next.js?

How is metadata defined in the Next.js App Router?

What is generateStaticParams used for in the Next.js App Router?

What are React Server Components?

When should you use the 'use client' directive in Next.js?

Can a Server Component import a Client Component and vice versa?

When should you use a Server Component vs a Client Component?

What rules must Server Component props follow?

Does the Context API work with Server Components?

What issues can arise with third-party libraries and Server Components?

What are the server-only and client-only packages in Next.js?

What is streaming and progressive rendering with React Server Components?

What is SSR (Server-Side Rendering) in Next.js?

What is SSG (Static Site Generation) in Next.js?

What is ISR (Incremental Static Regeneration)?

What is on-demand revalidation in Next.js?

How does fetch caching work in the Next.js App Router?

What types of caching does Next.js have?

What is the difference between dynamic and static rendering in the App Router?

How do getStaticProps and getServerSideProps differ?

How does Streaming SSR work in Next.js?

What is Partial Prerendering (PPR) in Next.js?

What are Route Handlers (API Routes) in the Next.js App Router?

What are Server Actions in Next.js?

How do you use Server Actions with HTML forms?

How do you revalidate after a mutation in a Server Action?

How do you handle errors in Server Actions?

What are the security considerations when using Server Actions?

What is Middleware in the Next.js App Router?

How do you work with cookies and headers in Next.js Server Components and Actions?

How do you implement optimistic updates with Server Actions and useOptimistic?

What is the difference between Edge Runtime and Node.js Runtime in Next.js?

What benefits does the next/image component provide?

How does next/font work in Next.js?

What is Link prefetching in Next.js and how do you control it?

What is the next/script component and what are its loading strategies?

How do you use the bundle analyzer in Next.js?

How does the Middleware proxy pattern work in Next.js?

What are Core Web Vitals and how does Next.js optimize them?

What is Turbopack and what are its benefits in Next.js?

How are environment variables handled in Next.js?

How is internationalization (i18n) implemented in Next.js?

How does deploying Next.js on Vercel work, and which features does Vercel handle automatically that you'd have to manage yourself when self-hosting?

How do you self-host Next.js with a Node server, and what problem does `output: 'standalone'` solve when packaging a deployment?

How do you write an optimized production Dockerfile for Next.js, and why use a multi-stage build with `output: 'standalone'`?

What does `output: 'export'` do in Next.js, and which features are NOT available with static export?

In App Router, why do runtime CSS-in-JS libraries (styled-components, Emotion) struggle with Server Components while CSS Modules and Tailwind don't?

How do you set up Jest + React Testing Library for Next.js, and why can't Jest directly test async Server Components?

Why is Playwright a good E2E choice for Next.js App Router, and what does a basic setup look like?

How do you implement Content-Security-Policy with a nonce in Next.js, and why must you generate a fresh nonce per request instead of hardcoding one?

Do Server Actions have built-in CSRF protection, and which security layers must you still handle yourself?

Why does connecting to a database from Next.js serverless need special connection-pooling care, and how do Prisma/Drizzle address it?

What do `_app.tsx` and `_document.tsx` do in the Pages Router, and what replaces them in the App Router?

What's the strategy for migrating from Pages Router to App Router, and can the two routers run side by side?

How do `revalidatePath` and `revalidateTag` differ, and when do you pick each after a mutation?

How does i18n routing work in the App Router, and what does next-intl add over rolling your own?

What are `useFormStatus` and `useActionState` used for with Server Actions, and why must `useFormStatus` live in a child component of the form?

What is Draft Mode in Next.js for, and how does it toggle static rendering for previewing CMS content?

How do parallel and sequential data fetching differ in the App Router, and what problem does the preload pattern solve?

Where should `'use client'` go, and what happens if you put it in the root layout?

What error do you get when passing a function or class instance from a Server Component to a Client Component, and how do you fix it?

How do `layout.tsx` and `template.tsx` differ, and when must you use `template.tsx`?

A layout and a page both call `getUser()` with an identical `fetch`. Does the backend receive two requests?

An error thrown in `layout.tsx` is not caught by the `error.tsx` in the same folder. Why, and how do you handle it?

Distinguish `dynamic`, `revalidate`, `dynamicParams`, and `fetchCache` in route segment config. When do you use each?

When do you use a Server Action versus writing a Route Handler (`route.ts`)?

A product detail route has 50,000 slugs. Does `generateStaticParams` have to build all 50,000 pages?

How do you migrate a Pages Router project to the App Router without pausing feature work?

You called `revalidateTag` after an update and the server returns fresh data, yet pressing Back still shows stale data. Why?

If data comes from Prisma (not `fetch`), do the Data Cache and `revalidateTag` apply?

Where does Next.js middleware run, what are its limits, and should it be your only authorization layer?

Calling `cookies().set()` in a Server Component throws. Why, and where should you set the session cookie?

Design a photo modal flow (clicking in the feed opens a modal, sharing the link opens a full page) with the App Router.

What does the `NEXT_PUBLIC_` prefix mean for environment variables? Why does misusing it leak secrets?

How do `redirects` and `rewrites` in `next.config` differ? When do you use each?

Using `next/image` with an external CDN throws "hostname is not configured". How do you fix it, and when do you use `fill` with `sizes`?

A component using a charting library throws `window is not defined` at build time. How does `dynamic(..., { ssr: false })` fix it, and what are the trade-offs?

Sharing a link on Facebook/Zalo shows no preview image even though `openGraph.images` is set. What usually causes this?

A site has 200,000 product URLs. Can `sitemap.ts` return them all in one array? What is the right approach?

The App Router dropped the built-in `i18n` config that Pages Router had. How do you build a multilingual site correctly for SEO?

Self-hosting Next.js with Docker: what is `output: 'standalone'` for, and what commonly breaks once you leave a managed platform?

Should a route run on the Edge runtime or the Node runtime? What criteria drive the decision?

A hydration mismatch never appears under `next dev` but shows up in production. Why, and how do you track it down?

A page uses Server Components, yet the payload sent to the client is still large. What usually causes this?

`next build` takes 15 minutes in CI. How do you diagnose and shorten it?

All Next.js interview questions

How does the App Router differ from the Pages Router in Next.js?
How does file-based routing work in the Next.js App Router?
What are layouts in the Next.js App Router?
How do loading.tsx and Suspense work in the Next.js App Router?
How do error.tsx and not-found.tsx work in Next.js?
What are Route Groups in Next.js?
How do dynamic routes and catch-all routes work in the Next.js App Router?
What are Parallel Routes and Intercepting Routes in Next.js?
How is metadata defined in the Next.js App Router?
What is generateStaticParams used for in the Next.js App Router?
What are React Server Components?
When should you use the 'use client' directive in Next.js?
Can a Server Component import a Client Component and vice versa?
When should you use a Server Component vs a Client Component?
What rules must Server Component props follow?
Does the Context API work with Server Components?
What issues can arise with third-party libraries and Server Components?
What are the server-only and client-only packages in Next.js?
What is streaming and progressive rendering with React Server Components?
What is SSR (Server-Side Rendering) in Next.js?
What is SSG (Static Site Generation) in Next.js?
What is ISR (Incremental Static Regeneration)?
What is on-demand revalidation in Next.js?
How does fetch caching work in the Next.js App Router?
What types of caching does Next.js have?
What is the difference between dynamic and static rendering in the App Router?
How do getStaticProps and getServerSideProps differ?
How does Streaming SSR work in Next.js?
What is Partial Prerendering (PPR) in Next.js?
What are Route Handlers (API Routes) in the Next.js App Router?
What are Server Actions in Next.js?
How do you use Server Actions with HTML forms?
How do you revalidate after a mutation in a Server Action?
How do you handle errors in Server Actions?
What are the security considerations when using Server Actions?
What is Middleware in the Next.js App Router?
How do you work with cookies and headers in Next.js Server Components and Actions?
How do you implement optimistic updates with Server Actions and useOptimistic?
What is the difference between Edge Runtime and Node.js Runtime in Next.js?
What benefits does the next/image component provide?
How does next/font work in Next.js?
What is Link prefetching in Next.js and how do you control it?
What is the next/script component and what are its loading strategies?
How do you use the bundle analyzer in Next.js?
How does the Middleware proxy pattern work in Next.js?
What are Core Web Vitals and how does Next.js optimize them?
What is Turbopack and what are its benefits in Next.js?
How are environment variables handled in Next.js?
How is internationalization (i18n) implemented in Next.js?
How does deploying Next.js on Vercel work, and which features does Vercel handle automatically that you'd have to manage yourself when self-hosting?
How do you self-host Next.js with a Node server, and what problem does `output: 'standalone'` solve when packaging a deployment?
How do you write an optimized production Dockerfile for Next.js, and why use a multi-stage build with `output: 'standalone'`?
What does `output: 'export'` do in Next.js, and which features are NOT available with static export?
In App Router, why do runtime CSS-in-JS libraries (styled-components, Emotion) struggle with Server Components while CSS Modules and Tailwind don't?
How do you set up Jest + React Testing Library for Next.js, and why can't Jest directly test async Server Components?
Why is Playwright a good E2E choice for Next.js App Router, and what does a basic setup look like?
How do you implement Content-Security-Policy with a nonce in Next.js, and why must you generate a fresh nonce per request instead of hardcoding one?
Do Server Actions have built-in CSRF protection, and which security layers must you still handle yourself?
Why does connecting to a database from Next.js serverless need special connection-pooling care, and how do Prisma/Drizzle address it?
What do `_app.tsx` and `_document.tsx` do in the Pages Router, and what replaces them in the App Router?
What's the strategy for migrating from Pages Router to App Router, and can the two routers run side by side?
How do `revalidatePath` and `revalidateTag` differ, and when do you pick each after a mutation?
How does i18n routing work in the App Router, and what does next-intl add over rolling your own?
What are `useFormStatus` and `useActionState` used for with Server Actions, and why must `useFormStatus` live in a child component of the form?
What is Draft Mode in Next.js for, and how does it toggle static rendering for previewing CMS content?
How do parallel and sequential data fetching differ in the App Router, and what problem does the preload pattern solve?
Where should `'use client'` go, and what happens if you put it in the root layout?
What error do you get when passing a function or class instance from a Server Component to a Client Component, and how do you fix it?
How do `layout.tsx` and `template.tsx` differ, and when must you use `template.tsx`?
A layout and a page both call `getUser()` with an identical `fetch`. Does the backend receive two requests?
An error thrown in `layout.tsx` is not caught by the `error.tsx` in the same folder. Why, and how do you handle it?
Distinguish `dynamic`, `revalidate`, `dynamicParams`, and `fetchCache` in route segment config. When do you use each?
When do you use a Server Action versus writing a Route Handler (`route.ts`)?
A product detail route has 50,000 slugs. Does `generateStaticParams` have to build all 50,000 pages?
How do you migrate a Pages Router project to the App Router without pausing feature work?
You called `revalidateTag` after an update and the server returns fresh data, yet pressing Back still shows stale data. Why?
If data comes from Prisma (not `fetch`), do the Data Cache and `revalidateTag` apply?
Where does Next.js middleware run, what are its limits, and should it be your only authorization layer?
Calling `cookies().set()` in a Server Component throws. Why, and where should you set the session cookie?
Design a photo modal flow (clicking in the feed opens a modal, sharing the link opens a full page) with the App Router.
What does the `NEXT_PUBLIC_` prefix mean for environment variables? Why does misusing it leak secrets?
How do `redirects` and `rewrites` in `next.config` differ? When do you use each?
Using `next/image` with an external CDN throws "hostname is not configured". How do you fix it, and when do you use `fill` with `sizes`?
A component using a charting library throws `window is not defined` at build time. How does `dynamic(..., { ssr: false })` fix it, and what are the trade-offs?
Sharing a link on Facebook/Zalo shows no preview image even though `openGraph.images` is set. What usually causes this?
A site has 200,000 product URLs. Can `sitemap.ts` return them all in one array? What is the right approach?
The App Router dropped the built-in `i18n` config that Pages Router had. How do you build a multilingual site correctly for SEO?
Self-hosting Next.js with Docker: what is `output: 'standalone'` for, and what commonly breaks once you leave a managed platform?
Should a route run on the Edge runtime or the Node runtime? What criteria drive the decision?
A hydration mismatch never appears under `next dev` but shows up in production. Why, and how do you track it down?
A page uses Server Components, yet the payload sent to the client is still large. What usually causes this?
`next build` takes 15 minutes in CI. How do you diagnose and shorten it?