React i18n

React i18n — просто

Типобезопасная интернационализация для приложений React: хуки, контекст и бесшовная доставка через CDN.

Get started in 3 steps

Install

Add @better-i18n/use-intl and use-intl to your project.

terminal

npm install @better-i18n/use-intl use-intl

Wrap your app with BetterI18nProvider

Place the provider at the root of your component tree. It fetches messages from the CDN and makes them available via hooks.

App.tsx

import { BetterI18nProvider } from '@better-i18n/use-intl';

function App() {
  return (
    <BetterI18nProvider project="your-org/your-project" locale="en">
      <YourApp />
    </BetterI18nProvider>
  );
}

Use translations

Call useTranslations() in any component to access your translation keys with full TypeScript support.

MyComponent.tsx

import { useTranslations } from '@better-i18n/use-intl';

function MyComponent() {
  const t = useTranslations('common');
  return <h1>{t('welcome')}</h1>;
}

Функции

React Hooks API (useTranslations)

Полная поддержка TypeScript с автодополнением

Ленивая загрузка для оптимального размера бандла

Формат сообщений ICU с множественным числом

Интерполяция переменных и форматирование

React Context для управления локалью

Поддержка SSR и SSG

Hot reload во время разработки

Интеграция с DevTools

Installation & Setup

Get started with @better-i18n/use-intl in three steps — install, wrap your app with the provider, and start translating.

# 1. Install
npm install @better-i18n/use-intl

# 2. Wrap your app
import { BetterI18nProvider } from '@better-i18n/use-intl'

function App() {
  return (
    <BetterI18nProvider project="org/project" locale="en">
      <YourApp />
    </BetterI18nProvider>
  )
}

# 3. Use translations
import { useTranslations } from '@better-i18n/use-intl'

function MyComponent() {
  const t = useTranslations('common')
  return <h1>{t('welcome')}</h1>
}

Работает с популярными i18n‑библиотеками для React

Better I18N — не замена вашей любимой i18n‑библиотеке; это слой управления переводами, который делает их ещё мощнее.

Better I18N + react-intl

Самая популярная i18n‑библиотека для React с поддержкой формата сообщений ICU. Используется тысячами продакшен‑приложений.

Better I18N синхронизирует ваши переводы прямо в JSON‑формат react-intl. Редактируйте в нашей панели и сразу видьте изменения в приложении.

Better I18N + react-i18next

Мощный i18n‑фреймворк для React на базе i18next. Встроены namespaces, интерполяция и множественные формы.

Экспорт в совместимый с i18next JSON с namespaces. Better I18N ведёт процесс перевода, i18next отвечает за рантайм.

Better I18N + FormatJS

Набор библиотек для интернационализации, включая react-intl. Поддерживает синтаксис ICU Message и данные CLDR.

Better I18N нативно поддерживает формат сообщений ICU. Управляйте сложными множественными числами и select‑сообщениями визуально и экспортируйте в формат FormatJS.

Better I18N + Lingui

Читаемая, автоматизируемая и оптимизированная i18n‑библиотека. Отличный DX благодаря извлечению сообщений через макросы.

Извлекайте сообщения с помощью Lingui CLI, управляйте переводами в Better I18N и автоматически синхронизируйте обратно через интеграцию GitHub.

Быстрый старт

Начните использовать Better I18N в своём приложении React за считанные минуты.

import { useTranslations } from '@better-i18n/use-intl';

function MyComponent() {
  const t = useTranslations('common');

  return (
    <div>
      <h1>{t('welcome')}</h1>
      <p>{t('greeting', { name: 'World' })}</p>
    </div>
  );
}

Next.js i18n

Поддержка Server Components и App Router

Vue i18n

Поддержка Vue Composition API

Сравнение платформ

Посмотрите, как Better I18N сравнивается с альтернативами

Посмотреть i18n для других фреймворков

Next.js i18n Vue i18n Nuxt i18n Angular i18n Svelte i18n Vite i18n Remix & Hydrogen i18n Expo i18n iOS i18n Flutter i18n TanStack Start i18n Server / Hono i18n

Начните создавать с React i18n

Есть бесплатный тариф. Банковская карта не требуется.

Начать бесплатно Читать документацию