Делал ли интернационализацию

Интернационализация (i18n) в Frontend

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

Что такое интернационализация

Интернационализация (i18n) — это процесс адаптации приложения для работы с различными языками и культурными особенностями. Включает:

• Перевод пользовательского интерфейса
• Локализацию дат, чисел, валют
• Адаптацию текстов для разных языков
• Поддержку RTL (right-to-left) языков

Популярные библиотеки для i18n

Next.js и i18next

import i18n from "i18next";
import { initReactI18next } from "react-i18next";

i18n.use(initReactI18next).init({
  resources: {
    en: {
      translation: {
        greeting: "Hello",
        welcome: "Welcome to our app"
      }
    },
    ru: {
      translation: {
        greeting: "Привет",
        welcome: "Добро пожаловать в наше приложение"
      }
    }
  },
  lng: "en",
  fallbackLng: "en",
  interpolation: { escapeValue: false }
});

export default i18n;

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

import { useTranslation } from "react-i18next";

export function Header() {
  const { t, i18n } = useTranslation();

  const changeLanguage = (lng: string) => {
    i18n.changeLanguage(lng);
  };

  return (
    <header>
      <h1>{t("greeting")}</h1>
      <button onClick={() => changeLanguage("en")}>English</button>
      <button onClick={() => changeLanguage("ru")}>Русский</button>
    </header>
  );
}

Структура файлов переводов

public/locales/
  en/
    common.json
    home.json
    errors.json
  ru/
    common.json
    home.json
    errors.json

// public/locales/en/common.json
{
  "header": {
    "title": "My App",
    "menu": "Menu"
  },
  "footer": {
    "copyright": "© 2026 My Company"
  }
}

Лучшие практики i18n

1. Динамическая загрузка переводов

import i18next from "i18next";
import HttpBackend from "i18next-http-backend";

i18next.use(HttpBackend).init({
  fallbackLng: "en",
  backend: {
    loadPath: "/locales/{{lng}}/{{ns}}.json"
  },
  ns: ["common", "home", "errors"],
  defaultNS: "common"
});

2. Перевод с параметрами

{
  "greeting": "Hello, {{name}}!",
  "itemCount": "You have {{count}} item",
  "itemCount_plural": "You have {{count}} items"
}

const { t } = useTranslation();

t("greeting", { name: "John" }); // Hello, John!
t("itemCount", { count: 1 }); // You have 1 item
t("itemCount", { count: 5 }); // You have 5 items

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

const { i18n } = useTranslation();
const formatter = new Intl.DateTimeFormat(i18n.language, {
  year: "numeric",
  month: "long",
  day: "numeric"
});

const formatted = formatter.format(new Date());

4. Сохранение выбранного языка

const changeLanguage = async (lng: string) => {
  await i18n.changeLanguage(lng);
  localStorage.setItem("language", lng);
};

// При инициализации приложения
const savedLng = localStorage.getItem("language") || "en";
i18n.init({ lng: savedLng });

SEO и i18n

Для Next.js с SSR/ISR использую next-i18next:

// next.config.js
const { i18n } = require("./next-i18next.config");

module.exports = {
  i18n,
  output: "standalone"
};

// next-i18next.config.js
module.exports = {
  i18n: {
    defaultLocale: "en",
    locales: ["en", "ru", "de"]
  }
};

Рурлы с поддержкой локалей:

/en/products
/ru/products
/de/products

Тестирование i18n

import { render, screen } from "@testing-library/react";
import { I18nextProvider } from "react-i18next";
import i18n from "./i18n";

test("renders with correct translation", () => {
  render(
    <I18nextProvider i18n={i18n}>
      <Header />
    </I18nextProvider>
  );

  expect(screen.getByText("Hello")).toBeInTheDocument();
});

Итоговые рекомендации

• Используй i18next как универсальное решение
• next-i18next для Next.js проектов
• Храни переводы в JSON-файлах или базе данных
• Реализуй ленивую загрузку для больших приложений
• Не забывай про плюрализацию и интерполяцию
• Регулярно обновляй переводы через переводчиков или краудсорсинг