Створення багатомовних Next.js-додатків з next-intl
Як fluxLab.dev реалізує інтернаціоналізацію в Next.js-додатках за допомогою next-intl, підтримуючи англійську та українську з SEO-дружнім маршрутизуванням.
Вступ
Всі веб-сайти fluxLab.dev підтримують кілька мов. Наш портфоліо-сайт обслуговує англійську та українську, а продукти як Jobber побудовані з інтернаціоналізацією від першого дня. Ми використовуємо next-intl з Next.js App Router.
Чому next-intl?
Ми оцінили три варіанти: next-intl, next-i18next та react-intl. next-intl переміг, бо природно інтегрується з Server Components та надає маршрути з префіксами локалей (/en/projects, /uk/projects) з коробки.
Структура проєкту
Ми організовуємо переклади за сторінкою/функцією, а не за компонентом. Ця структура масштабується краще, бо пов'язані переклади залишаються разом.
Server Components
У серверних компонентах використовуємо getTranslations. Жодного клієнтського JavaScript не додається. Переклад вирішується під час збірки для статичних сторінок.
SEO-аспекти
Багатомовні сайти потребують додаткової уваги до SEO:
- URL з префіксами локалей — кожна сторінка має унікальний URL на кожну мову
- Hreflang теги — повідомляємо Google, яку версію показувати українським чи англомовним користувачам
- Перекладені мета-описи — унікальні описи на кожну мову покращують CTR
- Покриття Sitemap — генеруємо URL для кожної сторінки × кожної локалі
Типові помилки
- Не перекладайте URL —
/uk/проективиглядає розумно, але ламає закладки та аналітику - Не перенаправляйте автоматично за IP — дайте користувачам обрати мову
- Не забувайте стандартну локаль — перенаправляйте
/projectsна/en/projectsпослідовно - Перекладайте alt-текст — зображення потребують локалізованих описів для доступності та SEO
Висновок
next-intl робить інтернаціоналізацію простою в додатках Next.js App Router. З правильним SEO-налаштуванням підтримка кількох мов стає конкурентною перевагою.