Q: How do environment variables work in Next.js (the NEXT_PUBLIC_ prefix)?

**TL;DR.** Variables in .env are available on the **server** via process.env . **Only** those prefixed NEXT_PUBLIC_ are **inlined into the client bundle** and exposed to the browser — so **never prefix secrets**. Next.js loads .env.local / .env.production etc. by convention. <rect class='d-box-mute

Q: How does client-side navigation work in Next.js (next/link and useRouter)?

**TL;DR.** next/link renders an anchor that does **client-side navigation** and **prefetches** the target route's code/data when it enters the viewport. useRouter() 's push / replace navigate **programmatically**. Both avoid full page reloads while keeping shared **layouts mounted**. <rect class='d-box-accent' x='2

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

**TL;DR.** In the App Router, **folders under app/ define URL segments** and a page.js (or .tsx ) makes that segment a publicly routable page. **Special files** ( layout , loading , error , route ) add behavior, and bracket folders like [id] create **dynamic** segments. <rect class='d-box-mut

Q: What is not-found.js in Next.js and how do you trigger a 404?

**TL;DR.** not-found.tsx renders the **404 UI** for a segment, and calling the ** notFound() ** function from a Server Component (e.g. when a record is missing) renders the nearest not-found boundary and returns a **404 status**. <text class='d-text' x='95' y='73'

Q: What is the difference between the /public folder and imported assets in Next.js?

**TL;DR.** Files in /public are served **as-is** from the root URL (e.g. /logo.png ) with **no processing** — good for robots.txt , favicons. **Imported assets** ( import img from './a.png' ) go through the **build pipeline**, get **hashed filenames** and optimization, and enable next/image features.

Q: How do sitemap.ts and robots.ts work in Next.js?

**TL;DR.** app/sitemap.ts exports a function returning your URLs (with lastModified , priority) and Next.js serves /sitemap.xml ; app/robots.ts returns rules and serves /robots.txt . Both can be **dynamic** (fetch routes from a DB) and are generated at build or on request. <rect class='d-box-accent' x='20'

Q: What is the route segment config in Next.js (dynamic, revalidate, runtime)?

**TL;DR.** You **export consts** from a layout / page / route to control its behavior: dynamic ( 'auto' | 'force-dynamic' | 'force-static' ), revalidate (ISR interval), runtime ( 'nodejs' | 'edge' ), fetchCache , and dynamicParams . They **override the defaults** for that segment. <svg class='iq-diagram' viewBox='0 0 460 150' role='img' aria-la

Q: How do you handle forms with Server Actions in Next.js (progressive enhancement)?

**TL;DR.** Pass a Server Action to a <form action={...}> ; it receives FormData and runs on the server. Because it works **without client JS**, forms are **progressively enhanced** — they submit even before hydration — and you pair it with useActionState for pending/error UI. <rect class='d-box-accent' x='20' y='52'

Q: What is the difference between Server Components and Client Components in Next.js?

**TL;DR.** **Server Components** render on the **server**, can access the backend directly, and ship **no JavaScript** to the browser — they're the **default** in the App Router. **Client Components** ( 'use client' ) run in the browser and enable **state, effects, and event handlers**. You compose them, pushing interactivity to the leaves.

Question 1

How do environment variables work in Next.js (the NEXT_PUBLIC_ prefix)?

Accepted Answer

**TL;DR.** Variables in .env are available on the **server** via process.env. **Only** those prefixed NEXT_PUBLIC_ are **inlined into the client bundle** and exposed to the browser — so **never prefix secrets**. Next.js loads .env.local/.env.production etc. by convention.

Question 2

How does client-side navigation work in Next.js (next/link and useRouter)?

Accepted Answer

**TL;DR.** next/link renders an anchor that does **client-side navigation** and **prefetches** the target route's code/data when it enters the viewport. useRouter()'s push/replace navigate **programmatically**. Both avoid full page reloads while keeping shared **layouts mounted**.

Question 3

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

Accepted Answer

**TL;DR.** In the App Router, **folders under app/ define URL segments** and a page.js (or .tsx) makes that segment a publicly routable page. **Special files** (layout, loading, error, route) add behavior, and bracket folders like [id] create **dynamic** segments.

Question 4

What is Next.js and what problems does it solve?

Accepted Answer

**TL;DR.** Next.js is a **React framework** that adds **server-side rendering, static generation, file-based routing, data fetching, bundling, and image/font optimization** on top of React — so you ship fast, SEO-friendly, full-stack apps without assembling all that infrastructure yourself.

Question 5

What is not-found.js in Next.js and how do you trigger a 404?

Accepted Answer

**TL;DR.** not-found.tsx renders the **404 UI** for a segment, and calling the **notFound()** function from a Server Component (e.g. when a record is missing) renders the nearest not-found boundary and returns a **404 status**.

Question 6

What is the difference between the /public folder and imported assets in Next.js?

Accepted Answer

**TL;DR.** Files in /public are served **as-is** from the root URL (e.g. /logo.png) with **no processing** — good for robots.txt, favicons. **Imported assets** (import img from './a.png') go through the **build pipeline**, get **hashed filenames** and optimization, and enable next/image features.

Question 7

How do sitemap.ts and robots.ts work in Next.js?

Accepted Answer

**TL;DR.** app/sitemap.ts exports a function returning your URLs (with lastModified, priority) and Next.js serves /sitemap.xml; app/robots.ts returns rules and serves /robots.txt. Both can be **dynamic** (fetch routes from a DB) and are generated at build or on request.

