Как работает Image компонент в Next.js?

Junior
279 просмотров
AFK Offer AI

next/image автоматически оптимизирует картинки: ресайзит, конвертирует в WebP/AVIF, ленивая загрузка по умолчанию, предотвращает CLS через обязательные width/height или fill. Картинки обрабатываются на сервере on-demand и кешируются. Поддерживает внешние URL через remotePatterns в конфиге. Priority проп для LCP-картинок отключает lazy loading. Placeholder="blur" показывает размытую превьюшку пока грузится. По сути делает image optimization бесплатной — не нужен отдельный CDN или сервис.

Следующий вопрос

Как настроить авторизацию в Next.js?