Question 1

Яка головна перевага використання next/image порівняно зі стандартним тегом img?

Accepted Answer

next/image автоматично оптимізує зображення, генеруючи кілька розмірів і сучасних форматів (WebP, AVIF), застосовує lazy loading за замовчуванням та покращує Web Vitals, запобігаючи Cumulative Layout Shift за допомогою автоматичного розрахунку розмірів. На відміну від стандартного тегу img, що завантажує оригінальне зображення, next/image надає оптимальний розмір залежно від viewport та відношення пікселів пристрою. Цей підхід суттєво скорочує час завантаження та споживання пропускної здатності.

Question 2

Коли використовувати властивість priority у компоненті next/image?

Accepted Answer

Властивість priority вимикає lazy loading і відразу попередньо завантажує зображення, що критично для above-the-fold зображень, які впливають на Largest Contentful Paint (LCP). Без priority ці критичні зображення завантажувались би лінь, затримуючи LCP і погіршуючи Core Web Vitals. Використовуйте priority лише для 1-2 зображень, видимих при початковому завантаженні сторінки, зазвичай hero images або головних банерів.

Question 3

Яка конфігурація next/image дозволяє обслуговувати зображення із зовнішнього домену?

Accepted Answer

Властивість remotePatterns у next.config.js дозволяє визначати авторизовані зовнішні домени для обслуговування зображень з детальним контролем протоколу, імені хосту, порту та шляху. Цей підхід замінює застарілу властивість domains і підвищує безпеку, точно обмежуючи авторизовані джерела. Налаштування remotePatterns запобігає помилкам 400 при завантаженні зображень, розміщених на CDN або сторонніх сервісах, як-от Cloudinary чи AWS S3.

Розширені можливості Next.js

Яка головна перевага використання next/image порівняно зі стандартним тегом img?

Відповідь

Коли використовувати властивість priority у компоненті next/image?

Відповідь

Яка конфігурація next/image дозволяє обслуговувати зображення із зовнішнього домену?

Відповідь

У чому різниця між fill та responsive для розміщення next/image?

Як оптимізувати статичні зображення, імпортовані локально за допомогою next/image?

Інші теми співбесід React / Next.js

Основи JavaScript

Основи React

React Hooks

Життєвий цикл компонента

React Router

Управління станом з Context

Форми та Controlled Components

Отримання даних та API

React Query (TanStack Query)

Styling & CSS-in-JS

Основи Next.js

TypeScript з React

Data Fetching у Next.js

Server Actions у Next.js

Маршрутизація та Навігація в Next.js

API Routes у Next.js

Metadata & SEO у Next.js

Middleware та Auth у Next.js

Тестування React

Zustand State Management

Оптимізація продуктивності React

Error Boundaries & обробка помилок

Advanced React Patterns

Розгортання та Продакшн Next.js

Architecture & Design Patterns

React Server Components

Інтернаціоналізація Next.js

React Безпека & Найкращі Практики

Опануй React / Next.js для наступної співбесіди