Картинка в NextJS

Давайте выведем локальную картинку через компонент Image из пакета next/image. Файл кладут в папку public в корне проекта; в атрибуте src указывают путь от корня сайта, начиная со слэша, например /photo.jpg. Обязательно задают ширину, высоту и текстовое описание alt - так браузер резервирует место под картинку и не сдвигает верстку после загрузки.

Допустим, файл photo.jpg лежит в public. Выведем его на странице так:

import Image from 'next/image';

export default function Home() {
	return (
		<Image
			src="/photo.jpg"
			alt="City skyline at sunset"
			width={800}
			height={600}
		/>
	);
}

Положите файл изображения в папку public проекта.

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