Зображення відіграють важливу роль у візуальному оформленні будь-якого вебсайту. Розглянемо, як додавати їх у Next.js.

Компонент <Image> є вдосконаленою версією звичайного HTML-тегу <img>, що пропонує низку автоматичних оптимізацій. Його розроблено для вирішення складнощів сучасного вебдизайну та забезпечення стабільного візуального досвіду користувача шляхом зменшення зсувів макета під час завантаження. Компонент також інтелектуально змінює розмір зображень, що зменшує споживання трафіку на пристроях із меншими екранами, оптимізуючи доставку контенту.

Повернення до проєкту

Розглянемо, як додати зображення до нашого проєкту. У папці public знаходяться файли hero-desktop.png та hero-mobile.png. Додайте їх у файл app/page.tsx, використовуючи компонент Image з пакету next/image.

Після переходу на головну сторінку застосунку зображення має відображатися.

Для мобільної версії додайте ще одне зображення з шириною 560px та висотою 620px. Якщо виникнуть труднощі, зверніться до наведеної нижче розв'язки.

На практиці