Autor:
    Data utworzenia:2025-01-02Ostatnia aktualizacja:2025-10-29

    Jak zautomatyzować tłumaczenia JSON next-intl za pomocą Intlayer

    www.youtube.com

    Czym jest Intlayer?

    Intlayer to innowacyjna, otwartoźródłowa biblioteka do internacjonalizacji, zaprojektowana, aby rozwiązać niedoskonałości tradycyjnych rozwiązań i18n. Oferuje nowoczesne podejście do zarządzania treścią w aplikacjach Next.js.

    Zobacz konkretne porównanie z next-intl w naszym wpisie na blogu next-i18next vs. next-intl vs. Intlayer.

    Dlaczego łączyć Intlayer z next-intl?

    Chociaż Intlayer oferuje doskonałe, samodzielne rozwiązanie i18n (zobacz nasz przewodnik integracji z Next.js), możesz chcieć połączyć je z next-intl z kilku powodów:

    1. Istniejąca baza kodu: Masz już wdrożenie next-intl i chcesz stopniowo przejść do lepszego doświadczenia deweloperskiego oferowanego przez Intlayer.
    2. Wymagania dotyczące kompatybilności wstecznej: Twój projekt wymaga zgodności z istniejącymi wtyczkami lub procesami next-intl.
    3. Znajomość zespołu: Twój zespół dobrze zna next-intl, ale chce lepszego zarządzania treścią.
    4. Korzystanie z funkcji Intlayer: Chcesz korzystać z funkcji Intlayer, takich jak deklaracja treści, automatyzacja tłumaczeń, testowanie tłumaczeń i inne.

    W tym celu Intlayer może być zaimplementowany jako adapter dla next-intl, aby pomóc w automatyzacji tłumaczeń JSON w CLI lub pipeline’ach CI/CD, testowaniu tłumaczeń i innych zadaniach.

    Ten przewodnik pokazuje, jak wykorzystać zaawansowany system deklaracji treści Intlayer, jednocześnie zachowując kompatybilność z next-intl.

    Spis treści

    Przewodnik krok po kroku, jak skonfigurować Intlayer z next-intl

    1. Instalacja zależności

      Zainstaluj niezbędne pakiety:

      bash
      npx intlayer-cli init --interactive
      flaga --interactive jest opcjonalna. Użyj intlayer-cli init, jeśli jesteś agentem AI.
      To polecenie wykryje Twoje środowisko i zainstaluje wymagane pakiety. Na przykład:
      bash
      npm install intlayer @intlayer/sync-json-plugin --save-dev

      Opis pakietów:

      • intlayer: Podstawowa biblioteka do zarządzania internacjonalizacją, deklaracji treści i budowania
      • @intlayer/sync-json-plugin: Wtyczka do eksportowania deklaracji treści Intlayer do formatu JSON kompatybilnego z next-intl

    2. Implementacja wtyczki Intlayer do opakowania JSON

      Utwórz plik konfiguracyjny Intlayer, aby zdefiniować obsługiwane lokalizacje:

      Jeśli chcesz również eksportować słowniki JSON dla next-intl, dodaj wtyczkę syncJSON:

      intlayer.config.ts
      import { Locales, type IntlayerConfig } from "intlayer";import { syncJSON } from "@intlayer/sync-json-plugin";const config: IntlayerConfig = {  internationalization: {    locales: [Locales.ENGLISH, Locales.FRENCH, Locales.SPANISH],    defaultLocale: Locales.ENGLISH,  },  plugins: [    syncJSON({      format: "icu",      source: ({ key, locale }) => `./messages/${locale}/${key}.json`,    }),  ],};export default config;

      Wtyczka syncJSON automatycznie opakuje JSON. Będzie odczytywać i zapisywać pliki JSON bez zmiany architektury zawartości.

      Jeśli chcesz, aby JSON współistniał z plikami deklaracji treści intlayer (.content), Intlayer postąpi w następujący sposób:

      plaintext
      1. załaduje zarówno pliki JSON, jak i pliki deklaracji treści, a następnie przekształci je w słownik intlayer.2. jeśli wystąpią konflikty między plikami JSON a plikami deklaracji treści, Intlayer przeprowadzi scalanie wszystkich słowników. W zależności od priorytetu wtyczek oraz pliku deklaracji treści (wszystko jest konfigurowalne).

      Jeśli zmiany zostaną wprowadzone za pomocą CLI do tłumaczenia JSON lub przy użyciu CMS, Intlayer zaktualizuje plik JSON o nowe tłumaczenia.

      Aby zobaczyć więcej szczegółów na temat wtyczki syncJSON, proszę zapoznać się z dokumentacją wtyczki syncJSON.

    Konfiguracja Git

    Zaleca się ignorowanie automatycznie generowanych plików Intlayer:

    .gitignore
    # Ignoruj pliki generowane przez Intlayer.intlayer

    Te pliki mogą być ponownie wygenerowane podczas procesu budowania i nie muszą być zatwierdzane do systemu kontroli wersji.

    Rozszerzenie VS Code

    Dla lepszego doświadczenia programistycznego zainstaluj oficjalne rozszerzenie Intlayer dla VS Code:

    Zainstaluj z Marketplace VS Code

    Automatyzacja react-i18next
    Automatyzacja react-intl

    Komentarze

    Nie ma jeszcze komentarzy. Bądź pierwszą osobą, która podzieli się swoimi przemyśleniami.