Картинки и next/image

Компонент Image из next/image заменяет обычный тег img. Он сам уменьшает картинку под размер экрана, переводит её в лёгкий формат вроде WebP, загружает только когда она близко к видимой области и резервирует место, чтобы страница не «прыгала» при загрузке.

Картинка из public

Положите файл cover.jpg в папку public/. Файлы оттуда доступны от корня сайта: /cover.jpg.

// app/about/page.tsx
import Image from 'next/image';
 
export default function AboutPage() {
  return (
    <main>
      <h1>О блоге</h1>
      <Image src="/cover.jpg" alt="Рабочее место Анны" width={800} height={400} />
    </main>
  );
}

Свойства width и height обязательны: по ним браузер заранее знает пропорции. Откройте /about и посмотрите адрес картинки в инструментах разработчика — он начинается с /_next/image, это уже обработанная версия.

Импорт файла

Картинку можно импортировать как модуль. Тогда размеры Next.js узнает сам:

// app/about/page.tsx (фрагмент)
import Image from 'next/image';
import cover from './cover.jpg';
 
<Image src={cover} alt="Рабочее место Анны" placeholder="blur" />;

Здесь cover.jpg лежит рядом со страницей. placeholder="blur" показывает размытую копию, пока загружается оригинал.

Картинки с другого сайта

Для внешних адресов нужно разрешить домен в next.config.ts:

// next.config.ts
import type { NextConfig } from 'next';
 
const nextConfig: NextConfig = {
  images: {
    remotePatterns: [{ protocol: 'https', hostname: 'images.example.com' }],
  },
};
 
export default nextConfig;

После перезапуска npm run dev можно писать src="https://images.example.com/post-1.jpg" вместе с width и height.

Заполнить блок

Когда размеры заранее неизвестны, например у обложки статьи на всю ширину, используют fill. Картинка растягивается по родителю, которому нужны position: relative и высота:

// app/posts/[slug]/page.tsx (фрагмент)
<div style={{ position: 'relative', height: 300 }}>
  <Image src="/cover.jpg" alt="Обложка" fill sizes="100vw" style={{ objectFit: 'cover' }} />
</div>

sizes подсказывает, какую ширину займёт картинка на экране, чтобы браузер выбрал подходящий вариант.

Главная картинка экрана

Для крупной картинки в самом верху страницы добавьте свойство preload: Next.js начнёт загружать её сразу, ещё до разбора страницы. В Next.js 16 оно заменило устаревшее свойство priority, которое встречается в старых примерах. Ставьте preload только одной картинке на странице.

Частая ошибка

Указать внешний адрес без настройки remotePatterns. Страница упадёт с ошибкой «hostname is not configured under images in your next.config». Добавьте домен в next.config.ts и перезапустите сервер разработки — файл настроек читается только при запуске.