Jak skonfigurować internacjonalizację w Next.js

W dzisiejszym globalnie połączonym świecie, dostarczanie treści w wielu językach stało się nie tylko dodatkową wartością, lecz często kluczowym elementem sukcesu aplikacji internetowych. W tej perspektywie pojawia się pojęcie międzynarodowego dostosowywania, znane także jako i18n. Jest to proces, który umożliwia aplikacjom efektywne dostosowywanie się do różnych języków i kultur, co zapewnia użytkownikom na całym świecie bardziej spersonalizowane i dostępne doświadczenia. Jednym z kluczowych elementów międzynarodowego dostosowywania jest przekierowywanie w międzynarodowym formacie, czyli mechanizm zarządzania wielojęzycznymi ścieżkami w aplikacji. W tym artykule przyjrzymy się, co dokładnie oznacza międzynarodowe przekierowywanie i dlaczego jest tak ważne w kontekście tworzenia nowoczesnych, globalnych aplikacji internetowych.

Międzynarodowe przekierowywanie, odnosi się do procesu konfiguracji aplikacji internetowej w taki sposób, aby mogła obsługiwać różne adresy URL dla różnych wersji językowych. Termin "i18n" to skrót od "Internationalization" czyli w tłumaczeniu "Umiędzynarodowienie", gdzie liczba 18 reprezentuje ilość pominiętych liter między "i" a "n". Poniżej znajduje się kilka kluczowych aspektów przekierowywania międzynarodowego i ich znaczenie w tworzeniu nowoczesnych, globalnych aplikacji internetowych:

W następnej części artykułu pokażemy krok po kroku proces implementacji obsługi wielojęzycznej Państwa aplikacji Next.js przy wykorzystaniu biblioteki i18n.

Przed rozpoczęciem należy pobrać następujące biblioteki za pomocą npm lub yarn.

1npm i next-i18next react-i18next i18next

W implementacji przekierowań i18n w Next.js, naturalne wsparcie funkcjonalności i elastyczność są kluczowymi aspektami, co umożliwia twórcom swobodne zarządzanie wielojęzycznymi wariantami aplikacji. Na początku tego procesu stwórzmy plik o nazwie: next-i18next.config.js, w katalogu głównym projektu gdzie definiujemy dostępne języki oraz język domyślny aplikacji. Przykładowo:

1module.exports = {
2  i18n: {
3    locales: ['en-US', 'de', 'es-ES'],
4    defaultLocale: 'en-US',
5  },
6}

Strategie lokalizacyjne, takie jak trasy podścieżek i routowanie domeny, mogą być wykorzystane w Next.js do stworzenia aplikacji obsługującej wiele języków, zaspokajając oczekiwania użytkowników z różnych regionów świata.

Kolejnym krokiem jest opakowanie głównego komponentu aplikacji za pomocą komponentu wyższego rzędu "appWithTranslation":

1import { appWithTranslation } from 'next-i18next';
2
3const MyApp = ({ Component, pageProps }) => (  <Component {...pageProps} />);
4
5export default appWithTranslation(MyApp);

Następnie należy umieścić poniższą funkcję dla każdego komponentu umieszczonego w folderze pages. Jako drugi argument przekazujemy nazwy plików w tablicy dla funkcji serverSideTranslations. Tablica ta, to tak naprawdę nazwy plików json, które będą wykorzystywane przez serwer do tłumaczeń na danej stronie podczas jej budowania. Jeżeli nazwa pliku, który chcemy używać na danej stronie do tłumaczeń nie będzie zawarta w tej tablicy, serwer nie będzie w stanie zaaplikować tłumaczeń, co spowoduje, że strona zostanie wyrenderowana z kluczami zamiast poprawnej treści. To z kolei poskutkuje pogorszeniem SEO i doświadczeń użytkowników.

1import { serverSideTranslations } from 'next-i18next/serverSideTranslations'
2
3export async function getStaticProps({ locale }) { 
4   return {
5      props: { ...(await serverSideTranslations(locale, ['common'])) }
6   }                                                                             
7}

Kolejnym krokiem jest integracja z biblioteką zarządzania tłumaczeniami, którą jest react-i18next. Ta biblioteka umożliwia łatwe zarządzanie plikami tłumaczeń i ich wykorzystanie w komponentach React. Na przykład, używając hooka useTranslation, możemy dynamicznie wyświetlać teksty w wybranym języku:

1import { useTranslation } from 'next-i18next';
2
3function MyComponent() {
4  const { t } = useTranslation('common');
5  return <p>{t('welcome_message')}</p>;
6}

W Next.js, informacje o lokalizacji użytkownika mogą być wykorzystywane do prezentowania treści w odpowiednim języku, dostosowanym do jego regionalnych preferencji. Oto jak można uzyskać i wykorzystać te informacje: Wykorzystanie Hooka useRouter

W Next.js, hook useRouter z biblioteki next/router umożliwia dostęp do informacji o aktualnej ścieżce i lokalizacji użytkownika. Przykład użycia:

1import { useRouter } from 'next/router';
2
3function MyComponent() {
4  const router = useRouter();
5  const { locale, pathname } = router;
6// Użyj 'locale' do dostosowania treści komponentu
7}

Zarówno next/link jak i next/router w Next.js mogą być wykorzystane do zarządzania przejściami między lokalizacjami w kontekście internacjonalizacji (i18n). Oto jak można zastosować oba te narzędzia do efektywnego przełączania języków w aplikacji Next.js: Przejście za pomocą next/link: Komponent Link z Next.js jest doskonały do tworzenia nawigacji między stronami, które również zmieniają lokalizację. Możesz użyć atrybutu locale w Link, aby wskazać, na którą wersję językową chcesz przekierować użytkownika.

1import Link from 'next/link';
2
3function Navbar() {
4  return (
5    <nav>
6      <Link href="/" locale="en">
7        <a>English</a>
8      </Link>
9      <Link href="/" locale="fr">
10        <a>Français</a>
11      </Link>
12      {/* Dodatkowe linki do innych lokalizacji */}
13    </nav>
14  );
15}

Przejście za pomocą next/router: Hook useRouter w Next.js umożliwia dynamiczne zarządzanie routowaniem, w tym zmianę lokalizacji. Metody push lub replace z tego hooka można wykorzystać do programowej zmiany lokalizacji. Przykład:

1import { useRouter } from 'next/router';
2
3function LanguageSwitcher() {
4  const router = useRouter();
5  const changeLanguage = (language) => {
6    const currentPath = router.pathname;
7    router.push(currentPath, currentPath, { locale: language });
8  };
9
10  return (
11    <div>
12      <button onClick={() => changeLanguage('en')}>English</button>
13      <button onClick={() => changeLanguage('fr')}>Français</button>
14      {/* Dodatkowe przyciski dla innych języków */}
15    </div>
16  );
17}

Oba podejścia, zarówno next/link jak i next/router, są użyteczne w różnych scenariuszach. Komponent Link idealnie nadaje się do statycznych linków nawigacyjnych, podczas gdy useRouter jest bardziej elastyczny i pozwala na dynamiczne zarządzanie lokalizacjami, np. w oparciu o interakcje użytkownika lub inne warunki. Kluczowe jest, aby wybrać odpowiednią metodę w zależności od potrzeb i kontekstu Twojej aplikacji Next.js.

Dynamiczne przekierowania i getStaticProps w kontekście i18n (internacjonalizacji) w Next.js tworzą potężne połączenie do budowy wielojęzycznych, statycznie generowanych stron internetowych. Wykorzystując dynamiczne trasy, można łatwo stworzyć ścieżki zależne od języka lub regionu, na przykład /en/products/[id] dla angielskiego i /de/products/[id] dla niemieckiego. Każda ścieżka może odpowiadać tej samej strukturze strony, ale z treścią przetłumaczoną na odpowiedni język.

Funkcja getStaticProps w tym kontekście jest używana do pobierania danych specyficznych dla danego języka na etapie budowania strony. Na przykład, możesz użyć getStaticProps w połączeniu z dynamicznymi trasami do ładowania treści produktów w różnych językach. getStaticProps może pobrać informacje o produkcie, w tym jego opis i ceny, w zależności od języka określonego w ścieżce.

Ten sposób implementacji zapewnia wydajne ładowanie stron przy zachowaniu wsparcia dla wielu języków. Umożliwia także generowanie oddzielnych URL-i dla różnych wersji językowych, co jest korzystne dla SEO. Ponadto, dzięki pre-renderowaniu treści, użytkownicy otrzymują szybsze czasy ładowania stron i lepsze ogólne doświadczenie.

Połączenie niedynamicznych tras z getStaticProps umożliwia tworzenie wielojęzycznych, statycznie generowanych stron internetowych, gdzie każda trasa odpowiada konkretnej wersji języcznej strony. W przeciwieństwie do dynamicznych tras, niedynamiczne trasy są z góry zdefiniowane, co oznacza, że każdy język ma swoją własną, wyraźnie określoną ścieżkę, na przykład /en/about dla angielskiego i /de/about dla niemieckiego.

Funkcje getStaticProps oraz getServerSideProps w tym ujęciu służą do pobierania danych specyficznych dla języka na etapie budowania strony. Na przykład, w przypadku strony /about, funkcje getStaticProps lub getServerSideProps mogą mieć różną logikę w zależności od wartości parametru locale który determinuje na jakiej wersji językowej strony się znajdujemy. Na przykład pobierać treść artykułu z różnych źródeł w zależności od języka.

Ta metoda pozwala na proste zarządzanie treścią i łatwe mapowanie tras na odpowiednie pliki językowe. Jest szczególnie przydatna w scenariuszach, gdzie struktura strony pozostaje stała, a jedynie treść ulega zmianie w zależności od języka. Zapewnia to także wydajne ładowanie stron dzięki pre-renderowaniu, a także korzystny wpływ na SEO, ponieważ każda wersja językowa strony posiada unikalny URL.

Jednym z najbardziej bezpośrednich podejść do wdrożenia strategii lokalizacyjnych w Next.js jest stosowanie tras podścieżek. Ta metoda pozwala na tworzenie oddzielnych adresów URL dla każdej obsługiwanej wersji językowej. Przykładowo, anglojęzyczna wersja Twojej aplikacji może być dostępna pod adresem /en, a francuska pod /fr. Ten sposób nie tylko ułatwia nawigację użytkownikom, ale także wpływa pozytywnie na optymalizację SEO, umożliwiając wyszukiwarkom efektywne indeksowanie treści w różnych językach.

W powyższej konfiguracji, en-US, de i es-ES są dostępne do przekierowania, a en-US jest ustawiony jako domyślny język regionalny. Przykładowo w przypadku pliku pages/users.js, powyższa konfiguracja umożliwia dostęp do następujących adresów:

Pamiętaj, że domyślne ustawienia regionalne nie muszą posiadać przedrostka, ale mogą.

Inną strategią jest korzystanie z różnych domen lub subdomen dla różnych wersji językowych. Na przykład, angielska wersja Twojej strony może być hostowana na example.com , podczas gdy francuska na example.fr. Ta metoda zapewnia wyraźne rozgraniczenie między wersjami językowymi i może być bardziej intuicyjna dla niektórych użytkowników. Niemniej jednak, wymaga bardziej złożonej konfiguracji i może skutkować wyższymi kosztami utrzymania.

