Изображения

Как подключать изображения через Next.js Image в проекте.

Назначение

Изображения рендерятся через компонент Image из next/image. Это сохраняет единый API для размеров, alt, lazy-loading и priority, даже если оптимизация изображений отключена.

В проекте оптимизация Next.js Image отключается через unoptimized, чтобы сборка и рантайм не зависели от встроенного image optimizer.

Настройка

Отключение оптимизации задаётся глобально в next.config.ts:

import type { NextConfig } from 'next'

const nextConfig: NextConfig = {
  images: {
    unoptimized: true,
  },
}

export default nextConfig

После этого unoptimized не нужно повторять на каждом Image.

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

Статические изображения, доступные по URL, размещаются в public/:

public/
└── images/
    └── user-avatar.png

import Image from 'next/image'

export const UserAvatar = () => {
  return (
    <Image
      src="/images/user-avatar.png"
      alt="Аватар пользователя"
      width={96}
      height={96}
    />
  )
}

Правила

• Использовать Image из next/image, не обычный <img>.
• Для контентных изображений всегда писать осмысленный alt.
• Для декоративных изображений использовать alt="".
• Указывать width и height, если изображение не использует fill.
• При fill задавать sizes и контролировать размеры родителя стилями.
• priority ставить только для изображений первого экрана.
• SVG-иконки не оформлять как изображения — для них используется раздел SVG-спрайты.

Пример с fill

import Image from 'next/image'
import styles from '../styles/article-card-cover.module.css'

export const ArticleCardCover = () => {
  return (
    <div className={styles.root}>
      <Image
        src="/images/article-cover.jpg"
        alt="Обложка статьи"
        fill
        sizes="(min-width: 768px) 33vw, 100vw"
      />
    </div>
  )
}

.root {
  position: relative;
  aspect-ratio: 16 / 9;
  overflow: hidden;
}