Top 50 Next.js Interview Questions in 2026 (With Real Answers)

Next.js is the JavaScript framework most companies are betting on, and the interview bar reflects it. By 2026, "I built a side project on Next" gets you nothing - interviewers want depth on the App Router, Server Components, the cache architecture, and the migration patterns from Pages.

These are the 50 questions that actually come up in Next.js-heavy frontend and full-stack loops.

Fundamentals (1-10)

1. What is Next.js and why is it the default React framework?

A React metaframework with a built-in router, server-side rendering, edge runtime, image and font optimization, and a tight Vercel deployment story. It removes the dozen decisions you'd otherwise make manually for a production React app.

2. App Router vs Pages Router - what's different?

• App Router (/app): React Server Components, nested layouts, streaming, server actions, the file-system maps to React components.
• Pages Router (/pages): the old model, getServerSideProps/getStaticProps, classic page components.

App Router is the default since 13.4 and the only one Vercel actively invests in. Pages still works but new projects should be App.

3. What's a React Server Component?

A component that runs on the server only, never ships JS to the client, and can directly fetch data, read files, query DBs. It returns a serialized tree the client renders. Drastically reduces JS bundle size for content-heavy pages.

4. Server vs Client Components - when do you use each?

• Server (default in App Router): data fetching, anything heavy or sensitive.
• Client ("use client" at the top): anything that needs useState, useEffect, browser APIs, event handlers.

The pattern is "server by default, client at the leaves where interactivity lives."

5. What does "use client" actually do?

Marks the file as a Client Component boundary. Everything imported from there down is sent to the client (unless those imports are themselves "use server" or server-only). Place it as low in the tree as possible.

6. What does "use server" mean?

Two things, depending on context:

• At the top of a file: every exported function is a Server Action.
• Inline above a function: that single function is a Server Action.

Server Actions are RPC endpoints Next generates for you. Called from client components, executed on the server.

7. Walk me through what happens when a user requests a page.

Request hits the edge or the Node server. Next runs the route's Server Components, fetches data, streams HTML and React Server Component payloads. Client receives HTML for instant paint, then hydrates with the RSC tree. Subsequent navigations transfer only RSC payloads, not full HTML.

8. What is streaming in Next.js?

Sending parts of the page as they're ready instead of waiting for everything. The user sees the layout and skeletons immediately, slow data fills in. Uses Suspense boundaries (<Suspense fallback={...}>) and the React streaming runtime.

9. What is loading.tsx for?

A route segment's loading UI. While the segment's components fetch data, this file's UI shows. Implemented as a Suspense boundary under the hood.

10. What is error.tsx for?

A route segment's error boundary. Catches errors thrown in the segment and renders a fallback. Must be a Client Component (it needs hooks).

Routing and Layouts (11-20)

11. How does file-system routing work in App Router?

Each folder is a route segment. app/blog/[slug]/page.tsx maps to /blog/:slug. Special files: page.tsx (the leaf UI), layout.tsx (wraps children), loading.tsx, error.tsx, template.tsx, not-found.tsx, route.ts (REST handlers).

12. What's a layout vs a template?

• Layout: persists across navigations, doesn't re-render between siblings of the same parent.
• Template: re-renders on every navigation, used when you need fresh state or animations on each visit.

Layout is the default. Template is rare.

13. What are dynamic segments?

[slug] for a single value, [...catchall] for multiple, [[...optional]] for optional. Available as params in the page.

14. What's a parallel route?

Multiple slots rendered in parallel via @folder syntax (@modal, @analytics). Lets you render multiple independent route trees side by side - dashboards, modals.

15. What's an intercepting route?

(.), (..) syntax that intercepts navigation and renders a different UI in place (like a modal opening over the previous page on /photos/123 while the URL stays clean). Foundation of Instagram-style "open in modal, full page on refresh" UX.

16. What's route groups?

Folders wrapped in (parens) that don't appear in the URL but let you organize files or apply different layouts. (marketing) and (app) route groups are common.

17. How do you do client-side navigation?

