App Router: Оптимизация шрифтов и изображений

В предыдущей главе вы узнали, как стилизовать приложение Next.js. Давайте продолжим работу над домашней страницей, добавив пользовательский шрифт и изображение-герой.

Зачем оптимизировать шрифты?

Шрифты играют важную роль в дизайне сайта, но использование пользовательских шрифтов может повлиять на производительность, если файлы шрифтов необходимо загружать.

Cumulative Layout Shift — это метрика, используемая Google для оценки производительности и пользовательского опыта сайта. В случае со шрифтами сдвиг макета происходит, когда браузер сначала отображает текст с запасным или системным шрифтом, а затем заменяет его на пользовательский шрифт после загрузки. Эта замена может привести к изменению размера текста, интервалов или макета, что сдвигает окружающие элементы.

Макет интерфейса, показывающий первоначальную загрузку страницы, за которой следует сдвиг макета при загрузке пользовательского шрифта.

Next.js автоматически оптимизирует шрифты в приложении при использовании модуля next/font. Он загружает файлы шрифтов во время сборки и размещает их вместе с другими статическими ресурсами. Это означает, что при посещении вашего приложения пользователем не происходит дополнительных сетевых запросов для шрифтов, что могло бы повлиять на производительность.

Добавление основного шрифта

Давайте добавим пользовательский шрифт Google в ваше приложение, чтобы увидеть, как это работает.

В папке /app/ui создайте новый файл fonts.ts. Вы будете использовать этот файл для хранения шрифтов, которые будут применяться во всем приложении.

Импортируйте шрифт Inter из модуля next/font/google — это будет ваш основной шрифт. Затем укажите, какой поднабор вы хотите загрузить. В данном случае это 'latin':

/app/ui/fonts.ts

import { Inter } from 'next/font/google';
 
export const inter = Inter({ subsets: ['latin'] });

Наконец, добавьте шрифт к элементу <body> в /app/layout.tsx:

/app/layout.tsx

import '@/app/ui/global.css';
import { inter } from '@/app/ui/fonts';
 
export default function RootLayout({
  children,
}: {
  children: React.ReactNode;
}) {
  return (
    <html lang="en">
      <body className={`${inter.className} antialiased`}>{children}</body>
    </html>
  );
}

Добавив Inter к элементу <body>, вы примените шрифт ко всему приложению. Здесь также добавлен класс Tailwind antialiased, который сглаживает шрифт. Использование этого класса не обязательно, но оно добавляет приятный штрих.

Откройте браузер, откройте инструменты разработчика и выберите элемент body. Вы должны увидеть, что теперь применяются Inter и Inter_Fallback в стилях.

Практика: Добавление дополнительного шрифта

Вы также можете добавлять шрифты к конкретным элементам вашего приложения.

Теперь ваша очередь! В файле fonts.ts импортируйте дополнительный шрифт Lusitana и примените его к элементу <p> в вашем файле /app/page.tsx. Помимо указания поднабора, как вы делали ранее, также укажите различные начертания шрифта. Например, 400 (обычное) и 700 (жирное).

Когда будете готовы, разверните сниппет кода ниже, чтобы увидеть решение.

Подсказки:

Если вы не уверены, какие начертания можно передать шрифту, проверьте ошибки TypeScript в вашем редакторе кода.

Посетите сайт Google Fonts и найдите Lusitana, чтобы увидеть доступные варианты.

Ознакомьтесь с документацией по добавлению нескольких шрифтов и полным списком опций.

Наконец, компонент <AcmeLogo /> также использует Lusitana. Он был закомментирован, чтобы избежать ошибок, теперь вы можете раскомментировать его:

/app/page.tsx

// ...
 
export default function Page() {
  return (
    <main className="flex min-h-screen flex-col p-6">
      <div className="flex h-20 shrink-0 items-end rounded-lg bg-blue-500 p-4 md:h-52">
        <AcmeLogo />
        {/* ... */}
      </div>
    </main>
  );
}

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

Зачем оптимизировать изображения?

Next.js может обслуживать статические ресурсы, такие как изображения, в корневой папке /public. Файлы внутри /public можно ссылаться в вашем приложении.

С обычным HTML вы бы добавили изображение следующим образом:

<img
  src="/hero.png"
  alt="Скриншоты проекта дашборда, показывающие десктопную версию"
/>

Однако это означает, что вам нужно вручную:

Обеспечить адаптивность изображения для разных размеров экрана.
Указать размеры изображения для разных устройств.
Предотвратить сдвиг макета при загрузке изображений.
Отложить загрузку изображений, находящихся вне области просмотра пользователя.

Оптимизация изображений — это обширная тема в веб-разработке, которая сама по себе может считаться специализацией. Вместо ручной реализации этих оптимизаций вы можете использовать компонент next/image для автоматической оптимизации ваших изображений.

Компонент `<Image>`

Компонент <Image> является расширением HTML-тега <img> и включает автоматическую оптимизацию изображений, такую как:

Автоматическое предотвращение сдвига макета при загрузке изображений.
Изменение размера изображений, чтобы избежать отправки больших изображений на устройства с меньшим экраном.
Отложенная загрузка изображений по умолчанию (изображения загружаются при попадании в область просмотра).
Обслуживание изображений в современных форматах, таких как WebP и AVIF, если браузер их поддерживает.

Добавление десктопного изображения-героя

Давайте используем компонент <Image>. Если вы заглянете в папку /public, то увидите два изображения: hero-desktop.png и hero-mobile.png. Эти два изображения совершенно разные, и они будут отображаться в зависимости от того, использует ли пользователь десктоп или мобильное устройство.

В вашем файле /app/page.tsx импортируйте компонент из next/image. Затем добавьте изображение под комментарием:

/app/page.tsx

import AcmeLogo from '@/app/ui/acme-logo';
import { ArrowRightIcon } from '@heroicons/react/24/outline';
import Link from 'next/link';
import { lusitana } from '@/app/ui/fonts';
import Image from 'next/image';
 
export default function Page() {
  return (
    // ...
    <div className="flex items-center justify-center p-6 md:w-3/5 md:px-28 md:py-12">
      {/* Добавьте изображения-герои здесь */}
      <Image
        src="/hero-desktop.png"
        width={1000}
        height={760}
        className="hidden md:block"
        alt="Скриншоты проекта дашборда, показывающие десктопную версию"
      />
    </div>
    //...
  );
}

Здесь вы устанавливаете width в 1000 и height в 760 пикселей. Хорошей практикой является указание width и height для изображений, чтобы избежать сдвига макета. Эти значения должны соответствовать соотношению сторон исходного изображения. Они не определяют размер отображения изображения, а используются для понимания соотношения сторон.

Вы также заметите класс hidden, который удаляет изображение из DOM на мобильных экранах, и md:block, который показывает изображение на десктопных экранах.

Теперь ваша домашняя страница должна выглядеть так:

Стилизованная домашняя страница с пользовательским шрифтом и изображением-героем

Практика: Добавление мобильного изображения-героя

Теперь ваша очередь! Под только что добавленным изображением добавьте еще один компонент <Image> для hero-mobile.png.

Изображение должно иметь width 560 и height 620 пикселей.
Оно должно отображаться на мобильных экранах и скрываться на десктопных — вы можете использовать инструменты разработчика, чтобы проверить, правильно ли меняются изображения для десктопа и мобильных устройств.

Когда будете готовы, разверните сниппет кода ниже, чтобы увидеть решение.

Отлично! Теперь ваша домашняя страница имеет пользовательский шрифт и изображения-герои.

Оптимизация шрифтов и изображений