Question 1

next/font — how does it eliminate layout shift and external requests?

Accepted Answer

`next/font` self-hosts fonts at build, inlines `size-adjust` fallback metrics and subsets, removing Google Fonts requests and CLS.

Question 2

next/font and next/image — how do they combine for Core Web Vitals?

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 does next/font work and why does it improve performance?

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

next/font — how does it eliminate layout shift and external requests?

next/font and next/image — how do they combine for Core Web Vitals?

Medium

How does next/font work and why does it improve performance?