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

next/link **prefetches** the linked route's JS and (for static routes) data when the link is **visible/hovered**, so navigation feels **instant**. Prefetch can be disabled with prefetch={false} ; in **dev** it's off. It populates the client **Router Cache** ahead of time. <rect class='d-box-accent' x='20' y='52' width='130' height=

Question 1

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 2

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 3

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

Question 4

How do you test a Next.js app (unit tests, Server Components, end-to-end)?

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: every test shown here was run, with vitest 5.0.5, @testing-library/react 16.3.3, jsdom 29.1.

Question 5

PPR vs ISR vs SSR — how do you pick the rendering strategy in Next 15?

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 6

How do you show navigation loading feedback with useLinkStatus 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 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.

## 1. Why This Even Matters — A S

Question 7

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

Accepted Answer

next/link **prefetches** the linked route's JS and (for static routes) data when the link is **visible/hovered**, so navigation feels **instant**. Prefetch can be disabled with prefetch={false}; in **dev** it's off. It populates the client **Router Cache** ahead of time.

Question 8

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

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 browser.

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

Question 9

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

Accepted Answer

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

> **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 10

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

Accepted Answer

**Target Audience:** Frontend engineers preparing for Next.js interviews — assumes you know what a Server Component is.
**Difficulty:** Hard

> **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 in `node_modules/next/dist/docs/` and, in the **Verified** section, against real output from `next build`, `next start` and `curl` in a 16.4.2 lab.

## 1. Why This Even

NEXT.JSDECODED.

Easy

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

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

Medium

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

How do you test a Next.js app (unit tests, Server Components, end-to-end)?

PPR vs ISR vs SSR — how do you pick the rendering strategy in Next 15?

How do you show navigation loading feedback with useLinkStatus in Next.js?

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

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

Hard

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

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 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 does prefetching and navigation caching work in Next.js 16?

How do you set security headers and a nonce-based Content Security Policy in Next.js?