Картинка с другого адреса в NextJS

Давайте выведем картинку, которая лежит на другом сайте. Компонент Image по умолчанию не принимает произвольные адреса: фреймворк должен знать, с каких хостов можно оптимизировать файлы. Список задают в next.config.mjs в ключе images.remotePatterns, указывая протокол https и имя хоста. Допустим, файлы лежат на example.com - добавим настройку:

let nextConfig = {
	images: {
		remotePatterns: [
			{
				protocol: 'https',
				hostname: 'example.com',
			},
		],
	},
};

export default nextConfig;

После перезапуска сервера разработки можно вывести картинку с полным https-адресом этого хоста:

import Image from 'next/image';

export default function Home() {
	return (
		<Image
			src="https://example.com/photo.jpg"
			alt="Sample photo from remote host"
			width={800}
			height={600}
		/>
	);
}

Разрешите в конфиге проекта загрузку изображений с выбранного вами https-хоста.

Выведите на странице картинку по полному адресу с этого хоста.