Internacjonalizacja Next.js Funkcje

Wszystko, czego potrzebujesz do tworzenia wielojęzycznych aplikacji Next.js. Tłumaczenia wspierane przez CDN, renderowanie po stronie serwera i natychmiastowa zmiana języka.

Zacznij Otwórz panel

Dostawa przez CDN

Tłumaczenia są serwowane z globalnych lokalizacji edge przez Cloudflare CDN. Czasy ładowania poniżej 50ms z automatycznym unieważnianiem pamięci podręcznej po publikacji.

Dowiedz się o dostawie CDN

Renderowanie po stronie serwera

Komunikaty są ładowane po stronie serwera w layoucie przez getMessages(). Brak migotania nieprzetlumaczonej treści, w pełni przyjazne SEO z wstępnie wyrenderowanymi tłumaczeniami.

Zobacz dokumentację API

Natychmiastowa zmiana języka

Przełączaj języki po stronie klienta z useSetLocale() bez pełnego przeładowania strony. BetterI18nProvider pobiera nowe tłumaczenia z CDN i od razu się renderuje.

Dokumentacja po stronie klienta

Dynamiczne wykrywanie języka

useManifestLanguages() pobiera dostępne języki z manifestu CDN. Dodaj język w panelu, a pojawi się automatycznie w Twojej aplikacji.

Poznaj hooki

Typobezpieczne klucze tłumaczeń

Zbudowany na next-intl z pełną obsługą TypeScript. useTranslations() zapewnia sprawdzanie kluczy tłumaczeń w czasie kompilacji — wykrywaj błędy przed uruchomieniem.

Dokumentacja typobezpiecznego API

Tłumaczenie z użyciem AI

Otrzymuj propozycje tłumaczeń opartych na AI w panelu better-i18n. Ludzki proces zatwierdzania zapewnia jakość. Tłumacz całe projekty w minuty, nie dni.

Wypróbuj panel

Wykrywanie języka przez middleware

betterMiddleware() wykrywa język użytkownika ze ścieżki URL, ciasteczka lub nagłówka Accept-Language. Wzór wywołania zwrotnego w stylu Clerk umożliwia łatwą integrację z uwierzytelnianiem.

Poradnik konfiguracji middleware

Zarządzanie panelem

Zarządzaj tłumaczeniami, językami i przestrzeniami nazw z dash.better-i18n.com. Współpraca w czasie rzeczywistym, historia wersji i integracja z GitHub.

Otwórz panel

Integration Journey

Get up and running in 4 simple steps.

Install

Add the SDK to your project

bun add @better-i18n/next

Configure

Create your i18n config

export const i18n = createI18n({ ... })

Wrap Provider

Add BetterI18nProvider to your layout

<BetterI18nProvider>

Use Translations

Call useTranslations() in any component

const t = useTranslations("ns")

Framework Compatibility

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	✓	—	✓	✓	✓

Szybka integracja

Dodaj internacjonalizację do swojej aplikacji Next.js w mniej niż 5 minut. Postępuj według pełnego przewodnika

i18n.config.ts

// 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>;

Gotowi na wielojęzyczność?

Załóż bezpłatne konto, dodaj swoje języki i zacznij tłumaczyć. Dołącz do tysięcy programistów budujących dla globalnej publiczności.

Czytaj dokumentację Otwórz panel

Ładowanie...

Feature

Next.js

Expo

Remix

Hono

TanStack

CDN Fetch

✓

ISR / Revalidation

✓

—

✓

—

✓

useSetLocale()

✓

useFormatter()

✓

LocaleDropdown

✓

SSR Support

✓

—

✓

// 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>;