Як налаштувати i18n у Next.js за допомогою next-intl?

Коли розробляла свій двомовний сайт olenacodes потрібно було прикрутити i18n. Спочатку думала використовувати стандартну інтернаціоналізацію Next.js, а потім перейшла до next-intl для додаткової гнучкості і функціональності:

• Динамічні переклади для серверних і клієнтських компонентів.
• Мідлвара для визначення мови, яка автоматично перенаправляє користувачів.
• Структура для перекладів, яка легко підтримується.
• Покращений досвід розробки завдяки типобезпеці для перекладів.
  
  

Як це зробити?

1. Встановіть next-intl:

1npm install next-intl

2. Визначте підтримувані мови

Створіть конфігурацію i18n, щоб визначити підтримувані мови та мову за замовчуванням:

1// src/i18n/routing.ts
2import { defineRouting } from 'next-intl/routing';
3
4export const routing = defineRouting({
5  locales: ['en', 'uk'],
6  defaultLocale: 'en',
7});

3. Додайте переклади

1/messages/en.json
2/messages/uk.json

Приклад файлу en.json:

1{
2  "title": "Next.js i18n demo",
3  "description": "Internationalization with next-intl.",
4  "stepFirst": "Add internationalization support",
5  "stepSecond": "Update routing"
6}

4. Middleware для визначення мови

Створіть мідлвару для перенаправлення користувачів на відповідну мову на основі налаштувань їхнього браузера:

1// src/middleware.ts
2import createMiddleware from "next-intl/middleware";
3import { routing } from "../i18n/routing";
4
5export default createMiddleware(routing);
6
7export const config = {
8  matcher: ["/", "/(uk|en)/:path*"],
9};
10

5. Використання на стороні сервера й клієнта

1// src/app/[locale]/page.tsx
2import { getMessages } from '@/lib/i18nHelpers';
3
4export default async function HomePage({ params }) {
5  const messages = await getMessages(params.locale);
6
7  return (
8    <div>
9      <h1>{messages.title}</h1>
10      <p>{messages.description}</p>
11    </div>
12  );
13}
14
15// src/app/[locale]/components/Steps.tsx
16import { useTranslations } from "next-intl";
17
18export default function Steps() {
19  const t = useTranslations();
20  return (
21    <ul>
22       <li>{t("stepFirst")}</li>
23       <li>{t("stepSecond")}</li>
24     </ul>
25  );
26}

Повну реалізацію можна знайти в репозиторії.

next-intl зробив усе просто і зручно. Тепер мій сайт працює двома мовами, і все це без зайвих зусиль.

Після налаштування перекладів обов’язково проганяй сайт через W3C Internationalization Checker, щоб переконатися, що мовні теги та кодування символів прописані правильно. Цей крок допомагає переконатися, що твоє i18n налаштування працює правильно, покращує доступність, робить сайт відповідним до міжнародних стандартів і дружній для SEO.

Якщо є питання — пиши, розберемо разом!