Study notes · 10% of the exam

Performance, Images, Fonts and Metadata

Use Next.js's built-in components to keep pages fast: next/image for responsive, lazy and layout-stable images, next/font for self-hosted fonts with no layout shift, next/script for third-party code, and the Metadata API for SEO, while keeping client bundles small.

Key points

1
next/image needs width and height (or fill, or a static import) to reserve space. It lazy-loads by default, and in Next.js 16 preload replaces the deprecated priority.
2
Without sizes, a fixed-width image gets a 1x/2x srcset rounded up from the size list. fill without sizes assumes 100vw, so always pass sizes for images narrower than the viewport.
3
The browser picks the smallest srcset candidate at least as wide as slot width × DPR; work this out to check what you really ship.
4
Next.js 16 image defaults: qualities: [75], minimumCacheTTL of 4 hours, maximumRedirects of 3, local IPs blocked, and query-string local images need localPatterns.search.
5
next/font downloads and self-hosts fonts at build time (no requests to Google). display defaults to swap, fallbacks are size-adjusted, and fonts are preloaded only on the routes of the file that calls them.
6
next/script defaults to afterInteractive. beforeInteractive must be in a root layout and runs once per document; onLoad/onReady need a Client Component.
7
Metadata is evaluated root to page and merged shallowly. title.template applies to child segments only, needs a default, and relative URLs need metadataBase.

Common traps

Overriding openGraph in a page replaces the whole object, so the root layout's description and images disappear.
Putting 'use client' on a root layout ships all its imports to the browser, and the layout can no longer export metadata.
Global CSS imported in one route isn't removed on client navigation, so its rules leak into later routes.

Read the source

Test yourself on Performance, Images, Fonts and Metadata

Ten questions, with the answer and explanation after each one.