Question 1

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

Accepted Answer

**Target Audience:** Frontend engineers preparing for Next.js interviews — assumes basic React and App Router familiarity.
**Difficulty:** Easy

> **How to read this doc:** Each idea is explained in plain language first, then tagged with `📌 Interview term:`. Every behaviour claim was checked against the Next.js docs shipped with the package (written on 16.3.4, re-reviewed against 16.4.2) and, in the **Verified** section, against real output from a build or a running server; each Verified block

Question 2

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

Accepted Answer

**Target Audience:** Frontend engineers preparing for Next.js interviews — assumes basic React and App Router familiarity.
**Difficulty:** Easy

> **How to read this doc:** Each idea is explained in plain language first, then tagged with `📌 Interview term:`. Every behaviour claim was checked against the Next.js 16.4.2 docs shipped with the package and, in the **Verified** section, against real output from a build, a running server or a real browser.

## 1. Why This Even Matters — A Story First

Question 3

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

Accepted Answer

**Target Audience:** Frontend engineers preparing for Next.js interviews — assumes basic React and App Router familiarity.
**Difficulty:** Easy

> **How to read this doc:** Each idea is explained in plain language first, then tagged with `📌 Interview term:`. Every behaviour claim was checked against the Next.js docs shipped with the package (written on 16.3.4, re-reviewed against 16.4.2) and, in the **Verified** section, against real output from a build or a running server; each Verified block

Question 4

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

Accepted Answer

**Target Audience:** Frontend engineers preparing for Next.js interviews — assumes basic React and App Router familiarity.
**Difficulty:** Easy

> **How to read this doc:** Each idea is explained in plain language first, then tagged with `📌 Interview term:`. Every behaviour claim was checked against the Next.js 16.4.2 docs shipped with the package and, in the **Verified** section, against real output from a build, a running server or a real browser.

## 1. Why This Even Matters — A Story First

Question 5

What is the next/form Form component and when would you use it?

Accepted Answer

**Target Audience:** Beginners preparing for Next.js interviews — assumes you know what an HTML form and a URL query string are.
**Difficulty:** Easy

> **How to read this doc:** Each idea is explained in plain language first, then tagged with `📌 Interview term:`. Every behaviour claim was checked against the Next.js 16.4.2 docs shipped with the package and, in the **Verified** section, against a lab app served by `next start` and submitted in a real Chromium browser with JavaScript on and off.

Question 6

What happens when you run next dev, next build and next start?

Accepted Answer

**Target Audience:** Beginners preparing for Next.js interviews — no prior Next.js knowledge assumed.
**Difficulty:** Easy

> **How to read this doc:** Each idea is explained in plain language first, then tagged with `📌 Interview term:`. Every behaviour claim was checked against the Next.js 16.4.2 docs shipped with the package and, in the **Verified** section, against a real `create-next-app@16.4.2` project run under all three commands and probed with `curl`.

## 1. Why This Even Matters — A St

Question 7

How do you read the current URL in a Next.js Client Component (usePathname, useSearchParams, useParams)?

Accepted Answer

**Target Audience:** Beginners preparing for Next.js interviews — assumes basic React hooks and the idea of Server vs Client Components.
**Difficulty:** Easy

> **How to read this doc:** Each idea is explained in plain language first, then tagged with `📌 Interview term:`. Every behaviour claim was checked against the Next.js 16.4.2 docs shipped with the package and, in the **Verified** section, against lab builds, `curl` and a real Chromium browser.

## 1. Why This Even Matters — A Story First

Question 8

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

Accepted Answer

**Target Audience:** Frontend engineers preparing for Next.js interviews — assumes basic React and App Router familiarity.
**Difficulty:** Medium

> **How to read this doc:** Each idea is explained in plain language first, then tagged with `📌 Interview term:`. Every behaviour claim was checked against the Next.js docs shipped with the package (written on 16.3.4, re-reviewed against 16.4.2) and, in the **Verified** section, against real output from a build or a running server; each Verified bloc

Question 9

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

Accepted Answer

**Target Audience:** Frontend engineers preparing for Next.js interviews — assumes basic React and App Router familiarity.
**Difficulty:** Medium

> **How to read this doc:** Each idea is explained in plain language first, then tagged with `📌 Interview term:`. Every behaviour claim was checked against the Next.js docs shipped with the package (written on 16.3.4, re-reviewed against 16.4.2) and, in the **Verified** section, against real output from a build or a running server; each Verified bloc

Question 10

What is Draft Mode in Next.js and how does it work with a headless CMS?

Accepted Answer

**Target Audience:** Frontend engineers preparing for Next.js interviews — assumes basic React and App Router familiarity.
**Difficulty:** Medium

> **How to read this doc:** Each idea is explained in plain language first, then tagged with `📌 Interview term:`. Every behaviour claim was checked against the Next.js 16.4.2 docs shipped with the package and, in the **Verified** section, against real output from a build, a running server or a real Chromium browser. **No real CMS was used:** the lab

NEXT.JSDECODED.

Easy

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)?

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 next/form Form component and when would you use it?

What happens when you run next dev, next build and next start?

How do you read the current URL in a Next.js Client Component (usePathname, useSearchParams, useParams)?

Medium

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 Draft Mode in Next.js and how does it work with a headless CMS?

How do you implement search, filtering and pagination with URL search params in the App Router?

Server Components and external packages — what does `serverComponentsExternalPackages` do?

What is proxy.ts in Next.js 16 and how do you migrate from middleware.ts?

How do you read cookies and headers in Next.js (cookies(), headers())?

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

Hard

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?

Observability with OpenTelemetry in Next 15 — how is OTEL wired?

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?

How do you build a multi-tenant Next.js app with subdomain routing?