Optimizing Fonts and Images (Next.js)

#webdev #nextjs

You can visit my GitHub repo to follow along with me.

git commit -m "Add fonts"
git commit -m "Add images"

Custom fonts can affect performance if the font files need to be fetched and loaded.

Cumulative Layout Shift is a measure of website performance.

The Next.js next/font module automatically optimizes fonts. It downloads font files at build time and hosts them with static assets so there are no additional network requests for fonts.

Adding a primary font

Use /app/ui/fonts.ts to keep the fonts that will be used.

Adding Inter to the <body> element, applies the font throughout. The Tailwind antialiased class smooths out the font.

Adding a secondary font

If you're unsure what weight options to pass to a font, check the TypeScript errors in your code editor.

Visit Google Fonts and search for Lusitana to see what options are available.

See the documentation for adding multiple fonts and the full list of options.

Optimize Images

Next.js can serve static assets, like images, under the top-level /public folder. Files inside /public can be referenced in your application.

With regular HTML, you manually:

Ensure your image is responsive on different screen sizes.
Specify image sizes for different devices.
Prevent layout shift as the images load.
Lazy load images that are outside the user's viewport.

The next/image component automatically optimizes your images. The <Image> Component is an extension of the HTML <img> tag, and comes with automatic image optimization, such as:

Preventing layout shift automatically when images are loading.
Resizing images to avoid shipping large images to devices with a smaller viewport.
Lazy loading images by default (images load as they enter the viewport).
Serving images in modern formats, like WebP and AVIF, when the browser supports it.

Good practice: