Wielojęzyczna strona w React lub Next.js (next-intl) | We.Inc
Przetłumacz stronę React lub Next.js poprawnie: pliki komunikatów, routing językowy next-intl, formatowanie dat, kwot i liczby mnogiej przez Intl, układy od prawej do lewej i tagi hreflang.
Trzymaj każdy tekst w jednym pliku komunikatów JSON na język, daj każdemu językowi własny URL, na przykład /de/about, a daty, ceny i liczbę mnogą formatuj wbudowanymi w przeglądarkę API Intl. W Next.js App Router łączy to wszystko next-intl: segment trasy [locale], proxy wybierające język i useTranslations w komponentach.
Elementy przetłumaczonej strony
Element
Czego użyć
Teksty
messages/en.json, messages/de.json i tak dalej
Adresy URL
Jeden prefiks ścieżki na język: /en/..., /de/...
Wykrywanie języka
createMiddleware z next-intl w proxy.ts (middleware.ts przed Next.js 16)
Daty, liczby, kwoty
Intl.DateTimeFormat i Intl.NumberFormat
Liczba mnoga
Składnia komunikatów ICU lub Intl.PluralRules
Wyszukiwarki
Linki hreflang dla każdej wersji językowej plus x-default
Tłumaczenie to coś więcej niż zamiana słów. Zmienia się szyk zdania, reguły liczby mnogiej są różne, arabski czyta się od prawej do lewej, a każdy kraj zapisuje daty po swojemu. Wypróbuj przełącznik poniżej, aby zobaczyć, jak mała karta produktu zmienia język, a potem zbuduj to samo w swojej aplikacji z plikami konfiguracyjnymi i generatorem hreflang.
Wybierz język w demo. Karta podmienia komunikaty, formatuje cenę i datę dla danego locale i odwraca kierunek dla arabskiego.
Zmień liczbę produktów, aby zobaczyć, jak każdy język wybiera własną formę liczby mnogiej.
Skopiuj pliki konfiguracyjne next-intl do projektu Next.js App Router.
Wpisz domenę i języki w generatorze hreflang i wklej tagi lub obiekt metadata do swojego layoutu.
Nigdy nie składaj zdań z fragmentów. Tłumacz całe zdania z placeholderami, takimi jak {count}, bo szyk zdania się różni.
Zostaw zapas miejsca w layoucie, bo przetłumaczona etykieta jest często wyraźnie dłuższa niż angielska.
Ustaw lang na elemencie html dla każdego języka i dir="rtl" dla języków pisanych od prawej do lewej.
Unikaj flag w przełącznikach języka. Flagi oznaczają kraje, a wiele języków używa się w kilku krajach.
Pozwól ludziom ręcznie zmienić język i zapamiętuj ich wybór zamiast polegać wyłącznie na ustawieniach przeglądarki.
Najczęściej zadawane pytania
Której biblioteki i18n użyć z React?
Dla Next.js App Router next-intl jest stworzony specjalnie do tego celu i obsługuje Server Components. Dla zwykłej aplikacji React bez Next.js wybierz bibliotekę przechowującą komunikaty w JSON, aby późniejsze przejście na inną pozostało wykonalne.
Czy języki powinny być w podfolderach, subdomenach czy na osobnych domenach?
Podfoldery, takie jak example.com/de/, najłatwiej utrzymać, bo jedna strona i jedna domena obsługują wszystko. next-intl obsługuje też routing oparty na domenach, jeśli potrzebujesz de.example.com lub domeny krajowej.
Jak dodać hreflang w Next.js?
Zwróć alternates.languages z metadata lub generateMetadata, z jednym wpisem na każdy URL językowy. Next.js wypisze dla każdego tag link rel="alternate" hreflang. Każda wersja językowa musi wskazywać wszystkie pozostałe i samą siebie, inaczej wyszukiwarki mogą zignorować cały zestaw.
Czy mogę przetłumaczyć stronę maszynowo?
Możesz użyć tłumaczenia maszynowego jako pierwszej wersji, ale niech sprawdzi je osoba biegle znająca język, zwłaszcza nagłówki, ceny i teksty prawne. Ubogie lub niesprawdzone tłumaczenia mogą dezorientować czytelników i osłabiać zaufanie.
Komunikaty zamiast tekstów w komponentach
Każdy fragment tekstu widoczny dla człowieka powinien pochodzić z pliku komunikatów z kluczem opisującym znaczenie, na przykład Cart.checkoutButton. Deweloperzy edytują angielski, tłumacze pozostałe pliki i nikt nie szuka zakodowanych na sztywno tekstów w komponentach.
Podział na przestrzenie nazw według komponentów utrzymuje pliki czytelnymi. useTranslations('Cart') z next-intl daje Ci wtedy t('checkoutButton') tylko wewnątrz tego komponentu.
Formatowanie zostaw Intl
Intl.NumberFormat zapisuje 1234.5 euro jako 1.234,50 € dla niemieckiego czytelnika, z symbolem i separatorami tam, gdzie oczekuje ich to locale. Intl.DateTimeFormat robi to samo z datami, a Intl.PluralRules mówi, czy liczba w danym języku przyjmuje formę one, few, many czy other.
Te API są dostępne w każdej nowoczesnej przeglądarce i w Node, więc formatowanie nie zwiększa rozmiaru bundla i pozostaje poprawne dla języków, których nigdy nie studiowałeś.
Języki pisane od prawej do lewej
Arabski, hebrajski, perski i urdu czyta się od prawej do lewej. Ustawienie dir="rtl" na elemencie html odwraca wyrównanie tekstu i kolejność treści inline, ale stałe wartości left i right w CSS pozostają bez zmian.
Używaj właściwości logicznych, takich jak margin-inline-start i padding-inline-end, lub klas ms- i pe- z Tailwind, aby odstępy odwracały się automatycznie wraz z kierunkiem.
Konfiguracja next-intl dla App Routera
Zainstaluj przez npm install next-intl. Te pliki mają strukturę z oficjalnego przewodnika next-intl dotyczącego routingu opartego na locale.
Jeden plik na język, w każdym te same klucze. Składnia ICU obsługuje liczbę mnogą wewnątrz komunikatu.
src/i18n/routing.ts i src/proxy.ts
Routing wymienia Twoje locale tylko raz. Proxy (przed Next.js 16 nazywane middleware.ts) przekierowuje odwiedzających na prefiks językowy.
src/i18n/request.ts
Odczytuje locale z segmentu [locale], odrzuca nieznane i ładuje komunikaty dla danego języka.
next.config.ts, layout i strona
Plugin podłącza request.ts. Przenieś strony do app/[locale]/ i odczytuj komunikaty przez useTranslations. next/root-params jest domyślnie włączone od Next.js 16.3; wcześniejsze wersje wymagają experimental.rootParams.
Formatowanie bez biblioteki
Intl w czystym JavaScript
Działa w każdej aplikacji React, przetłumaczonej lub nie.
Reguły hreflang sprawdzane przez wyszukiwarki
Poprawne oznaczenia językowe
Reguła
Przykład
Używaj pełnych, bezwzględnych adresów URL
Każda wersja wskazuje siebie i wszystkie pozostałe
Niemiecka strona linkuje do en, de, ar i x-default
Język w ISO 639-1, opcjonalny region w ISO 3166-1 alpha-2
de, en-GB, pt-BR
Nigdy sam region
be to białoruski, a nie Belgia; użyj nl-BE lub fr-BE
x-default dla wszystkich pozostałych
Wskazuje wybór języka lub Twoją główną wersję
Wypróbuj: jedna karta w pięciu językach
Zmień język i liczbę produktów. Teksty pochodzą z obiektu komunikatów, a cena, data i forma liczby mnogiej z API Intl przeglądarki.
Język
Produkty w koszyku: {n}
Wybrana kategoria liczby mnogiej:
Kierunek:
Demo nie przelicza walut; jedynie formatuje tę samą liczbę.
Generator hreflang
Wpisz domenę, ścieżkę strony i kody języków, aby otrzymać tagi link do sekcji head lub obiekt alternates dla Next.js.
Domena
Ścieżka strony
Kody języków (oddzielone przecinkami)
Język x-default
Pominięto nieprawidłowe kody: {codes}. Użyj formy takiej jak de lub en-GB.