Изображения и шрифты в Next.js

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

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

ХарактеристикаОписание
Оптимизация изображенийИспользует<Image>компонент, поддерживает локальные и удалённые изображения, автоматически оптимизирует размер и скорость загрузки.
Оптимизация шрифтовИспользуетnext/fontмодуль, поддерживает Google Fonts и локальные шрифты, автоматически размещает и оптимизирует загрузку.
Управление статическими ресурсамиПоместите статические ресурсы вpublicкаталог, и получайте к ним доступ через/filenameнапрямую.

Управление статическими ресурсами

Next.js позволяет хранить статические ресурсы (такие как изображения, шрифты и т. д.) в каталоге public.

Доступ к этим ресурсам можно получить напрямую по /filename.

Пример структуры каталогов:

my-next-app/
├── app/
├── public/
│   ├── images/
│   │   └── logo.png
│   └── fonts/
│       └── my-font.woff2
├── package.json
└── next.config.js

public/images/logo.pngДоступ можно получить через/images/logo.png.

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

Next.js предоставляет<Image>компонент для оптимизации загрузки изображений. Он расширяет HTML<img>элемент и предоставляет следующие возможности:

  • Оптимизация размера: Автоматически предоставляет изображения правильного размера для разных устройств, поддерживает современные форматы изображений (например, WebP).

  • Визуальная стабильность: Предотвращает сдвиг макета во время загрузки изображения.

  • Быстрая загрузка: Использует нативную ленивую загрузку браузера, загружая только когда изображение попадает в область просмотра.

  • Гибкость ресурсов: Поддерживает изменение размера изображений по запросу, даже для удалённых изображений.

Использование<Image>Компоненты

fromnext/imageИмпортируйте<Image>компонент и используйте его внутри вашего компонента.

Пример

import Image from 'next/image';

export default function Page() {
  return <Image src="/images/logo.png" alt="Logo" width={500} height={300} />;
}

Локальные изображения

На локальные изображения можно напрямую ссылаться из каталога public.

Пример

import Image from 'next/image';
import profilePic from './me.png';

export default function Page() {
  return (
    <Image
      src={profilePic}
      alt="Изображение автора"
      // width и height автоматически берутся из файла изображения
      // blurDataURL и placeholder необязательны
    />
  );
}

Удалённые изображения

Для удалённых изображений необходимо вручную указывать width и height, чтобы избежать сдвига макета.

Пример

import Image from 'next/image';

export default function Page() {
  return (
    <Image
      src="https://s3.amazonaws.com/my-bucket/profile.png"
      alt="Изображение автора"
      width={500}
      height={500}
    />
  );
}

Настройка удалённых изображений

Настройте разрешённые домены удалённых изображений в next.config.js.

Пример

const nextConfig = {
  images: {
    remotePatterns: [
      {
        protocol: 'https',
        hostname: 's3.amazonaws.com',
        port: '',
        pathname: '/my-bucket/**',
      },
    ],
  },
};

export default nextConfig;

Оптимизация шрифтов

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

Использование Google Fonts

Импортируйте шрифты из next/font/google и применяйте их к HTML-элементам.

Пример

import { Geist } from 'next/font/google';

const geist = Geist({
  subsets: ['latin'],
});

export default function Layout({ children }) {
  return (
    <html lang="en" className={geist.className}>
      <body>{children}</body>
    </html>
  );
}

Если вы используете невариативные шрифты, необходимо указать weight:

Пример

import { Roboto } from 'next/font/google';

const roboto = Roboto({
  насыщенность: '400',
  subsets: ['latin'],
});

export default function Layout({ children }) {
  return (
    <html lang="en" className={roboto.className}>
      <body>{children}</body>
    </html>
  );
}

Использование локальных шрифтов

Импорт локальных файлов шрифтов из next/font/local.

Пример

import localFont from 'next/font/local';

const myFont = localFont({
  src: './my-font.woff2',
});

export default function Layout({ children }) {
  return (
    <html lang="en" className={myFont.className}>
      <body>{children}</body>
    </html>
  );
}

Если используется несколько файлов шрифтов:

Пример

const roboto = localFont({
  src: [
    {
      path: './Roboto-Regular.woff2',
      насыщенность: '400',
      style: 'normal',
    },
    {
      path: './Roboto-Italic.woff2',
      насыщенность: '400',
      style: 'italic',
    },
    {
      path: './Roboto-Bold.woff2',
      насыщенность: '700',
      style: 'normal',
    },
    {
      path: './Roboto-BoldItalic.woff2',
      насыщенность: '700',
      style: 'italic',
    },
  ],
});
Другие расширения