Работа с изображениями в Next js с помощью компонента Image

🔰 Введение

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

Чтобы начать его использовать, достаточно импортировать компонент в ваш код:

import Image from "next/image"

1. Отображение локальных изображений из папки public

Самый простой способ добавить изображение на страницу — разместить его в папке public в корне вашего проекта.

Next.js настроен так, что он автоматически ищет файлы в этой директории. Вам нужно лишь указать путь к файлу в атрибуте src, начиная его со слэша (/).

Пример: Если у вас есть файл logo.svg в папке public, код будет выглядеть так:

<Image src="/logo.svg" />

2. Обязательные атрибуты: alt, width и height

🏷 Атрибут alt

Атрибут alt — это альтернативный текст для изображения. Он обязателен и выполняет две важные функции:

1. Отображает текстовое описание, если картинка по какой-то причине не загрузилась.
2. Используется программами для чтения с экрана, что делает сайт доступным для людей с ограниченными возможностями.

🎨 Особый случай: декоративные изображения

Если изображение является чисто декоративным (например, фоновый узор) и не несёт смысловой нагрузки, можно оставить атрибут alt пустым. Однако сам атрибут должен присутствовать — иначе Next.js выдаст ошибку.

// Правильно для декоративных изображений
<Image src="/pattern.png" alt="IT-Incubator`s logo" width={50} height={50} />

📐 Атрибуты width и height

Когда вы используете изображение из папки public, Next.js на этапе сборки не знает его исходных размеров. Чтобы предотвратить «прыжки» контента во время загрузки страницы (эффект Cumulative Layout Shift — CLS), в Next.js действует строгое правило:

➡️ Вы обязаны указывать точные размеры изображения в пикселях через атрибуты width и height.

Это позволяет браузеру заранее зарезервировать место под картинку и обеспечивает стабильность макета.

✅ Полный и корректный пример:

<Image src="/logo.svg" alt="Логотип IT-Incubator" width={137} height={36} />

3. Прямой импорт изображения в компонент

Второй способ работы с локальными изображениями — импортировать файл напрямую в компонент, как если бы это был обычный JavaScript-модуль.

Этот метод используется для изображений, которые находятся внутри папки src (например, src/assets или рядом с компонентами), а не в public.

📁 Пример структуры проекта

🔧 Использование в компоненте

В файле Header.jsx вы импортируете изображение с помощью относительного пути:

import logo from "../../public/logo.svg"
;<Image src={logo} alt="Логотип IT-Incubator" />

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

4.Работа с внешними изображениями по URL

Для отображения изображений из внешних источников (например, с другого сайта или CDN) достаточно передать полный URL в атрибут src.

При этом, как и при использовании файлов из папки public, обязательно указывать width и height.

🔒 Безопасность внешних изображений

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

🛠 Пошаговая инструкция

1. Откройте файл next.config.js в корне проекта.
2. Добавьте объект images с полем remotePatterns.
3. Укажите protocol, hostname и при необходимости pathname (можно с маской **).

📄 Пример

import type {NextConfig} from 'next'
const nextConfig = {
  images: {
    remotePatterns: [
      {
        protocol: "https",
        hostname: "images.example.com", // Замените на домен, которому доверяете
        pathname: "/assets/**", // Разрешает все изображения из папки /assets
      },
    ],
  },
}
 
module.exports = nextConfig

5. 🧾 Итоги: Ключевые выводы

Чтобы эффективно работать с изображениями в Next.js, запомните следующие правила:

• ⚡ Всегда используйте компонент <Image> из next/image — он автоматически оптимизирует изображения.
• 📝 Атрибут alt обязателен всегда. Если картинка декоративная — оставляйте alt="", но не удаляйте атрибут.
• 📐 Для картинок из public или внешних URL всегда указывайте width и height.
• 📦 При прямом импорте изображения в компонент (import img from './...') размеры можно не указывать — Next.js определяет их сам.
• 🌍 Для внешних изображений обязательно настройте доверенные домены в next.config.js через images.remotePatterns.

Эти правила помогут вам получать максимум производительности и безопасности при работе с изображениями в Next.js.