<Link> from next/link for declarative, useRouter().push() from next/navigation (NOT next/router - that's Pages) for imperative.

18. What does <Link prefetch> actually do?

In dev: nothing meaningful. In prod: when the link enters the viewport, Next fetches the target route's RSC payload and caches it. Click navigations feel instant.

19. How do you redirect from a Server Component?

redirect('/path') from next/navigation. Throws a special error that Next catches and returns a 307. Don't put it in a try/catch unless you re-throw, or you'll swallow the redirect.

20. How do you get search params?

Server Component: searchParams prop on the page (now async in Next 15+, await it).
Client Component: useSearchParams() hook.

In Next 15 the searchParams and params props on pages became Promises. Await them.

Data Fetching and Caching (21-30)

21. How does fetching work in a Server Component?

You can await fetch(...) directly - or any DB client. No more getServerSideProps. The fetch happens on the server during render. Multiple awaits in one component are sequential; parallelize with Promise.all.

22. What is the Next.js fetch cache and how do you control it?

Next extends fetch to add caching. Defaults shifted in v15:

• v14 default: force-cache.
• v15 default: no-store (uncached). Explicitly opt in to cache.

Override with fetch(url, { cache: 'force-cache' | 'no-store' }) or next: { revalidate: 60 }.

23. Explain revalidate.

Time-based ISR. next: { revalidate: 60 } means the cached response is served for 60s, then the next request triggers a background revalidate. The user requesting at second 61 still gets the stale response; the one after that gets the fresh.

24. Explain revalidateTag and revalidatePath.

On-demand cache busting. Tag your fetch (fetch(url, { next: { tags: ['posts'] } })), then call revalidateTag('posts') from a Server Action or route handler when the data changes. revalidatePath('/blog') does the same for a route.

25. What are the cache layers in Next.js?

By 2026, four:

1. Request Memoization: dedupe identical fetches within one render.
2. Data Cache: persistent across requests, controlled by cache/revalidate.
3. Full Route Cache: rendered HTML/RSC payload at build/request time.
4. Client Router Cache: in-memory client cache of visited route payloads.

Most "why is this stale?" questions trace to one of these.

26. What is Partial Prerendering (PPR)?

A static shell rendered at build time with dynamic holes (Suspense boundaries) filled at request time. Best of static + dynamic in one page. Stable in Next 15.x. Opt in with experimental.ppr or unstable_noStore for dynamic parts.

27. What is unstable_noStore (now noStore)?

Forces the surrounding component to be dynamic - opt out of caching. Used when you can't decorate a fetch call (e.g., reading from a DB client). Hoisted to a stable API in Next 15.

28. How do you opt a route into fully dynamic rendering?

Several knobs:

• export const dynamic = 'force-dynamic'
• export const revalidate = 0
• Reading cookies() or headers() at the top level.
• Calling noStore().

Pick one. Mixing them is confusing.

29. How does generateStaticParams work?

Equivalent to old getStaticPaths. Returns an array of params to prerender at build time. For dynamic routes, paths not generated at build are SSR-rendered on first visit (and optionally cached) unless dynamicParams = false.

30. What's the difference between Static, Dynamic, and Streaming rendering?

• Static: rendered at build, cached, served fast.
• Dynamic: rendered per request.
• Streaming: dynamic but flushed in chunks via Suspense.

A route can mix: PPR delivers a static shell with dynamic streams.

Server Actions and Forms (31-40)

31. What's a Server Action?

A function marked with "use server" that the client can invoke directly. Next generates an RPC endpoint. Used for mutations (create post, delete row) without writing API routes.

32. Show me the simplest Server Action.

// app/posts/actions.ts
"use server";
import { revalidateTag } from 'next/cache';
import { db } from '@/lib/db';

export async function createPost(formData: FormData) {
  const title = formData.get('title') as string;
  await db.post.create({ data: { title } });
  revalidateTag('posts');
}

// component
<form action={createPost}>
  <input name="title" />
  <button>Create</button>
</form>

33. Server Actions vs API Routes - when each?

• Server Actions: form submissions, mutations called from your own UI, anything coupled to a specific component.
• Route Handlers (route.ts): public APIs, third-party webhooks, CORS endpoints, anything called externally.

34. How do you handle Server Action errors?

Throw, or return a serializable error object. Use useActionState (formerly useFormState) on the client to read the result. Return { error: 'msg' } for known errors; throw for unexpected.

35. How do you get pending state on a form submission?

useFormStatus() inside a child of the form. Returns { pending, data, method, action }. Used for disabling buttons or showing spinners.

36. What's useActionState (formerly useFormState)?

Hook that wraps a Server Action and gives you stateful results - last response, pending state, optimistic updates. Renamed in React 19.

37. How do you do optimistic updates?

useOptimistic(state, reducer). Lets you update local UI immediately, then reconcile with the server response. Pattern:

const [optimistic, addOptimistic] = useOptimistic(items, (state, newItem) => [...state, newItem]);
async function add(formData) {
  addOptimistic({ id: 'temp', ...input });
  await createPost(formData);
}

38. Are Server Actions always POST?

Yes - they are POST requests under the hood. The framework handles encoding, CSRF protection (origin checks), and routing.

39. Can you call a Server Action from a Server Component?

Yes - just call it directly. It's a regular async function on the server. The "RPC" generation only kicks in when called from a Client Component.

40. What's the security boundary for Server Actions?

Treat them like any HTTP endpoint. Never trust the input. Always re-check authorization inside the action - "this action only renders for admins" is not a security guarantee, the action is callable by anyone who knows the ID.

Performance, Deployment, and Migration (41-50)

41. What is next/image and what does it do?

Optimized image component. Generates responsive sizes, lazy-loads below the fold, serves AVIF/WebP, defers loading via blur or shimmer placeholders. The biggest single CLS/LCP win on most Next sites.

42. What is next/font?

Self-hosted font loading at build time. Eliminates layout shift, no external network call, automatic subsetting. Replaces <link rel="stylesheet" href="https://fonts.googleapis.com/...">.

43. What's middleware and where does it run?

Code that runs before a request hits a route. Runs on the Edge runtime by default. Use cases: auth checks, A/B routing, rewrites, geolocation. Must return fast - no DB queries, no heavy logic.

44. Edge runtime vs Node runtime - when each?

• Edge: low-latency, geographically distributed, limited APIs (no fs, no native modules), sub-50ms cold start. Good for middleware, simple APIs, content delivery.
• Node: full Node APIs, slower cold start. Required for most real backends, heavy SDKs, file I/O.

Default to Node unless you specifically need Edge.

45. What's the deployment story for Next.js in 2026?

• Vercel: zero-config, all features supported.
• AWS via SST/OpenNext: most features, more knobs.
• Cloudflare via OpenNext-cloudflare: Edge-first, growing.
• Self-host with next start: works, lose ISR + on-demand revalidation conveniences without extra setup.

The split between "Vercel features" and "self-host features" narrowed dramatically with OpenNext.

46. How do you handle environment variables?

.env.local for local secrets, process.env.X to read. Variables prefixed with NEXT_PUBLIC_ are inlined into the client bundle - anything else stays server-only. Don't put secrets in NEXT_PUBLIC_*.

47. How do you migrate from Pages Router to App Router?

Coexist them - both can run side by side. Migrate route by route. Start with the lowest-traffic, simplest pages. Move shared components last. Keep _app.tsx and _document.tsx working until the last Pages route is gone.

48. What's not-found.tsx?

Catches 404s for the route segment. Triggered by notFound() from next/navigation or by missing dynamic params. Per-segment - you can have a custom 404 for /blog/* separate from the global one.

49. How do you measure Core Web Vitals on a Next site?

next/web-vitals reports LCP, INP, CLS, TTFB to your analytics endpoint. Vercel Speed Insights, Google Analytics 4, or DataDog RUM ingest the data. Track p75 by route - the aggregate hides regressions.

50. You join a team with a slow Next.js app. First five things you check?

1. Bundle analysis (@next/bundle-analyzer) - Client Components that should be Server, big libs imported needlessly.
2. Caching - is everything no-store? Are you regenerating on every request?
3. Images - using next/image? Right sizes? Format optimization?
4. Fonts - using next/font? CLS from font loading?
5. Database calls per page - Server Components doing N+1?

The 80/20 of perf wins on Next is bundle size, image optimization, and cache semantics.

Final Note

Next.js interviewers in 2026 don't reward people who can recite docs. They reward people who can answer "why did this query refresh?" or "why did this page bundle balloon to 800KB?" - questions that come from running Next in production.

Build something real. Ship it. Watch what breaks. Then walk into the loop with stories about how you fixed it. That beats any flashcard.

Now go ship.