Картинки и шрифты в NextJS

В данном разделе учебника речь пойдет о картинках и шрифтах на сайте, созданном с помощью NextJS. Речь не о том, как нарисовать макет или подобрать гарнитуру, а о том, как эти ресурсы попадают к пользователю и влияют на скорость и стабильность страницы.

Привычный тег img кажется простым: указали адрес файла - и картинка на экране. На практике браузер часто узнает размеры изображения только после загрузки. Пока файл еще качается, место под картинку может быть не зарезервировано, и когда картинка появится, блоки текста и кнопки сдвинутся. Пользователь может уже читать абзац или целиться в ссылку - и внезапно все прыгает. Такое поведение называют сдвигом верстки; он раздражает людей и ухудшает показатели качества страницы в глазах поисковых систем.

Шрифты создают похожую, но другую проблему. Если подключить начертание с чужого сайта через обычную ссылку в CSS, браузер сначала покажет текст запасным шрифтом, а после загрузки файла шрифта перерисует строки уже нужным начертанием. Текст может заметно измениться по ширине и высоте - снова сдвиг. Кроме того, каждый такой запрос к внешнему хосту задерживает первую отрисовку: страница дольше остается без финального вида, особенно на медленном канале.

NextJS встроил отдельные средства именно для картинок и для шрифтов. Они встроены в фреймворк и рассчитаны на типичный проект на App Router: картинки можно отдавать через оптимизирующий компонент, шрифты - подключать так, чтобы браузер получал их вместе с приложением без лишних сетевых скачков к сторонним CDN. Цель одна - стабильная верстка и более предсказуемая первая отрисовка без ручной возни с десятком мелких настроек.