Питання на співбесіді з Next.js з відповідями

Приклади запитань

Кілька запитань із кожного рівня з правильною відповіддю й поясненням.

Next.js · Junior

1. Що таке colocation в App Router?

   Правильна відповідь: Зберігання компонентів і утиліт поруч із маршрутами всередині app/

   Файли в app/ стають публічними лише через page або route. Тому поруч із page.tsx безпечно зберігати компоненти, хуки, стилі й тести конкретного маршруту. Для явності використовують приватні папки _components або тримають спільний код у src/ поза app.

2. Що таке Next.js?

   Правильна відповідь: React-фреймворк із маршрутизацією, серверним рендерингом і оптимізаціями

   Next.js побудований на React і додає те, чого немає в бібліотеці: файлову маршрутизацію, серверний і статичний рендеринг, Server Components і Server Functions, оптимізацію зображень і шрифтів, збирання й деплой. Компоненти пишуться звичайним React.

3. Як в App Router створити сторінку за адресою /about?

   Правильна відповідь: Створити файл app/about/page.tsx з default-експортом компонента

   Маршрут задається папкою, а публічною сторінкою її робить файл page.tsx (або .js). Без page папка недоступна за URL - у ній можна зберігати компоненти (colocation). Конфігурації маршрутів у next.config немає. Файл pages/about.tsx - це домовленість старого Pages Router.

4. Чим layout.tsx відрізняється від page.tsx?

   Правильна відповідь: Layout обгортає сторінки й зберігає стан під час навігації

   Layout отримує children і спільний для вкладених маршрутів UI (шапка, сайдбар). Під час переходу між дочірніми сторінками layout не перемонтовується: його стан і DOM зберігаються, рендериться лише змінена частина. І layout, і page за замовчуванням - Server Components.

Next.js · Middle

1. Що таке Server Function (Server Action) у Next.js?

   Правильна відповідь: Асинхронна функція з 'use server', яку можна викликати з клієнта

   Директива 'use server' перетворює функцію на серверну, а Next.js створює для неї ендпоінт. Її можна передати в <form action> або викликати з клієнтського обробника. Виклик іде POST-запитом. Server Actions - це Server Functions, що використовуються для мутацій, часто з подальшою ревалідацією кешу.

2. Що дає <form action={createPost}> із Server Action порівняно з onSubmit + fetch?

   Правильна відповідь: Форма працює й до завантаження JS (progressive enhancement), без API-роуту

   Server Action отримує FormData напряму, не треба писати Route Handler і клієнтський fetch. Якщо форму відрендерив серверний компонент, вона надішлеться навіть до гідратації. Валідацію однаково пишуть самі (наприклад, Zod). Стан надсилання показують через useActionState або useFormStatus.

3. Що робить revalidatePath('/blog') після мутації?

   Правильна відповідь: Позначає закешовані дані й UI маршруту /blog як застарілі

   Наступний запит до /blog отримає свіжі дані. Якщо викликати в Server Action, оновлений UI повернеться одразу у відповіді на дію. Для точкової інвалідації даних, що використовуються на багатьох сторінках, зручніші теги (cacheTag + revalidateTag/updateTag).

4. Чим updateTag відрізняється від revalidateTag у Next.js 16?

   Правильна відповідь: updateTag одразу анулює кеш (read-your-writes), revalidateTag - stale-while-revalidate

   updateTag доступний лише в Server Actions: користувач, що змінив дані, одразу побачить зміни. revalidateTag(tag, 'max') позначає дані застарілими: відвідувачі бачать старе, поки у фоні готується нове - підходить для блогів і каталогів. У Next.js 16 у revalidateTag обов'язковий другий аргумент - профіль cacheLife.

Next.js · Senior

1. Що таке RSC payload?

   Правильна відповідь: Серіалізований результат рендеру Server Components із посиланнями на клієнтські

   Payload містить відрендерене дерево серверних компонентів, місця для клієнтських компонентів із посиланнями на їхні JS-чанки та props для них. Під час першого завантаження він вбудований у HTML (для гідратації), а під час клієнтської навігації запитується окремо. Код серверних компонентів у браузер не потрапляє.

2. Що відбувається під час клієнтського переходу за <Link> в App Router?

   Правильна відповідь: Завантажується RSC payload нового сегмента, і React оновлює лише змінені частини

   Роутер запитує payload (або бере попередньо завантажений із клієнтського кешу) і узгоджує його з поточним деревом: спільні layout зберігаються, клієнтський стан не втрачається. Якщо сегмент ще вантажиться, показується loading.tsx. Повного перезавантаження документа не відбувається.

3. З cacheComponents: true dev-оверлей показує «blocking route». Що це означає?

   Правильна відповідь: Некешовані дані читаються поза <Suspense> і блокують статичну оболонку

   З Cache Components кожна асинхронна робота має бути або закешована через 'use cache' (потрапить в оболонку), або обгорнута в <Suspense> (стримітиметься під час запиту). Інакше вся сторінка чекала б на дані. Це правило перевіряється під час розробки й збирання.

4. Чим 'use cache: remote' відрізняється від 'use cache'?

   Правильна відповідь: Зберігає результат у віддаленому обробнику, спільному для всіх інстансів, ціною мережевої затримки

   Звичайний 'use cache' за замовчуванням зберігає записи в пам'яті процесу (LRU), тому в serverless і за кількох інстансів кеш короткоживучий і не спільний. remote використовує обробник із cacheHandlers (Redis, KV платформи) - надійніше, але дорожче. Доступ до даних запиту дає 'use cache: private', а не remote.

Збірні тести з цією темою

Запитання з кількох тем одразу - як на співбесіді на конкретну вакансію.