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

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 2

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 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 proxy.ts in Next.js 16 and how do you migrate from middleware.ts?

Accepted Answer

**Target Audience:** Frontend engineers preparing for Next.js interviews — assumes you know what an HTTP redirect and rewrite are.
**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 (`file-conventions/proxy`, `middleware`, the version 16 guide) and, in the **Verified** section, against `next build`, `next start` and `curl` in a 16.4.2 lab.

##

Question 5

What are dynamic routes and catch-all segments 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 browser.

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

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 Middleware in Next.js and what can it do?

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

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

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

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

NEXT.JSDECODED.

Easy

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?

Medium

What is proxy.ts in Next.js 16 and how do you migrate from middleware.ts?

What are dynamic routes and catch-all segments in Next.js?

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

What is Middleware in Next.js and what can it do?

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

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

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

How do you build a multi-tenant Next.js app with subdomain routing?

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

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

What are intercepting routes in Next.js and what are they used for?

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

How do you internationalize (i18n) a Next.js App Router app?