Built-in optimizations
next/link
- Client-side navigation: only the changed segments are rendered, shared layouts keep their state.
- Prefetching in production when a link enters the viewport: for static routes the whole route, for dynamic ones the shell down to the nearest
loading.tsx. prefetch={false}turns it off for rarely used links.
next/image
tsx
import Image from 'next/image';
<Image src={hero} alt="Product" priority sizes="(min-width: 768px) 50vw, 100vw" />- Serves modern formats (WebP/AVIF) and resized versions for each screen via
srcset. - Requires
width/height(orfill) so the space is reserved and there is no layout shift (CLS). - Lazy loads images outside the viewport;
prioritypreloads the LCP image.
next/font
tsx
import { Inter } from 'next/font/google';
const inter = Inter({ subsets: ['latin'], display: 'swap' });- Fonts are downloaded at build time and self-hosted: no requests to Google from the browser.
- Generates a fallback font with adjusted metrics, so text doesn't jump when the font loads.
Summary
| Component | Improves |
|---|---|
next/link | Navigation speed (INP, perceived speed) |
next/image | LCP, CLS, traffic |
next/font | CLS, privacy, fewer requests |
updated
did you know it?