M

MLOG

Polski

Dowiedz się, jak wdrożyć płynną internacjonalizację (i18n) w aplikacjach Next.js, aby dotrzeć do globalnej publiczności. Obejmuje routing, tłumaczenie treści i najlepsze praktyki.

Internacjonalizacja w Next.js: Tworzenie wielojęzycznych aplikacji dla globalnej publiczności

W dzisiejszym połączonym świecie tworzenie aplikacji dla globalnej publiczności nie jest już luksusem – to konieczność. Next.js, potężny framework React, dostarcza solidne funkcje do implementacji internacjonalizacji (i18n), pozwalając tworzyć wielojęzyczne aplikacje, które zapewniają zlokalizowane doświadczenie użytkownikom na całym świecie. Ten kompleksowy przewodnik przeprowadzi Cię przez podstawowe koncepcje, techniki i najlepsze praktyki tworzenia zinternacjonalizowanych aplikacji w Next.js.

Zrozumienie internacjonalizacji i lokalizacji

Zanim zagłębimy się w szczegóły i18n w Next.js, wyjaśnijmy kluczowe terminy:

Zasadniczo, i18n przygotowuje Twoją aplikację do lokalizacji. Oddzielając elementy zależne od języka od głównego kodu, ułatwiasz lokalizację aplikacji na różne rynki.

Dlaczego warto wdrażać internacjonalizację w Next.js?

Implementacja i18n w aplikacji Next.js oferuje liczne korzyści:

Funkcje i konfiguracja i18n w Next.js

Next.js oferuje wbudowane wsparcie dla i18n poprzez swoje funkcje routingu i zarządzania treścią. Poniżej znajduje się omówienie ważnych funkcji:

1. Konfiguracja i18n w next.config.js

Główna konfiguracja i18n znajduje się w pliku next.config.js. Oto przykład:


/** @type {import('next').NextConfig} */
const nextConfig = {
  i18n: {
    locales: ['en', 'es', 'fr'], // Tablica obsługiwanych języków (kody językowe)
    defaultLocale: 'en', // Domyślny język do użycia
    localeDetection: true, // Włącz/wyłącz automatyczne wykrywanie języka na podstawie ustawień przeglądarki (opcjonalne)
    //  domains: [
    //  {
    //    domain: 'example.com',
    //    defaultLocale: 'en',
    //  },
    //  {
    //    domain: 'example.es',
    //    defaultLocale: 'es',
    //  },
    //  ],
  },
}

module.exports = nextConfig;

Wyjaśnienie:

2. Routing z prefiksami językowymi

Next.js automatycznie dodaje prefiks językowy do tras. Na przykład, jeśli masz stronę pod adresem /about, a językiem jest 'es' (hiszpański), URL zmieni się na /es/about. Umożliwia to tworzenie różnych wersji językowych stron i pozwala wyszukiwarkom na indeksowanie treści dla każdego języka. Framework sam obsługuje przekierowania i routing.

3. Wykorzystanie haka useRouter

Hak useRouter z next/router zapewnia dostęp do bieżącego języka i innych informacji o routingu.


import { useRouter } from 'next/router';

function MyComponent() {
  const router = useRouter();
  const { locale, locales, defaultLocale } = router;

  return (
    

      
Bieżący język: {locale}

      
Dostępne języki: {locales.join(', ')}

      
Domyślny język: {defaultLocale}

    

  );
}

export default MyComponent;

Obiekt router oferuje następujące kluczowe właściwości:

Strategie tłumaczenia treści

Gdy już skonfigurujesz swoją aplikację Next.js pod kątem i18n, będziesz musiał wdrożyć strategie tłumaczenia treści. Oto kilka popularnych podejść:

1. Użycie dedykowanego systemu zarządzania tłumaczeniami (TMS)

W przypadku dużych projektów z wieloma językami, TMS jest wysoce zalecany. Popularne opcje to:

Korzyści:

2. Tworzenie plików tłumaczeń w formacie JSON

W przypadku mniejszych projektów, użycie plików JSON do przechowywania tłumaczeń jest prostą i skuteczną metodą.

Przykładowa struktura katalogów:


/src
├── locales
│   ├── en.json
│   └── es.json
├── components
│   └── MyComponent.js
└── pages
    └── index.js

Przykład en.json:


{
  "greeting": "Hello, world!",
  "welcomeMessage": "Welcome to our website."
}

Przykład es.json:


{
  "greeting": "¡Hola, mundo!",
  "welcomeMessage": "Bienvenido a nuestro sitio web."
}

Przykład MyComponent.js:


import { useRouter } from 'next/router';
import en from '../locales/en.json';
import es from '../locales/es.json';

function MyComponent() {
  const { locale } = useRouter();
  const t = locale === 'es' ? es : en;

  return (
    

      
{t.greeting}

      
{t.welcomeMessage}

    

  );
}

export default MyComponent;

