Better I18NO tym starterze
To szablon startowy pokazujący, jak używać better-i18n z Next.js App Router do tworzenia wielojęzycznych aplikacji.
Stos technologiczny
Next.js 15
App Router + Komponenty Serwera
@better-i18n/next
Tłumaczenia wspierane przez CDN
next-intl
Typobezpieczne hooki tłumaczeń
Tailwind CSS 4
Stylizacja oparta na klasach pomocniczych
TypeScript 5
Pełne bezpieczeństwo typów
Architektura tłumaczeń CDN
Dowiedz się więcejbetter-i18n używa architektury CDN-first. Gdy publikujesz tłumaczenia w panelu, są one wdrażane na globalnej sieci edge Cloudflare zapewniając dostawę poniżej 50ms na całym świecie.
Publikacja z panelu
Tłumaczenia są publikowane z panelu better-i18n do magazynu Cloudflare R2.
Dostarczanie przez Edge CDN
Pakiety tłumaczeń są serwowane z globalnych lokalizacji edge z czasem ładowania poniżej 50ms.
Renderowanie po stronie serwera
Komponenty serwera Next.js pobierają tłumaczenia w czasie żądania przez getMessages() dla przyjaznego SEO HTML.
Hydracja klienta
BetterI18nProvider hydruje tłumaczenia po stronie klienta bez przesunięcia układu. useSetLocale() umożliwia natychmiastowe przełączanie.
SDK domyślnie przechowuje dane manifestu przez 5 minut, a komunikaty tłumaczeń przez 30 sekund w pamięci podręcznej. Unieważnienie pamięci podręcznej następuje automatycznie po publikacji.
API SDK użyte w tym szablonie
Pełna dokumentacja API| API | Typ | Przeznaczenie |
|---|---|---|
createI18n() | Config | Zainicjuj SDK z ustawieniami projektu |
i18n.betterMiddleware() | Server | Wykrywanie lokalizacji z URL, ciasteczka lub Accept-Language |
i18n.getMessages(locale) | Server | Załaduj wszystkie tłumaczenia dla danej lokalizacji |
i18n.getLocales() | Server | Pobierz dostępne lokalizacje z CDN |
BetterI18nProvider | Client | Kontekst React dla tłumaczeń |
useTranslations(ns) | Client | Typobezpieczny dostęp do tłumaczeń |
useSetLocale() | Client | Natychmiastowa zmiana języka |
useManifestLanguages() | Client | Dynamiczne odkrywanie języków z CDN |
Jak to działa
Tłumaczenia są zarządzane w panelu better-i18n i dostarczane przez CDN. Middleware wykrywa język użytkownika z URL, cookie lub języka przeglądarki. Wiadomości są ładowane po stronie serwera i przekazywane do BetterI18nProvider dla komponentów klienckich.
Dostępne języki
Te lokalizacje są pobierane z CDN podczas budowania za pomocą API po stronie serwera i18n.getLocales().
Zarządzaj lokalizacjami z Panel better-i18n.