Better I18NЗагрузка...
Загрузка...
Всё, что нужно для создания многоязычных приложений Next.js. Переводы на CDN, серверный рендеринг и мгновенное переключение локали.
Переводы доставляются с edge-узлов по всему миру через Cloudflare CDN. Время загрузки менее 50ms с автоматической инвалидацией кэша при публикации.
Узнать о CDN-доставкеСообщения загружаются на сервере в вашем лейауте через getMessages(). Никакого мерцания непереведённого контента, полная SEO-оптимизация с предрендеренными переводами.
Смотреть справочник APIПереключайте языки на клиенте через useSetLocale() без перезагрузки страницы. BetterI18nProvider получает новые переводы с CDN и мгновенно перерисовывает.
Документация клиентаuseManifestLanguages() получает доступные языки из CDN-манифеста. Добавьте язык в панели, и он автоматически появится в приложении.
Изучить хукиПостроено на next-intl с полной поддержкой TypeScript. useTranslations() обеспечивает проверку ключей перевода на этапе компиляции — обнаруживайте ошибки до запуска.
Документация типобезопасного APIПолучайте предложения переводов на основе ИИ в панели better-i18n. Рабочий процесс одобрения человеком гарантирует качество. Переводите целые проекты за минуты, а не дни.
Попробовать панельbetterMiddleware() определяет локаль пользователя из URL-пути, куки или заголовка Accept-Language. Шаблон обратного вызова в стиле Clerk для простой интеграции аутентификации.
Руководство по настройке мидлвераУправляйте переводами, языками и пространствами имён через dash.better-i18n.com. Совместная работа в реальном времени, история версий и интеграция с GitHub.
Открыть панельGet up and running in 4 simple steps.
Add the SDK to your project
bun add @better-i18n/nextCreate your i18n config
export const i18n = createI18n({ ... })Add BetterI18nProvider to your layout
<BetterI18nProvider>Call useTranslations() in any component
const t = useTranslations("ns")better-i18n works with all major React frameworks out of the box.
| Feature | Next.js | Expo | Remix | Hono | TanStack |
|---|---|---|---|---|---|
| CDN Fetch | ✓ | ✓ | ✓ | ✓ | ✓ |
| ISR / Revalidation | ✓ | — | ✓ | — | ✓ |
| useSetLocale() | ✓ | ✓ | ✓ | ✓ | ✓ |
| useFormatter() | ✓ | ✓ | ✓ | ✓ | ✓ |
| LocaleDropdown | ✓ | ✓ | ✓ | ✓ | ✓ |
| SSR Support | ✓ | — | ✓ | ✓ | ✓ |
Добавьте интернационализацию в приложение Next.js менее чем за 5 минут. Следовать полному руководству
// i18n.config.ts
import { createI18n } from "@better-i18n/next";
export const i18n = createI18n({
project: "your-org/your-project",
defaultLocale: "en",
});
// middleware.ts
import { i18n } from "./i18n.config";
export default i18n.betterMiddleware();
// app/[locale]/layout.tsx
const messages = await i18n.getMessages(locale);
<BetterI18nProvider config={i18n.config} locale={locale} messages={messages}>
{children}
</BetterI18nProvider>
// Any component
const t = useTranslations("namespace");
return <h1>{t("title")}</h1>;Создайте бесплатный аккаунт, добавьте языки и начните переводить. Присоединяйтесь к тысячам разработчиков, создающих для глобальной аудитории.