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

A layout.tsx wraps its segment **and all child segments** with shared UI (nav, sidebar) and **persists across navigation** without re-rendering or losing state. Layouts **nest** by folder hierarchy, so each level adds its own shell around the children below it. <text class='d-sub

Question 1

What are layouts in Next.js and how do nested layouts work?

Accepted Answer

**Target Audience:** Beginners preparing for Next.js interviews — assumes basic React (components, props, state).
**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 built with `next build`, served with `next start` and driven by a real Chromium browser.

## 1. Why This E

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 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 4

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 5

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 6

App Router 15 — why are params and searchParams now Promises?

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 7

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

Accepted Answer

A layout.tsx wraps its segment **and all child segments** with shared UI (nav, sidebar) and **persists across navigation** without re-rendering or losing state. Layouts **nest** by folder hierarchy, so each level adds its own shell around the children below it.

Question 8

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

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

How do View Transitions work with next/link transitionTypes in Next.js 16.2?

Accepted Answer

**Target Audience:** Frontend engineers preparing for Next.js interviews — assumes you know `<Link>` and basic CSS animations.
**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 (the `link` reference and the view transitions guide) and, in the **Verified** section, by driving a 16.4.2 lab in Chromium 141 with Playwright and recording every `doc

Question 10

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

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

NEXT.JSDECODED.

Easy

What are layouts in Next.js and how do nested layouts work?

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

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?

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

Medium

App Router 15 — why are params and searchParams now Promises?

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

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

How do View Transitions work with next/link transitionTypes in Next.js 16.2?

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

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 static export (output: 'export') in Next.js and what does it not support?

Hard

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

What changed about caching defaults in Next.js 15?

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

How do you handle authentication in Next.js?

What is the RSC payload and how does Next.js stream it to the browser?

What are Multi-Zones in Next.js and when would you split an app into zones?

Parallel routes (@slot) — how do you build a dashboard with independent slots?

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