NextJS: Optimize Fonts & Images for Better Performance

Learning NextJS. 3.Optimizing Fonts & Images

Optimization of fonts (using next/font) and images (using the Image component from next/image).
Switching images depending on the current size of the browser window (viewport): one image for desktop computers, another for mobile devices.

The presentation can be downloaded here:
https://dmpsy.club/references/NextJS/lesson_003_optimize_fonts_images_eng.pdf

Donate the author: https://www.donationalerts.com/r/dmitrymak

Timing

0:00:00 Introduction
0:00:41 Target audience
0:01:12 Agenda
0:02:46 Why optimize fonts (with next/font)
0:04:03 Adding a primary font
0:07:54 Adding a secondary font
0:10:40 Why optimize images (with next/image)
0:13:12 Adding the Image component (hero-desktop.png)
0:15:05 Adding the Image component (hero-mobile.png)
0:18:45 Useful links
0:19:45 Session Summary
0:20:30 Closing Comments