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

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

Question 4

How do you implement search, filtering and pagination with URL search params 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 Chromium browser.

## 1. Why This Even Matters — A S

Question 5

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 6

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 7

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 8

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

Question 9

What are the special files in the Next.js App Router (page, layout, loading, error)?

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 Route Handlers in Next.js and how do they differ from Pages API routes?

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

NEXT.JSDECODED.

Easy

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

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

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

Medium

How do you implement search, filtering and pagination with URL search params in the 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 are the special files in the Next.js App Router (page, layout, loading, error)?

What are Route Handlers in Next.js and how do they differ from Pages API routes?

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

Hard

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

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