✳flâneur — a map of the web's best reading

Learn Next.js: Optimizing Fonts and Images | Next.js

nextjs.org · 1,298 words · saved by 1 readers

In the previous chapter, you learned how to style your Next.js application. Let’s continue working on your home page by adding a custom fonts and a hero image. In this chapter... Here are the topics we’ll cover How to add custom fonts with next/font. How to add images with next/image. How fonts and images are optimized in Next.js. Fonts play a significant role in the design of a website, but using custom fonts in your project can affect performance if the font files need to be fetched and loaded. Cumulative Layout Shift is a metric used by Google to evaluate the performance and user experience of a website. With fonts, layout shift happens when the browser initially renders text in a fallback or system font and then swaps it out for a custom font once it has loaded. This swap can cause the text size, spacing, or layout to change, shifting elements around it. Next.js automatically optimizes fonts in the application when you use the next/font module. It does so by downloading font files

3 Chapter 3 Optimizing Fonts and Images In the previous chapter, you learned how to style your Next.js application. Let's continue working on your home page by adding a custom font and a hero image. In this chapter... Here are the topics we'll cover How to add custom fonts with next/font . How to add images with next/image . How fonts and images are optimized in Next.js. Why optimize fonts? Fonts play a significant role in the design of a website, but using custom fonts in your project can affect performance if the font files need to be fetched and loaded. Cumulative Layout Shift is a metric u

Explore this link on the map →

related reading