Інтернаціоналізація Next.js
next-intl, маршрутизація locale, переклади, форматування дати/часу, підтримка RTL, динамічне перемикання locale
1Яка головна роль файлу middleware.ts у додатку Next.js з next-intl?
Яка головна роль файлу middleware.ts у додатку Next.js з next-intl?
Відповідь
Middleware next-intl автоматично визначає locale користувача (через заголовок Accept-Language, cookie або URL) та перенаправляє на відповідний URL із префіксом locale. Він виконується перед кожним запитом та обробляє узгодження locale без додаткового коду в компонентах. Це обов'язкова точка входу для активації i18n-маршрутизації в Next.js App Router.
2У next-intl, де слід розміщувати файли перекладів для оптимальної структури проєкту?
У next-intl, де слід розміщувати файли перекладів для оптимальної структури проєкту?
Відповідь
Файли перекладів розміщуються в messages/[locale].json у корені проєкту (наприклад: messages/fr.json, messages/en.json). Ця угода полегшує пошук перекладів і дозволяє next-intl завантажувати їх автоматично через конфігурацію i18n. Деякі проєкти також використовують messages/[locale]/ з окремими файлами для кожного namespace для кращої організації.
3Яка головна різниця між useTranslations та getTranslations у next-intl?
Яка головна різниця між useTranslations та getTranslations у next-intl?
Відповідь
useTranslations — це синхронний React-хук для Client Components, тоді як getTranslations — асинхронна функція для Server Components. getTranslations дозволяє отримувати переклади на стороні сервера без надсилання JavaScript клієнту, що покращує продуктивність. useTranslations необхідний для інтерактивних компонентів, які потребують директиви use client.
Як налаштувати підтримувані locale у next-intl?
Яка синтаксис для використання змінних у перекладі next-intl?
+17 питань зі співбесід
Інші теми співбесід 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
Розгортання та Продакшн Next.js
Architecture & Design Patterns
React Server Components
React Безпека & Найкращі Практики
Опануй React / Next.js для наступної співбесіди
Отримай доступ до всіх питань, flashcards, технічних тестів, вправ code review та симуляторів співбесід.
Почни безкоштовно