Next.jsmedium

What does `next/font` solve and how does it reduce layout shift (CLS)?

Answer

`next/font` helps you load fonts in an optimized way (self-hosting, automatic CSS, optional subsetting and preloading). It reduces CLS by making font loading more predictable and avoiding late “font swap” surprises that change text metrics.

Related questions

Next.js

App Router data fetching: what do `cache: 'no-store'` and `revalidate` change?

#nextjs#fetch#cache

Next.js

Static vs dynamic rendering in the App Router: what makes a route dynamic?

#nextjs#rendering#static

Next.js

`next/link` prefetching: what does it do and how can you control it?

#nextjs#link#prefetch

Next.js

Middleware in Next.js: what is it good for and what are its limitations?

#nextjs#middleware#edge

Next.js

Route Handlers in the App Router: how do you define them and what are they used for?

#nextjs#route-handlers#api

Next.js

Cache invalidation: what do `revalidatePath` and `revalidateTag` do?

#nextjs#cache#revalidate