1module.exports = {
2  i18n: {
3    locales: ['en-US', 'de', 'nl-NL', 'nl-BE'],
4    defaultLocale: 'en-US',
5
6	domains: [
7  	{
8   	 	domain: 'website.com',
9    	 	defaultLocale: 'en-US',
10  	},
11  	{
12   	 	domain: 'website.de',
13   	 	defaultLocale: 'de',
14 	 },
15 	 {
16    	domain: 'website.nl',
17    	defaultLocale: 'nl-NL',
18    	// Rozważamy również inne lokalizacje, które powinny być ukierunkowane na tę domenę
19    	// Wskazuje na to następująca instrukcja
20    	locales: ['nl-BE'],
21 	 },
22	],
23 },
24}

Next.js oferuje potężną funkcję automatycznego rozpoznawania ustawień regionalnych, co znacznie ułatwia dostarczanie treści w preferowanym języku użytkownika. Ta funkcja, oparta na i18n routing, umożliwia aplikacji automatyczne wykrywanie preferowanego języka użytkownika na podstawie ustawień jego przeglądarki lub systemu, a następnie przekierowanie go do odpowiedniej wersji językowej strony.

Przykład użycia jest stosunkowo prosty. W pliku konfiguracyjnym next-i18next.config.js można skonfigurować i18n z automatycznym rozpoznawaniem ustawień regionalnych w następujący sposób:

1module.exports = {
2  i18n: {
3    locales: ['en', 'fr', 'es'],
4    defaultLocale: 'en',
5    localeDetection: true
6  },
7}

Chociaż automatyczne rozpoznawanie ustawień regionalnych w Next.js to bardzo użyteczna funkcja, w niektórych przypadkach może być konieczne jej wyłączenie. Może to być potrzebne, na przykład, gdy chcemy zapewnić użytkownikom pełną kontrolę nad wyborem języka, lub gdy automatyczne rozpoznawanie może nie działać poprawnie z powodu specyficznych ustawień klienta lub serwera. W takich sytuacjach, Next.js umożliwia programistom łatwe wyłączenie tej funkcji poprzez zmianę konfiguracji w pliku next.config.js.

W następnym kroku będziemy korzystać z kluczy, w celu przetłumaczenia tekstu na odpowiedni język.

1const { i18n } = require('./next-i18next.config');
2
3module.exports = {
4  i18n,
5}

Przed użyciem translacji należy utworzyć pliki z tłumaczeniami w pliku public/locales/[lng], gdzie lng to konkretny język np. en, es itd. i w tych katalogach w formacie json umieszczamy pliki z tłumaczeniami np common.json. W następnym kroku będzie korzystać z kluczy, w celu przetłumaczenia tekstu na odpowiedni język.

Przykładowa struktura katalogu:

Przykładowe pliki:

Wdrożenie i18n (internacjonalizacji) w Next.js umożliwia tworzenie wielojęzycznych aplikacji internetowych, które są dostępne i użyteczne dla globalnej rzeszy odbiorców. Dzięki łatwej integracji z Next.js, deweloperzy mogą skorzystać z dynamicznych tras oraz metod takich jak getStaticProps i getServerSideProps, aby efektywnie zarządzać treściami w różnych językach. To podejście nie tylko poprawia doświadczenie użytkownika, dostarczając treści w ich preferowanym języku, ale także znacznie wpływa na SEO, ponieważ każda wersja językowa jest traktowana jako oddzielna strona.

Mimo że wdrożenie i18n w Next.js oferuje wiele korzyści, wiąże się również z wyzwaniami, takimi jak zarządzanie treściami, synchronizacja zmian w różnych wersjach językowych oraz obsługa specyficznych formatów regionalnych. Ważne jest również, aby pamiętać o dostosowaniu ścieżek i URL-i dla każdej wersji językowej, co ma kluczowe znaczenie dla skuteczności SEO.

Biblioteka i18n w połączeniu z Next.js to potężne narzędzie, które, choć wymaga pewnego poziomu planowania i implementacji, znacząco zwiększa dostępność i użyteczność aplikacji internetowych na arenie międzynarodowej.