Wprowadzenie
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.
Co to jest międzynarodowe przekierowywanie?
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:
Wsparcie dla wielu języków: Przekierowywanie międzynarodowe umożliwia obsługę wielu języków w aplikacjach internetowych, co jest istotne w świecie, w którym użytkownicy korzystają z treści cyfrowych w różnych językach.
Indywidualizowane adresy URL: Każda wersja językowa strony może posiadać unikalny adres URL, co ułatwia użytkownikom nawigację i zrozumienie, ponieważ treści są dostępne w ich języku.
Automatyczne rozpoznawanie języka: Aplikacje mogą automatycznie identyfikować preferowany język użytkownika na podstawie ustawień przeglądarki lub lokalizacji, co poprawia użyteczność i dostępność.
Optymalizacja SEO: Posiadanie oddzielnych adresów URL dla różnych wersji językowych może poprawić pozycjonowanie w wyszukiwarkach. Wyszukiwarki mogą łatwiej indeksować treści w różnych językach jako odrębne strony, co zwiększa widoczność w wynikach wyszukiwania.
Utrzymanie stanu przy zmianie języka: Dobre praktyki międzynarodowego przekierowywania zapewniają, że zmiana języka nie powoduje resetowania stanu aplikacji, na przykład koszyka zakupowego lub wypełnionego formularza.
Ułatwienie lokalizacji: Międzynarodowe przekierowywanie ułatwia proces lokalizacji, czyli dostosowywania aplikacji do konkretnych rynków, nie tylko przez tłumaczenie treści, ale także przez uwzględnienie lokalnych zwyczajów i preferencji.
Poprawa doświadczenia użytkownika: Dostarczanie treści w języku ojczystym użytkownika wpływa pozytywnie na jego doświadczenie w obcowaniu z aplikacją, zwiększając zaangażowanie i satysfakcję.
Implementacja i18n w Next.js
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 i18nextW 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}
Dostęp do informacji o lokalizacji
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}
W tym przykładzie, locale zawiera aktualny język strony, który może być wykorzystany do wyświetlania tłumaczeń lub dostosowywania treści.
Przejście pomiędzy lokalizacjami
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}
W tej sytuacji, po kliknięciu na link użytkownik zostanie przekierowany do strony głównej (/) w wybranej lokalizacji (en dla angielskiego, fr dla francuskiego).
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}
W tym przykładzie, funkcja changeLanguage modyfikuje lokalizację na wybraną przez użytkownika (np. en dla angielskiego, fr dla francuskiego), przy zachowaniu tej samej ścieżki (currentPath).
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
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.
Statyczne ścieżki
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.
Trasy Podścieżek w i18n Routing
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:
/users /de/users /es-es/users
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}
Używając powyższego kodu będziemy mogli użyć w przypadku pages/users.js takich adresów URL:
- website.com/users
- website.de/users
- website.nl/users
- website.nl/nl-BE/users
Automatyczne Wykrywanie Ustawień Regionalnych w Next.js
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}
W tym przykładzie, lista obsługiwanych kodów języków jest zawarta w locales, defaultLocale określa domyślny język, a ustawienie localeDetection: true włącza automatyczne wykrywanie języka. Gdy użytkownik odwiedza aplikację, Next.js automatycznie identyfikuje preferowany język na podstawie ustawień przeglądarki i przekierowuje użytkownika do odpowiedniej wersji językowej, na przykład /fr dla francuskiego. To proste, a zarazem potężne rozwiązanie zapewnia płynne doświadczenie użytkownika, eliminując potrzebę ręcznego wyboru języka i poprawiając ogólną dostępność treści.
Wyłączanie Automatycznego Rozpoznawania Ustawień Regionalnych w Next.js
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:
- public/locales/en/common.json
1{ 2 "welcome_message": "Hello" 3} - public/locales/es/common.json
1{ 2 "welcome_message": "Hola" 3} - public/locales/de/common.json
1 2{ 3 "welcome_message": "Hallo" 4}
Podsumowanie
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.