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

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

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 5

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

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

What makes a route dynamic 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:** 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

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 10

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.

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

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

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

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?

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

What is request memoization in Next.js?

How do you organize a large Next.js App Router project (colocation, private folders, route groups)?

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

Hard

What changed about caching defaults in Next.js 15?

How do you handle authentication in Next.js?

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

How does prefetching and navigation caching work in Next.js 16?