# Розширені можливості Next.js (React / Next.js)

> Оптимізація зображень, оптимізація шрифтів, оптимізація скриптів, analytics, edge runtime, експериментальні функції

- 24 питань зі співбесід
- Senior
- [Питання зі співбесід: React / Next.js](https://sharpskill.dev/uk/technologies/react-next/pytannia-spivbesidy.md)

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

**Відповідь**

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

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

**Відповідь**

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

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

**Відповідь**

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

## Ще 21 доступних питань

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

Зареєструйся безкоштовно: https://sharpskill.dev/uk/login

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

- [Основи JavaScript](https://sharpskill.dev/uk/technologies/react-next/pytannia-spivbesidy/javascript-essentials.md): 25 запитань, Junior
- [Основи React](https://sharpskill.dev/uk/technologies/react-next/pytannia-spivbesidy/react-fundamentals.md): 20 запитань, Junior
- [React Hooks](https://sharpskill.dev/uk/technologies/react-next/pytannia-spivbesidy/react-hooks.md): 22 запитань, Junior
- [Життєвий цикл компонента](https://sharpskill.dev/uk/technologies/react-next/pytannia-spivbesidy/component-lifecycle.md): 18 запитань, Junior
- [React Router](https://sharpskill.dev/uk/technologies/react-next/pytannia-spivbesidy/react-router.md): 20 запитань, Junior
- [Управління станом з Context](https://sharpskill.dev/uk/technologies/react-next/pytannia-spivbesidy/state-management-context.md): 18 запитань, Junior
- [Форми та Controlled Components](https://sharpskill.dev/uk/technologies/react-next/pytannia-spivbesidy/forms-controlled-components.md): 20 запитань, Mid-Level
- [Отримання даних та API](https://sharpskill.dev/uk/technologies/react-next/pytannia-spivbesidy/fetching-data-api.md): 20 запитань, Mid-Level
- [React Query (TanStack Query)](https://sharpskill.dev/uk/technologies/react-next/pytannia-spivbesidy/react-query-tanstack.md): 20 запитань, Mid-Level
- [Styling & CSS-in-JS](https://sharpskill.dev/uk/technologies/react-next/pytannia-spivbesidy/styling-css-in-js.md): 18 запитань, Mid-Level
- [Основи Next.js](https://sharpskill.dev/uk/technologies/react-next/pytannia-spivbesidy/nextjs-fundamentals.md): 25 запитань, Mid-Level
- [TypeScript з React](https://sharpskill.dev/uk/technologies/react-next/pytannia-spivbesidy/typescript-react.md): 20 запитань, Mid-Level
- [Data Fetching у Next.js](https://sharpskill.dev/uk/technologies/react-next/pytannia-spivbesidy/nextjs-data-fetching.md): 24 запитань, Mid-Level
- [Server Actions у Next.js](https://sharpskill.dev/uk/technologies/react-next/pytannia-spivbesidy/nextjs-server-actions.md): 20 запитань, Mid-Level
- [Маршрутизація та Навігація в Next.js](https://sharpskill.dev/uk/technologies/react-next/pytannia-spivbesidy/nextjs-routing-navigation.md): 22 запитань, Mid-Level
- [API Routes у Next.js](https://sharpskill.dev/uk/technologies/react-next/pytannia-spivbesidy/nextjs-api-routes.md): 20 запитань, Mid-Level
- [Metadata & SEO у Next.js](https://sharpskill.dev/uk/technologies/react-next/pytannia-spivbesidy/nextjs-metadata-seo.md): 18 запитань, Mid-Level
- [Middleware та Auth у Next.js](https://sharpskill.dev/uk/technologies/react-next/pytannia-spivbesidy/nextjs-middleware-auth.md): 22 запитань, Mid-Level
- [Тестування React](https://sharpskill.dev/uk/technologies/react-next/pytannia-spivbesidy/react-testing.md): 20 запитань, Mid-Level
- [Zustand State Management](https://sharpskill.dev/uk/technologies/react-next/pytannia-spivbesidy/zustand-state-management.md): 18 запитань, Mid-Level
- [Оптимізація продуктивності React](https://sharpskill.dev/uk/technologies/react-next/pytannia-spivbesidy/react-performance-optimization.md): 22 запитань, Senior
- [Error Boundaries & обробка помилок](https://sharpskill.dev/uk/technologies/react-next/pytannia-spivbesidy/react-error-boundaries.md): 18 запитань, Senior
- [Advanced React Patterns](https://sharpskill.dev/uk/technologies/react-next/pytannia-spivbesidy/advanced-react-patterns.md): 20 запитань, Senior
- [Розгортання та Продакшн Next.js](https://sharpskill.dev/uk/technologies/react-next/pytannia-spivbesidy/nextjs-deployment-production.md): 20 запитань, Senior
- [Architecture & Design Patterns](https://sharpskill.dev/uk/technologies/react-next/pytannia-spivbesidy/react-architecture-patterns.md): 22 запитань, Senior
- [React Server Components](https://sharpskill.dev/uk/technologies/react-next/pytannia-spivbesidy/react-server-components.md): 26 запитань, Senior
- [Інтернаціоналізація Next.js](https://sharpskill.dev/uk/technologies/react-next/pytannia-spivbesidy/nextjs-internationalization.md): 20 запитань, Senior
- [React Безпека & Найкращі Практики](https://sharpskill.dev/uk/technologies/react-next/pytannia-spivbesidy/react-security-best-practices.md): 22 запитань, Senior

---

Source: SharpSkill (https://sharpskill.dev), tech interview preparation for your real stack.
HTML version of this page: https://sharpskill.dev/uk/technologies/react-next/pytannia-spivbesidy/nextjs-advanced-features