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

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

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

next/font and next/image — how do they combine for Core Web Vitals?

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 5

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 6

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 7

Turbopack — why is it 10x faster than Webpack in Next.js 15?

Accepted Answer

Turbopack is Next.js's Rust-based incremental bundler — 5-10x faster cold start and HMR than Webpack by caching at the module-function level instead of rebuilding whole bundles.

Question 8

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 9

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 10

How do you create a new Next.js app, and what is in the project structure?

Accepted Answer

**Target Audience:** Beginners preparing for Next.js interviews — no prior Next.js knowledge assumed, basic React helps.
**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 run of `create-next-app@16.4.2`, `next build` and `next start` in a lab.

## 1. Why This Even Matters

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

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

next/font and next/image — how do they combine for Core Web Vitals?

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

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

Turbopack — why is it 10x faster than Webpack in Next.js 15?

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

Medium

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?

What changed for next/image defaults in Next.js 16?

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

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?

Hard

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

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

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?

What are Cache Components in Next.js 16 and how does the 'use cache' directive work?

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

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