To podejście zapewnia elastyczność i jest proste w przypadku mniejszych projektów. Zazwyczaj jest łatwe w aktualizacji i utrzymaniu.

3. Użycie biblioteki do tłumaczeń

Kilka bibliotek JavaScript usprawnia tłumaczenie treści w komponentach React.

Przykład z next-i18next (Instalacja: npm install next-i18next i18next react-i18next):

Utwórz plik konfiguracyjny i18n (np. i18n.js w głównym katalogu):


// i18n.js
import { createServerSideHelpers } from 'next-i18next'
import { i18n } from './next-i18next.config'

export function initI18next(req, res, namespaces = ['common']) {
  const helpers = createServerSideHelpers(
    req, 
    res, 
    i18n, 
    namespaces
  )

  return helpers
}

export { appWithTranslation } from 'next-i18next'
export { i18n }

Utwórz konfigurację Next.js dla next-i18next.


// next-i18next.config.js
const { i18n } = require('./next-i18next.config');

/** @type {import('next').NextConfig} */
const nextConfig = {
  reactStrictMode: true,
  i18n: {
    defaultLocale: 'en',
    locales: ['en', 'es', 'fr'],
  },
  // inna konfiguracja
}

module.exports = nextConfig

Dodaj konfigurację i import tłumaczeń do swojego pliku _app.js:


import { appWithTranslation } from 'next-i18next';
import '../styles/globals.css';

function MyApp({ Component, pageProps }) {
  return ;
}

export default appWithTranslation(MyApp);

Utwórz folder i wypełnij go plikami językowymi dla swoich tłumaczeń.


/public
└── locales
    ├── en
    │   └── common.json
    ├── es
    │   └── common.json
    └── fr
        └── common.json

Przykład en/common.json:


{
  "greeting": "Hello, world!",
  "welcomeMessage": "Welcome to our website."
}

Użycie tłumaczenia w komponencie:


import { useTranslation } from 'next-i18next';

function MyComponent() {
  const { t } = useTranslation('common');

  return (
    

      
{t('greeting')}

      
{t('welcomeMessage')}

    

  );
}

export default MyComponent;

Ten przykład używa haka useTranslation do pobierania tłumaczeń na podstawie bieżącego języka.

Obsługa dynamicznych tras i statycznego generowania stron (SSG)

Internacjonalizacja staje się bardziej złożona w przypadku dynamicznych tras (np. wpisy na blogu, strony produktów) i statycznego generowania stron (SSG).

1. Dynamiczne trasy (np. /blog/[slug])

Dla dynamicznych tras będziesz musiał wygenerować poprawne ścieżki dla każdego języka w czasie budowania aplikacji, używając getStaticPaths. Ta funkcja zwraca tablicę ścieżek, które Next.js powinien wstępnie wyrenderować.


export async function getStaticPaths() {
  const paths = [];
  const locales = ['en', 'es', 'fr'];
  const posts = await fetchPosts(); // Pobierz dane wpisów na blogu

  posts.forEach(post => {
    locales.forEach(locale => {
      paths.push({
        params: {
          slug: post.slug,
        },
        locale,
      });
    });
  });

  return {
    paths,
    fallback: false, // lub 'blocking', jeśli chcesz pokazać stan ładowania
  };
}

export async function getStaticProps({ params, locale }) {
  const post = await getPostBySlug(params.slug, locale);

  return {
    props: {
      post,
    },
  };
}

Wyjaśnienie:

2. Statyczne generowanie stron (SSG) z getStaticProps

W getStaticProps możesz pobierać przetłumaczoną treść na podstawie parametru locale.


export async function getStaticProps({ params, locale }) {
  // Pobierz treść na podstawie języka i parametrów
  const { post } = await getPostBySlug(params.slug, locale);

  return {
    props: {
      post,
    },
  };
}

Funkcja getPostBySlug powinna pobrać przetłumaczoną treść dla danego sluga i języka, która może pochodzić z Twoich plików tłumaczeń, bazy danych lub CMS.

3. Renderowanie po stronie serwera (SSR) z getServerSideProps

Dla treści, które muszą być pobierane w czasie żądania, użyj getServerSideProps. Jest to przydatne, jeśli treść często się zmienia lub jest spersonalizowana dla każdego użytkownika.


export async function getServerSideProps({ params, locale, req, res }) {
  // Pobierz dane na podstawie języka i parametrów (np. z bazy danych)
  const data = await fetchData(params.slug, locale);

  return {
    props: {
      data,
    },
  };
}

Najlepsze praktyki internacjonalizacji w Next.js

Stosowanie się do tych najlepszych praktyk pomoże Ci budować solidne, łatwe w utrzymaniu i przyjazne dla użytkownika aplikacje wielojęzyczne:

Kwestie SEO dla zinternacjonalizowanych witryn internetowych

