Настройка многоязычности

Настройка контента интернационализации и поддержки нескольких языков

Обзор системы i18n

GolOps использует Intlayer как решение для локализации. По сравнению с next-intl у него главное преимущество - полная типобезопасность и удобный workflow.

Рекомендуем установить Intlayer VSCode Extension.

Полная типобезопасность - ошибки в ключах переводов ловятся на этапе компиляции.
Быстрая навигация - по ключу useIntlayer можно мгновенно перейти к нужному файлу.
Удобные команды Intlayer - build, push, pull, fill и test доступны из коробки.
Проверка словарей - можно искать пропущенные переводы.
Вкладка Intlayer в Activity Bar - отдельная боковая панель с командами и поиском.

Конфигурация языков

Файл конфигурации находится в intlayer.config.ts. Настройка полностью типобезопасна, и вы сразу видите поддерживаемые языки и язык по умолчанию.

intlayer.config.ts

import { type IntlayerConfig, Locales } from "intlayer";

const config: IntlayerConfig = {
  internationalization: {
    locales: [Locales.ENGLISH, Locales.RU], // Поддерживаемые языки
    defaultLocale: Locales.ENGLISH, // Язык по умолчанию
  },
};

Файлы контента

Все файлы контента находятся в src/config/locale/:

Файл	Назначение
`landing.content.ts`	Контент лендинга
`pricing.content.ts`	Контент страницы цен
`auth.content.ts`	Контент входа и регистрации
`admin.content.ts`	Контент админ-панели
`user-dashboard.content.ts`	Контент пользовательского кабинета
`404.content.ts`	Контент страницы 404
`error.content.ts`	Контент страницы ошибок
`config.content.ts`	Контент страницы настроек
`credit-packages.content.ts`	Контент кредитных пакетов
`waitlist.content.ts`	Контент страницы waitlist

Определение переводов

Используйте функцию t():

src/config/locale/landing.content.ts

import { type Dictionary, t } from "intlayer";

export default {
  key: "landing",
  content: {
    hero: {
      title: t({
        en: "GolOps AI Startups in hours, not days",
        ru: "GolOps помогает запускать AI-стартапы за часы, а не дни",
      }),
      description: t({
        en: "GolOps is a TanStack boilerplate for building AI SaaS startups.",
        ru: "GolOps - это TanStack-шаблон для создания AI SaaS-стартапов.",
      }),
    },
  },
} satisfies Dictionary;

Примечание

Далее идут технические детали. Если вы не планируете глубоко менять код, этот раздел можно пропустить.

Использование в компонентах

Чтобы получить локализованный контент, используйте hook useIntlayer:

import { useIntlayer } from "react-intlayer";

function HeroSection() {
  const { hero } = useIntlayer("landing");

  return (
    <div>
      <h1>{hero.title.value}</h1>
      <p>{hero.description.value}</p>
    </div>
  );
}

Важно

Всегда используйте свойство .value, иначе вместо строки будет отрендерен объект.

Добавление нового языка

Добавьте перевод в файл контента:

title: t({
  en: "Hello",
  ru: "Привет",
  ja: "こんにちは", // Добавить японский
}),

Добавьте язык в intlayer.config.ts.

Локализация маршрутов

GolOps использует компонент LocalizedLink для локализованных маршрутов:

import { LocalizedLink } from "@/shared/components/locale/localized-link";

// Автоматически добавляет префикс языка
<LocalizedLink to="/docs">Документация</LocalizedLink>;

Для программной навигации используйте useLocalizedNavigate:

import { useLocalizedNavigate } from "@/shared/hooks/use-localized-navigate";

function MyComponent() {
  const navigate = useLocalizedNavigate();

  const handleClick = () => {
    navigate("/dashboard");
  };
}

Запрещено

Не используйте Link из TanStack Router напрямую - он не умеет корректно работать с языковыми префиксами.

Форматирование дат и чисел

Для локализации дат и чисел используйте встроенные API браузера:

const date = new Date();
const formattedDate = date.toLocaleDateString(locale, {
  year: "numeric",
  month: "long",
  day: "numeric",
});

const number = 1234567.89;
const formattedNumber = number.toLocaleString(locale);

Настройка многоязычности

Содержание