Wykorzystanie i18next do międzynarodowej lokalizacji opartej na Reacie

Międzynarodowa lokalizacja (i18n) jest kluczowa dla rozszerzania zasięgu oprogramowania na globalne rynki. Jednym z najskuteczniejszych narzędzi do tego celu w ekosystemie JavaScript jest i18next. Ten artykuł omawia i18next, w szczególności jego integrację z Reactem, i podkreśla jego zalety, zgodność z różnymi frameworkami i wskazówki dotyczące zwiększania wysiłków w zakresie lokalizacji.

Czym jest i18next?

i18next to solidne oprogramowanie do międzynarodowej adaptacji aplikacji JavaScript. Ułatwia dodawanie wielojęzycznego wsparcia do aplikacji internetowych, mobilnych i desktopowych. Platforma umożliwia dynamiczne zarządzanie tłumaczeniami, dzięki czemu łatwiej jest dostosowywać aplikacje do różnych języków i regionów.

Zalety i18next

• Łatwość integracji

i18next jest łatwy w integracji z istniejącymi projektami i obsługuje popularne frameworki JavaScript, takie jak React, Angular i Vue. Ta wszechstronność czyni go preferowanym wyborem dla programistów.

• Dostosowanie i elastyczność

i18next oferuje modułową strukturę, która pozwala programistom korzystać tylko z funkcji, których potrzebują. Ten wysoki stopień dostosowania zapewnia, że framework może spełnić szeroki zakres wymagań projektowych.

• Dynamiczne ładowanie tłumaczeń

Framework obsługuje dynamiczne ładowanie tłumaczeń, optymalizując wydajność poprzez pobieranie tylko niezbędnych zasobów językowych na żądanie.

• Liczebniki i kontekstualizacja

i18next zawiera wbudowane wsparcie dla obsługi liczebników i kontekstualizacji, zapewniając dokładne warianty językowe w zależności od ilości lub kontekstu.

• Obsługa różnych formatów plików

• Wsparcie dla wielu formatów plików

  Wspiera wiele formatów plików do przechowywania tłumaczeń, w tym JSON i YAML, zapewniając elastyczność w wyborze formatu, który najlepiej odpowiada potrzebom projektu.

• Bogaty ekosystem

  Kwitnąca społeczność i bogaty ekosystem zapewniają wtyczki, rozszerzenia i wsparcie w celu usprawnienia i rozszerzenia funkcjonalności i18next, oszczędzając czas i wysiłek na rozwój.

• Wiele opcji zaplecza

  i18next obsługuje różne zaplecza do przechowywania i pobierania tłumaczeń, takie jak w pamięci, HTTP i niestandardowe zaplecza, umożliwiając integrację z różnymi rozwiązaniami przechowywania.

• Aktywny rozwój i konserwacja

  Regularne aktualizacje i ulepszenia utrzymują i18next na bieżąco z najlepszymi praktykami i ewoluującymi potrzebami w rozwoju stron internetowych.

Integracja React-i18next

Jedną z najpopularniejszych integracji i18next jest integracja z Reactem za pomocą bindingów react-i18next. To połączenie umożliwia efektywną internacjonalizację w komponentach React, ułatwiając dynamiczną zmianę języka i sprawne zarządzanie tłumaczeniami.

Skonfiguruj i18next w swojej aplikacji React (nextjs) poprzez utworzenie instancji i18next i zainicjowanie jej wymaganymi opcjami.

Przykładowy kod dla React-i18next

Oto krok po kroku przykład konfiguracji i użycia react-i18next w aplikacji React:

1. Zainstaluj zależności

Najpierw zainstaluj i18next, react-i18next i next-i18next do ładowania tłumaczeń z serwera:

npm install i18next react-i18next next-i18next

2. Inicjalizacja i18next

Utwórz plik o nazwie next-i18next.config.js w celu skonfigurowania i zainicjowania i18next:

// next-i18next.config.js
const path = require('path'); // Dodaj tę linię, aby zdefiniować ścieżkę
module.exports = {
  i18n: {
    defaultLocale: 'en',
    locales: ['en'],  // Dodaj swoje języki tutaj
    // localeDetection: false,  // Domyślnie true
  },
  localePath: path.resolve('./content/locales'),  // Tutaj znajduje się ścieżka do pliku i18n 
  // ns: ['common','componentFeature'],
  languageNames: {
    'en': 'English',
  },
}

// next.config.js
const { i18n } = require('./next-i18next.config')
module.exports = {
  reactStrictMode: true,
  async redirects() {
    return [

    ];
  },
  i18n,  // Dodaj tę konfigurację i18n
};

3. Konfiguracja plików tłumaczeń

Utwórz katalog locales z podkatalogami dla każdego języka (en, de itp.). W każdym podkatalogu utwórz plik translation.json:

Przykład:

-content
  -locales
    -en
      -translation.json
      -'inny plik, jeśli go masz'.json
    -de
      -translation.json
      -'inny plik, jeśli go masz'.json

locales/en/translation.json

{
  "welcome": "Welcome",
  "description": "This is a sample description."
}

locales/de/translation.json

{
  "welcome": "Willkommen",
  "description": "Dies ist eine Beispielbeschreibung."
}

4. Owiń swoją aplikację za pomocą I18nextProvider

W swoim głównym pliku, takim jak index.js, App.js lub _app.tsx, owiń swoją aplikację za pomocą appWithTranslation:

import { appWithTranslation } from 'next-i18next';

function MyApp({ Component, pageProps }: AppProps) {
  return (
    ...
  );
}

export default appWithTranslation(MyApp)  // owiń w ten sposób 

5. Użyj funkcji Translation Hook w komponentach

Teraz możesz użyć funkcji useTranslation, aby tłumaczyć ciągi znaków w swoich komponentach:

Po pierwsze, użyj serverSideTranslations w pliku na poziomie strony

export const getStaticProps: GetStaticProps = async ({ }) => {
  return {
    props: {
      ...(await serverSideTranslations(safeLocale, [
        'translation', 'other'
      ])),
    },
  };
};
export default function Price() {
      return (
        <div>
          <yourComponent/>
        </div>
    )
}

A następnie w swoim komponencie

import React from 'react';
import { useTranslation } from 'next-i18next';

const MyComponent = () => {
  const { t } = useTranslation('translation', 'other');  // translation jest domyślne tutaj

  return (
    <div>
      <h1>{t('welcome')}</h1>
      <p>{t('description')}</p>
      <p>{t('other:yourcontent')}</p> // użyj innej przestrzeni nazw
    </div>
  );
};

export default MyComponent;