Optymalizacja zinternacjonalizowanej witryny pod kątem wyszukiwarek jest niezbędna do pozyskiwania ruchu organicznego z całego świata. Oto kilka kluczowych najlepszych praktyk SEO:

Przykład: Budowa prostego wielojęzycznego bloga

Stwórzmy uproszczony przykład wielojęzycznego bloga przy użyciu Next.js. Pomoże to w bardziej konkretnym zilustrowaniu, jak zastosować omówione powyżej koncepcje.

1. Konfiguracja projektu

Utwórz nowy projekt Next.js:


npx create-next-app my-multi-lang-blog
cd my-multi-lang-blog

2. Konfiguracja i18n (next.config.js)


/** @type {import('next').NextConfig} */
const nextConfig = {
  reactStrictMode: true,
  i18n: {
    locales: ['en', 'es', 'fr'],
    defaultLocale: 'en',
  },
}

module.exports = nextConfig

3. Utworzenie plików tłumaczeń

Utwórz folder locales w głównym katalogu i dodaj następujące pliki JSON:

locales/en.json:


{
  "title": "Welcome to My Blog",
  "postTitle": "My First Post",
  "postContent": "This is the content of my first blog post."
}

locales/es.json:


{
  "title": "Bienvenido a mi Blog",
  "postTitle": "Mi Primer Post",
  "postContent": "Este es el contenido de mi primer publicación de blog."
}

locales/fr.json:


{
  "title": "Bienvenue sur Mon Blog",
  "postTitle": "Mon Premier Article",
  "postContent": "Ceci est le contenu de mon premier article de blog."
}

4. Utworzenie komponentu wpisu na blogu (np. components/BlogPost.js)


import { useRouter } from 'next/router';
import en from '../locales/en.json';
import es from '../locales/es.json';
import fr from '../locales/fr.json';

function BlogPost() {
  const router = useRouter();
  const { locale } = router;

  let translations;
  switch (locale) {
    case 'es':
      translations = es;
      break;
    case 'fr':
      translations = fr;
      break;
    default:
      translations = en;
  }

  return (
    

      
{translations.postTitle}

      
{translations.postContent}

    

  );
}

export default BlogPost;

5. Utworzenie strony głównej (pages/index.js)


import { useRouter } from 'next/router';
import BlogPost from '../components/BlogPost';
import en from '../locales/en.json';
import es from '../locales/es.json';
import fr from '../locales/fr.json';

function HomePage() {
  const router = useRouter();
  const { locale, locales } = router;

  let translations;
  switch (locale) {
    case 'es':
      translations = es;
      break;
    case 'fr':
      translations = fr;
      break;
    default:
      translations = en;
  }

  return (
    

      
{translations.title}

      
      

        {locales.map((l) => (
          
            {l.toUpperCase()}
          
        ))}
      

    

  );
}

export default HomePage;

Ten uproszczony przykład pokazuje podstawowe zasady internacjonalizacji w Next.js. Możesz rozbudować tę podstawową strukturę o bardziej złożone funkcje, takie jak dynamiczne trasy i integracja z systemami zarządzania tłumaczeniami. Rozważ ulepszenie powyższych linków za pomocą komponentu Link i dodanie odpowiedniego atrybutu locale.

6. Uruchomienie aplikacji

Uruchom aplikację za pomocą:


npm run dev

Teraz możesz uzyskać dostęp do swojego bloga pod adresem http://localhost:3000 (angielski), http://localhost:3000/es (hiszpański) i http://localhost:3000/fr (francuski). Powinieneś zobaczyć tytuł i treść wpisu na blogu przetłumaczone w zależności od wybranego języka.

Podsumowanie

Next.js dostarcza kompleksowy zestaw funkcji do wdrażania internacjonalizacji w aplikacjach internetowych. Stosując się do zasad i technik przedstawionych w tym przewodniku, możesz tworzyć wielojęzyczne aplikacje, które zapewniają zlokalizowane doświadczenia użytkownikom na całym świecie. Pamiętaj, aby wcześnie zaplanować strategię i18n, wybrać odpowiednią metodę tłumaczenia dla swoich potrzeb i priorytetyzować doświadczenie użytkownika. Dzięki starannemu planowaniu i wykonaniu możesz tworzyć aplikacje, które rezonują z globalną publicznością i otwierają nowe możliwości rozwoju. Ciągłe uczenie się, śledzenie najnowszych wydań i najlepszych praktyk zapewni, że efektywnie wykorzystujesz swoje narzędzia i technologie.

W miarę postępu technologii można spodziewać się pojawienia bardziej zaawansowanych funkcji i18n. Zdolność docierania do użytkowników z różnych kultur i grup językowych pozostanie kluczowym priorytetem dla twórców aplikacji na całym świecie. Dlatego opanowanie podstaw i18n jest cenną umiejętnością, która zwiększy Twoją wartość na dzisiejszym globalnym rynku deweloperskim.