Question 1

Який рекомендований метод визначення metadata у Next.js App Router?

Accepted Answer

Next.js App Router вводить об'єкт `metadata`, який експортується з layouts і pages для визначення metadata у type-safe та оптимізований спосіб. Цей підхід замінює компоненти `<Head>` з Next.js 12 і дозволяє серверний рендеринг metadata. Експорт `metadata` є статичним і аналізується під час build time для кращої продуктивності SEO.

Question 2

Як генерувати динамічні metadata на основі параметрів route у Next.js?

Accepted Answer

Функція `generateMetadata` є асинхронною та отримує `params` і `searchParams` як аргументи, що дозволяє завантажувати дані для динамічної побудови metadata. Вона виконується на стороні сервера під час рендерингу і може здійснювати API-виклики. Це дозволяє створювати унікальні metadata для кожної динамічної сторінки, що є важливим для SEO сторінок деталей.

Question 3

Як Next.js обробляє злиття metadata між вкладеними layouts і pages?

Accepted Answer

Next.js автоматично зливає metadata з батьківських layouts до дочірніх pages, з пріоритетом значень, найближчих до page. Поля перезаписуються (title, description), окрім `openGraph.images` і `twitter.images`, які зливаються як масиви. Цей каскад дозволяє визначати metadata за замовчуванням на рівні root і перевизначати їх на рівні page.

Metadata & SEO у Next.js

Який рекомендований метод визначення metadata у Next.js App Router?

Відповідь

Як генерувати динамічні metadata на основі параметрів route у Next.js?

Відповідь

Як Next.js обробляє злиття metadata між вкладеними layouts і pages?

Відповідь

Яка перевага використання `title.template` у metadata Next.js?

Який рекомендований метод визначення favicon у Next.js App Router?

Інші теми співбесід 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

Middleware та Auth у Next.js

Тестування React

Zustand State Management

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

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

Advanced React Patterns

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

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

Architecture & Design Patterns

React Server Components

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

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

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