Question 8

What is the route segment config in Next.js (dynamic, revalidate, runtime)?

Accepted Answer

**TL;DR.** You **export consts** from a layout/page/route to control its behavior: dynamic ('auto'|'force-dynamic'|'force-static'), revalidate (ISR interval), runtime ('nodejs'|'edge'), fetchCache, and dynamicParams. They **override the defaults** for that segment.

Question 9

How do you handle forms with Server Actions in Next.js (progressive enhancement)?

Accepted Answer

**TL;DR.** Pass a Server Action to a

; it receives FormData and runs on the server. Because it works **without client JS**, forms are **progressively enhanced** — they submit even before hydration — and you pair it with useActionState for pending/error UI.

Question 10

What is the difference between Server Components and Client Components in Next.js?

Accepted Answer

**TL;DR.** **Server Components** render on the **server**, can access the backend directly, and ship **no JavaScript** to the browser — they're the **default** in the App Router. **Client Components** ('use client') run in the browser and enable **state, effects, and event handlers**. You compose them, pushing interactivity to the leaves.

Next.js Interview Library

Question Catalog

How do environment variables work in Next.js (the NEXT_PUBLIC_ prefix)?

How does client-side navigation work in Next.js (next/link and useRouter)?

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

What is Next.js and what problems does it solve?

What is not-found.js in Next.js and how do you trigger a 404?

What is the difference between the /public folder and imported assets in Next.js?

How do sitemap.ts and robots.ts work in Next.js?

What is the route segment config in Next.js (dynamic, revalidate, runtime)?

How do you handle forms with Server Actions in Next.js (progressive enhancement)?

What is the difference between Server Components and Client Components in Next.js?

What is generateStaticParams in Next.js and how does it enable SSG for dynamic routes?

What is next/script and what are its strategy options in Next.js?

How does Next.js decide between static and dynamic rendering at build time?

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

What is the Data Cache in Next.js and how do you opt out of it?

What is the difference between getServerSideProps/getStaticProps and App Router data fetching?

What makes a route dynamic in the Next.js App Router?

What are dynamic routes and catch-all segments in Next.js?

How do you analyze and reduce bundle size in Next.js?

How does fetch caching work in the Next.js App Router (force-cache, no-store, revalidate)?

How do you fetch data in Next.js Client Components (SWR, React Query, use)?

How do you revalidate data after a mutation in Next.js?

What are layouts and nested layouts in the Next.js App Router?

What is Middleware in Next.js and what can it do?

What is the difference between the App Router and the Pages Router?

How do you handle redirects and rewrites in Next.js?

How does next/image optimize images in Next.js?

How do Server Actions differ from Route Handlers in Next.js?

What is error.js in Next.js and how does error handling work in the App Router?

How does next/font work and why does it improve performance?

What is the difference between build-time and runtime environment variables in Next.js?

What is hydration in Next.js and what causes a hydration error?

What is Turbopack in Next.js and how does it compare to Webpack?

What is request memoization in Next.js?

What is next.config.js in Next.js and what are common configurations?

What is on-demand revalidation in Next.js (revalidatePath / revalidateTag)?

How do you handle loading and error states for data fetching in Next.js?

How do you read request data and return responses in a Next.js Route Handler?

What is prefetching in Next.js and how does next/link prefetch routes?

How does code splitting and next/dynamic work in Next.js?

What is JSON-LD structured data and how do you add it in Next.js?

What are the special files in the Next.js App Router (page, layout, loading, error)?

How does the Metadata API work in Next.js (static and generateMetadata)?

What are Route Handlers in Next.js and how do they differ from Pages API routes?

What are the rendering strategies in Next.js (SSR, SSG, ISR, CSR)?

What is ISR (Incremental Static Regeneration) in Next.js and how do you implement it?

How do you pass data from Server Components to Client Components in Next.js?

What are route groups in Next.js and how do you use them?

What is loading.js in Next.js and how does Suspense streaming work?

How do you fetch data in Next.js Server Components?

How do you deploy a Next.js app (Vercel vs self-hosted)?

What is the difference between layout.js and template.js in Next.js?

How does Next.js handle SEO compared to a client-rendered SPA?

What runtimes does Next.js support (Node.js vs Edge runtime)?

What is the 'use client' directive and when do you need it?

What is the output: 'standalone' build in Next.js and when do you use it?

How does Next.js handle CSS (CSS Modules, global, Tailwind, CSS-in-JS)?

How do you migrate from the Pages Router to the App Router in Next.js?

How do Server and Client Components compose in Next.js?

What are React Server Components and why does Next.js use them?

What changed about caching defaults in Next.js 15?

How do you handle instrumentation and observability in Next.js (instrumentation.ts)?

How do you do optimistic updates in Next.js (useOptimistic, useActionState)?

What are Server Actions in Next.js and how do they work?

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

What are parallel routes (@slot) in Next.js and when would you use them?

How do you handle authentication in Next.js?

What are the security considerations for Server Actions in Next.js?

What is the Router Cache in Next.js and what are its implications?

What are the caching layers in Next.js (Request Memoization, Data Cache, Full Route Cache, Router Cache)?

How do you implement dynamic Open Graph images in Next.js (ImageResponse)?

What is streaming SSR with Suspense in Next.js?

What are intercepting routes in Next.js and what are they used for?

What is the Full Route Cache in Next.js?

How do you internationalize (i18n) a Next.js App Router app?

Difficulty Distribution

Tested Topics

Study Guide