@intlayer/docs 7.0.4-canary.0 → 7.0.5
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/blog/ar/intlayer_with_i18next.md +68 -106
- package/blog/ar/intlayer_with_next-i18next.md +84 -288
- package/blog/ar/intlayer_with_next-intl.md +58 -337
- package/blog/ar/intlayer_with_react-i18next.md +68 -290
- package/blog/ar/intlayer_with_react-intl.md +63 -266
- package/blog/de/intlayer_with_i18next.md +77 -97
- package/blog/de/intlayer_with_next-i18next.md +69 -296
- package/blog/de/intlayer_with_next-intl.md +59 -340
- package/blog/de/intlayer_with_react-i18next.md +68 -290
- package/blog/de/intlayer_with_react-intl.md +62 -264
- package/blog/en/intlayer_with_i18next.md +36 -1638
- package/blog/en/intlayer_with_next-i18next.md +22 -847
- package/blog/en/intlayer_with_next-intl.md +32 -1053
- package/blog/en/intlayer_with_react-i18next.md +38 -764
- package/blog/en/intlayer_with_react-intl.md +42 -1018
- package/blog/en-GB/intlayer_with_i18next.md +67 -103
- package/blog/en-GB/intlayer_with_next-i18next.md +71 -292
- package/blog/en-GB/intlayer_with_next-intl.md +58 -337
- package/blog/en-GB/intlayer_with_react-i18next.md +67 -289
- package/blog/en-GB/intlayer_with_react-intl.md +61 -264
- package/blog/es/intlayer_with_i18next.md +67 -103
- package/blog/es/intlayer_with_next-i18next.md +71 -296
- package/blog/es/intlayer_with_next-intl.md +57 -338
- package/blog/es/intlayer_with_react-i18next.md +68 -290
- package/blog/es/intlayer_with_react-intl.md +62 -265
- package/blog/fr/intlayer_with_i18next.md +66 -104
- package/blog/fr/intlayer_with_next-i18next.md +82 -285
- package/blog/fr/intlayer_with_next-intl.md +57 -338
- package/blog/fr/intlayer_with_react-i18next.md +67 -289
- package/blog/fr/intlayer_with_react-intl.md +61 -264
- package/blog/hi/intlayer_with_i18next.md +68 -104
- package/blog/hi/intlayer_with_next-i18next.md +74 -299
- package/blog/hi/intlayer_with_next-intl.md +57 -239
- package/blog/hi/intlayer_with_react-i18next.md +69 -291
- package/blog/hi/intlayer_with_react-intl.md +65 -268
- package/blog/id/intlayer_with_i18next.md +126 -0
- package/blog/id/intlayer_with_next-i18next.md +142 -0
- package/blog/id/intlayer_with_next-intl.md +113 -0
- package/blog/id/intlayer_with_react-i18next.md +124 -0
- package/blog/id/intlayer_with_react-intl.md +122 -0
- package/blog/it/intlayer_with_i18next.md +67 -103
- package/blog/it/intlayer_with_next-i18next.md +71 -296
- package/blog/it/intlayer_with_next-intl.md +57 -338
- package/blog/it/intlayer_with_react-i18next.md +68 -290
- package/blog/it/intlayer_with_react-intl.md +62 -265
- package/blog/ja/intlayer_with_i18next.md +68 -103
- package/blog/ja/intlayer_with_next-i18next.md +85 -283
- package/blog/ja/intlayer_with_next-intl.md +58 -336
- package/blog/ja/intlayer_with_react-i18next.md +68 -290
- package/blog/ja/intlayer_with_react-intl.md +62 -264
- package/blog/ko/intlayer_with_i18next.md +80 -96
- package/blog/ko/intlayer_with_next-i18next.md +85 -287
- package/blog/ko/intlayer_with_next-intl.md +68 -327
- package/blog/ko/intlayer_with_react-i18next.md +68 -290
- package/blog/ko/intlayer_with_react-intl.md +64 -266
- package/blog/pl/intlayer_with_i18next.md +126 -0
- package/blog/pl/intlayer_with_next-i18next.md +142 -0
- package/blog/pl/intlayer_with_next-intl.md +111 -0
- package/blog/pl/intlayer_with_react-i18next.md +124 -0
- package/blog/pl/intlayer_with_react-intl.md +122 -0
- package/blog/pt/intlayer_with_i18next.md +67 -103
- package/blog/pt/intlayer_with_next-i18next.md +72 -293
- package/blog/pt/intlayer_with_next-intl.md +57 -256
- package/blog/pt/intlayer_with_react-i18next.md +104 -78
- package/blog/pt/intlayer_with_react-intl.md +62 -266
- package/blog/ru/intlayer_with_i18next.md +66 -104
- package/blog/ru/intlayer_with_next-i18next.md +71 -296
- package/blog/ru/intlayer_with_next-intl.md +58 -337
- package/blog/ru/intlayer_with_react-i18next.md +68 -290
- package/blog/ru/intlayer_with_react-intl.md +62 -265
- package/blog/tr/intlayer_with_i18next.md +71 -107
- package/blog/tr/intlayer_with_next-i18next.md +72 -297
- package/blog/tr/intlayer_with_next-intl.md +58 -339
- package/blog/tr/intlayer_with_react-i18next.md +69 -291
- package/blog/tr/intlayer_with_react-intl.md +63 -285
- package/blog/vi/intlayer_with_i18next.md +126 -0
- package/blog/vi/intlayer_with_next-i18next.md +142 -0
- package/blog/vi/intlayer_with_next-intl.md +111 -0
- package/blog/vi/intlayer_with_react-i18next.md +124 -0
- package/blog/vi/intlayer_with_react-intl.md +122 -0
- package/blog/zh/intlayer_with_i18next.md +67 -102
- package/blog/zh/intlayer_with_next-i18next.md +72 -296
- package/blog/zh/intlayer_with_next-intl.md +58 -336
- package/blog/zh/intlayer_with_react-i18next.md +68 -290
- package/blog/zh/intlayer_with_react-intl.md +63 -106
- package/docs/ar/plugins/sync-json.md +244 -0
- package/docs/de/plugins/sync-json.md +244 -0
- package/docs/en/intlayer_cli.md +25 -0
- package/docs/en/intlayer_with_nextjs_14.md +2 -0
- package/docs/en/intlayer_with_nextjs_15.md +2 -0
- package/docs/en/intlayer_with_nextjs_16.md +2 -0
- package/docs/en/plugins/sync-json.md +1 -1
- package/docs/en-GB/plugins/sync-json.md +244 -0
- package/docs/es/plugins/sync-json.md +244 -0
- package/docs/fr/plugins/sync-json.md +244 -0
- package/docs/hi/plugins/sync-json.md +244 -0
- package/docs/id/plugins/sync-json.md +244 -0
- package/docs/it/plugins/sync-json.md +244 -0
- package/docs/ja/plugins/sync-json.md +244 -0
- package/docs/ko/plugins/sync-json.md +244 -0
- package/docs/pl/plugins/sync-json.md +244 -0
- package/docs/pt/plugins/sync-json.md +244 -0
- package/docs/ru/plugins/sync-json.md +244 -0
- package/docs/tr/plugins/sync-json.md +245 -0
- package/docs/vi/plugins/sync-json.md +244 -0
- package/docs/zh/plugins/sync-json.md +244 -0
- package/package.json +14 -14
|
@@ -0,0 +1,111 @@
|
|
|
1
|
+
---
|
|
2
|
+
createdAt: 2025-01-02
|
|
3
|
+
updatedAt: 2025-10-29
|
|
4
|
+
title: Jak zautomatyzować tłumaczenia JSON next-intl za pomocą Intlayer
|
|
5
|
+
description: Automatyzuj tłumaczenia JSON za pomocą Intlayer i next-intl dla lepszej internacjonalizacji w aplikacjach Next.js.
|
|
6
|
+
slugs:
|
|
7
|
+
- blog
|
|
8
|
+
- intlayer-with-next-intl
|
|
9
|
+
history:
|
|
10
|
+
- version: 7.0.0
|
|
11
|
+
date: 2025-10-29
|
|
12
|
+
changes: Zmiana na wtyczkę syncJSON
|
|
13
|
+
---
|
|
14
|
+
|
|
15
|
+
# Jak zautomatyzować tłumaczenia JSON next-intl za pomocą Intlayer
|
|
16
|
+
|
|
17
|
+
## Czym jest Intlayer?
|
|
18
|
+
|
|
19
|
+
**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.
|
|
20
|
+
|
|
21
|
+
Zobacz konkretne porównanie z next-intl w naszym wpisie na blogu [next-i18next vs. next-intl vs. Intlayer](https://github.com/aymericzip/intlayer/blob/main/docs/blog/pl/next-i18next_vs_next-intl_vs_intlayer.md).
|
|
22
|
+
|
|
23
|
+
## Dlaczego łączyć Intlayer z next-intl?
|
|
24
|
+
|
|
25
|
+
Chociaż Intlayer oferuje doskonałe, samodzielne rozwiązanie i18n (zobacz nasz [przewodnik integracji z Next.js](https://github.com/aymericzip/intlayer/blob/main/docs/docs/pl/intlayer_with_nextjs_16.md)), możesz chcieć połączyć je z next-intl z kilku powodów:
|
|
26
|
+
|
|
27
|
+
1. **Istniejąca baza kodu**: Masz już wdrożoną implementację next-intl i chcesz stopniowo przejść na ulepszone doświadczenie deweloperskie Intlayer.
|
|
28
|
+
2. **Wymagania dotyczące kompatybilności wstecznej**: Twój projekt wymaga zgodności z istniejącymi wtyczkami lub procesami next-intl.
|
|
29
|
+
3. **Znajomość zespołu**: Twój zespół dobrze zna next-intl, ale chce lepszego zarządzania treścią.
|
|
30
|
+
|
|
31
|
+
**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 nie tylko.**
|
|
32
|
+
|
|
33
|
+
Ten przewodnik pokazuje, jak wykorzystać zaawansowany system deklaracji treści Intlayer, zachowując jednocześnie kompatybilność z next-intl.
|
|
34
|
+
|
|
35
|
+
## Spis treści
|
|
36
|
+
|
|
37
|
+
<TOC/>
|
|
38
|
+
|
|
39
|
+
## Przewodnik krok po kroku, jak skonfigurować Intlayer z next-intl
|
|
40
|
+
|
|
41
|
+
### Krok 1: Instalacja zależności
|
|
42
|
+
|
|
43
|
+
Zainstaluj niezbędne pakiety:
|
|
44
|
+
|
|
45
|
+
```bash packageManager="npm"
|
|
46
|
+
npm install intlayer @intlayer/sync-json-plugin
|
|
47
|
+
```
|
|
48
|
+
|
|
49
|
+
```bash packageManager="pnpm"
|
|
50
|
+
pnpm add intlayer @intlayer/sync-json-plugin
|
|
51
|
+
```
|
|
52
|
+
|
|
53
|
+
```bash packageManager="yarn"
|
|
54
|
+
yarn add intlayer @intlayer/sync-json-plugin
|
|
55
|
+
```
|
|
56
|
+
|
|
57
|
+
**Opis pakietów:**
|
|
58
|
+
|
|
59
|
+
- **intlayer**: Podstawowa biblioteka do zarządzania internacjonalizacją, deklaracji treści i budowania
|
|
60
|
+
- **@intlayer/sync-json-plugin**: Wtyczka do eksportowania deklaracji treści Intlayer do formatu JSON kompatybilnego z next-intl
|
|
61
|
+
|
|
62
|
+
### Krok 2: Implementacja wtyczki Intlayer do opakowania JSON
|
|
63
|
+
|
|
64
|
+
Utwórz plik konfiguracyjny Intlayer, aby zdefiniować obsługiwane lokalizacje:
|
|
65
|
+
|
|
66
|
+
**Jeśli chcesz również eksportować słowniki JSON dla next-intl**, dodaj wtyczkę `syncJSON`:
|
|
67
|
+
|
|
68
|
+
```typescript fileName="intlayer.config.ts"
|
|
69
|
+
import { Locales, type IntlayerConfig } from "intlayer";
|
|
70
|
+
import { syncJSON } from "@intlayer/sync-json-plugin";
|
|
71
|
+
|
|
72
|
+
const config: IntlayerConfig = {
|
|
73
|
+
internationalization: {
|
|
74
|
+
locales: [Locales.ENGLISH, Locales.FRENCH, Locales.SPANISH],
|
|
75
|
+
defaultLocale: Locales.ENGLISH,
|
|
76
|
+
},
|
|
77
|
+
plugins: [
|
|
78
|
+
syncJSON({
|
|
79
|
+
source: ({ key, locale }) => `./messages/${locale}/${key}.json`,
|
|
80
|
+
}),
|
|
81
|
+
],
|
|
82
|
+
};
|
|
83
|
+
|
|
84
|
+
export default config;
|
|
85
|
+
```
|
|
86
|
+
|
|
87
|
+
Wtyczka `syncJSON` automatycznie opakuje JSON. Będzie odczytywać i zapisywać pliki JSON bez zmiany architektury zawartości.
|
|
88
|
+
|
|
89
|
+
Jeśli chcesz, aby JSON współistniał z plikami deklaracji zawartości intlayer (`.content`), Intlayer postąpi w następujący sposób:
|
|
90
|
+
|
|
91
|
+
1. załaduje zarówno pliki JSON, jak i pliki deklaracji zawartości, a następnie przekształci je w słownik intlayer.
|
|
92
|
+
2. jeśli wystąpią konflikty między plikami JSON a plikami deklaracji zawartości, Intlayer przeprowadzi scalanie wszystkich tych słowników. W zależności od priorytetu wtyczek oraz pliku deklaracji zawartości (wszystko jest konfigurowalne).
|
|
93
|
+
|
|
94
|
+
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.
|
|
95
|
+
|
|
96
|
+
## Konfiguracja Git
|
|
97
|
+
|
|
98
|
+
Zaleca się ignorowanie automatycznie generowanych plików Intlayer:
|
|
99
|
+
|
|
100
|
+
```plaintext fileName=".gitignore"
|
|
101
|
+
# Ignoruj pliki generowane przez Intlayer
|
|
102
|
+
.intlayer
|
|
103
|
+
```
|
|
104
|
+
|
|
105
|
+
Te pliki mogą być ponownie wygenerowane podczas procesu budowania i nie muszą być zatwierdzane do kontroli wersji.
|
|
106
|
+
|
|
107
|
+
### Rozszerzenie VS Code
|
|
108
|
+
|
|
109
|
+
Dla lepszego doświadczenia deweloperskiego zainstaluj oficjalne **rozszerzenie Intlayer dla VS Code**:
|
|
110
|
+
|
|
111
|
+
[Zainstaluj z Marketplace VS Code](https://marketplace.visualstudio.com/items?itemName=intlayer.intlayer-vs-code-extension)
|
|
@@ -0,0 +1,124 @@
|
|
|
1
|
+
---
|
|
2
|
+
createdAt: 2025-01-02
|
|
3
|
+
updatedAt: 2025-10-29
|
|
4
|
+
title: Jak zautomatyzować tłumaczenia JSON react-i18next za pomocą Intlayer
|
|
5
|
+
description: Automatyzuj tłumaczenia JSON za pomocą Intlayer i react-i18next dla lepszej internacjonalizacji w aplikacjach React.
|
|
6
|
+
keywords:
|
|
7
|
+
- react-i18next
|
|
8
|
+
- i18next
|
|
9
|
+
- Intlayer
|
|
10
|
+
- Internacjonalizacja
|
|
11
|
+
- i18n
|
|
12
|
+
- Blog
|
|
13
|
+
- React
|
|
14
|
+
- JavaScript
|
|
15
|
+
- TypeScript
|
|
16
|
+
- Zarządzanie treścią
|
|
17
|
+
slugs:
|
|
18
|
+
- blog
|
|
19
|
+
- intlayer-with-react-i18next
|
|
20
|
+
history:
|
|
21
|
+
- version: 7.0.0
|
|
22
|
+
date: 2025-10-29
|
|
23
|
+
changes: Zmiana na wtyczkę syncJSON
|
|
24
|
+
---
|
|
25
|
+
|
|
26
|
+
# Jak zautomatyzować tłumaczenia JSON react-i18next za pomocą Intlayer
|
|
27
|
+
|
|
28
|
+
## Czym jest Intlayer?
|
|
29
|
+
|
|
30
|
+
**Intlayer** to innowacyjna, otwartoźródłowa biblioteka do internacjonalizacji, zaprojektowana w celu rozwiązania niedoskonałości tradycyjnych rozwiązań i18n. Oferuje nowoczesne podejście do zarządzania treścią w aplikacjach React.
|
|
31
|
+
|
|
32
|
+
Zobacz konkretne porównanie z react-i18next w naszym wpisie na blogu [react-i18next vs. react-intl vs. Intlayer](https://github.com/aymericzip/intlayer/blob/main/docs/blog/pl/react-i18next_vs_react-intl_vs_intlayer.md).
|
|
33
|
+
|
|
34
|
+
## Dlaczego łączyć Intlayer z react-i18next?
|
|
35
|
+
|
|
36
|
+
Chociaż Intlayer zapewnia doskonałe, samodzielne rozwiązanie i18n (zobacz nasz [przewodnik integracji z React](https://github.com/aymericzip/intlayer/blob/main/docs/docs/pl/intlayer_with_vite+react.md)), możesz chcieć połączyć je z react-i18next z kilku powodów:
|
|
37
|
+
|
|
38
|
+
1. **Istniejąca baza kodu**: Masz już wdrożoną implementację react-i18next i chcesz stopniowo przejść na ulepszone doświadczenie deweloperskie oferowane przez Intlayer.
|
|
39
|
+
2. **Wymagania dotyczące kompatybilności wstecznej**: Twój projekt wymaga zgodności z istniejącymi wtyczkami lub procesami react-i18next.
|
|
40
|
+
3. **Znajomość zespołu**: Twój zespół dobrze zna react-i18next, ale chce lepszego zarządzania treścią.
|
|
41
|
+
|
|
42
|
+
**W tym celu Intlayer może być zaimplementowany jako adapter dla react-i18next, aby pomóc w automatyzacji tłumaczeń JSON w CLI lub pipeline’ach CI/CD, testowaniu tłumaczeń i innych zadaniach.**
|
|
43
|
+
|
|
44
|
+
Ten przewodnik pokazuje, jak wykorzystać zaawansowany system deklaracji treści Intlayer, zachowując jednocześnie kompatybilność z react-i18next.
|
|
45
|
+
|
|
46
|
+
## Spis treści
|
|
47
|
+
|
|
48
|
+
<TOC/>
|
|
49
|
+
|
|
50
|
+
## Przewodnik krok po kroku: konfiguracja Intlayer z react-i18next
|
|
51
|
+
|
|
52
|
+
### Krok 1: Instalacja zależności
|
|
53
|
+
|
|
54
|
+
Zainstaluj niezbędne pakiety:
|
|
55
|
+
|
|
56
|
+
```bash packageManager="npm"
|
|
57
|
+
npm install intlayer @intlayer/sync-json-plugin
|
|
58
|
+
```
|
|
59
|
+
|
|
60
|
+
```bash packageManager="pnpm"
|
|
61
|
+
pnpm add intlayer @intlayer/sync-json-plugin
|
|
62
|
+
```
|
|
63
|
+
|
|
64
|
+
```bash packageManager="yarn"
|
|
65
|
+
yarn add intlayer @intlayer/sync-json-plugin
|
|
66
|
+
```
|
|
67
|
+
|
|
68
|
+
**Opis pakietów:**
|
|
69
|
+
|
|
70
|
+
- **intlayer**: Główna biblioteka do zarządzania internacjonalizacją, deklaracji treści i budowania
|
|
71
|
+
- **@intlayer/sync-json-plugin**: Wtyczka do eksportowania deklaracji treści Intlayer do formatu JSON kompatybilnego z react-i18next
|
|
72
|
+
|
|
73
|
+
### Krok 2: Implementacja wtyczki Intlayer do opakowania JSON
|
|
74
|
+
|
|
75
|
+
Utwórz plik konfiguracyjny Intlayer, aby zdefiniować obsługiwane lokalizacje:
|
|
76
|
+
|
|
77
|
+
**Jeśli chcesz również eksportować słowniki JSON dla react-i18next**, dodaj wtyczkę `syncJSON`:
|
|
78
|
+
|
|
79
|
+
```typescript fileName="intlayer.config.ts"
|
|
80
|
+
import { Locales, type IntlayerConfig } from "intlayer";
|
|
81
|
+
import { syncJSON } from "@intlayer/sync-json-plugin";
|
|
82
|
+
|
|
83
|
+
const config: IntlayerConfig = {
|
|
84
|
+
internationalization: {
|
|
85
|
+
locales: [Locales.ENGLISH, Locales.FRENCH, Locales.SPANISH],
|
|
86
|
+
defaultLocale: Locales.ENGLISH,
|
|
87
|
+
},
|
|
88
|
+
plugins: [
|
|
89
|
+
syncJSON({
|
|
90
|
+
source: ({ key, locale }) => `./messages/${locale}/${key}.json`,
|
|
91
|
+
}),
|
|
92
|
+
],
|
|
93
|
+
};
|
|
94
|
+
|
|
95
|
+
export default config;
|
|
96
|
+
```
|
|
97
|
+
|
|
98
|
+
Wtyczka `syncJSON` automatycznie opakuje JSON. Będzie odczytywać i zapisywać pliki JSON bez zmiany architektury zawartości.
|
|
99
|
+
|
|
100
|
+
Jeśli chcesz, aby JSON współistniał z plikami deklaracji treści intlayer (`.content`), Intlayer postąpi w następujący sposób:
|
|
101
|
+
|
|
102
|
+
1. załaduj zarówno pliki JSON, jak i pliki deklaracji zawartości, a następnie przekształć je w słownik intlayer.
|
|
103
|
+
2. jeśli wystąpią konflikty między plikami JSON a plikami deklaracji zawartości, Intlayer przeprowadzi scalanie wszystkich tych słowników. W zależności od priorytetu wtyczek oraz pliku deklaracji zawartości (wszystko jest konfigurowalne).
|
|
104
|
+
|
|
105
|
+
Jeśli zmiany zostaną wprowadzone za pomocą CLI do tłumaczenia JSON lub za pomocą CMS, Intlayer zaktualizuje plik JSON o nowe tłumaczenia.
|
|
106
|
+
|
|
107
|
+
Aby zobaczyć więcej szczegółów na temat wtyczki `syncJSON`, proszę zapoznać się z [dokumentacją wtyczki syncJSON](https://github.com/aymericzip/intlayer/blob/main/docs/docs/pl/plugins/sync-json.md).
|
|
108
|
+
|
|
109
|
+
## Konfiguracja Git
|
|
110
|
+
|
|
111
|
+
Zaleca się ignorowanie automatycznie generowanych plików Intlayer:
|
|
112
|
+
|
|
113
|
+
```plaintext fileName=".gitignore"
|
|
114
|
+
# Ignoruj pliki generowane przez Intlayer
|
|
115
|
+
.intlayer
|
|
116
|
+
```
|
|
117
|
+
|
|
118
|
+
Te pliki mogą być ponownie wygenerowane podczas procesu budowania i nie muszą być zatwierdzane do kontroli wersji.
|
|
119
|
+
|
|
120
|
+
### Rozszerzenie VS Code
|
|
121
|
+
|
|
122
|
+
Dla lepszego doświadczenia programistycznego zainstaluj oficjalne **rozszerzenie Intlayer dla VS Code**:
|
|
123
|
+
|
|
124
|
+
[Zainstaluj z Marketplace VS Code](https://marketplace.visualstudio.com/items?itemName=intlayer.intlayer-vs-code-extension)
|
|
@@ -0,0 +1,122 @@
|
|
|
1
|
+
---
|
|
2
|
+
createdAt: 2025-01-02
|
|
3
|
+
updatedAt: 2025-10-29
|
|
4
|
+
title: Jak zautomatyzować tłumaczenia JSON react-intl za pomocą Intlayer
|
|
5
|
+
description: Automatyzuj tłumaczenia JSON za pomocą Intlayer i react-intl dla lepszej internacjonalizacji w aplikacjach React.
|
|
6
|
+
keywords:
|
|
7
|
+
- react-intl
|
|
8
|
+
- Intlayer
|
|
9
|
+
- Internacjonalizacja
|
|
10
|
+
- Blog
|
|
11
|
+
- i18n
|
|
12
|
+
- JavaScript
|
|
13
|
+
- React
|
|
14
|
+
- FormatJS
|
|
15
|
+
slugs:
|
|
16
|
+
- blog
|
|
17
|
+
- intlayer-with-react-intl
|
|
18
|
+
history:
|
|
19
|
+
- version: 7.0.0
|
|
20
|
+
date: 2025-10-29
|
|
21
|
+
changes: Zmiana na wtyczkę syncJSON
|
|
22
|
+
---
|
|
23
|
+
|
|
24
|
+
# Jak zautomatyzować tłumaczenia JSON react-intl za pomocą Intlayer
|
|
25
|
+
|
|
26
|
+
## Czym jest Intlayer?
|
|
27
|
+
|
|
28
|
+
**Intlayer** to innowacyjna, otwartoźródłowa biblioteka do internacjonalizacji, zaprojektowana w celu rozwiązania niedoskonałości tradycyjnych rozwiązań i18n. Oferuje nowoczesne podejście do zarządzania treścią w aplikacjach React.
|
|
29
|
+
|
|
30
|
+
Zobacz konkretne porównanie z react-intl w naszym wpisie na blogu [react-i18next vs. react-intl vs. Intlayer](https://github.com/aymericzip/intlayer/blob/main/docs/blog/pl/react-i18next_vs_react-intl_vs_intlayer.md).
|
|
31
|
+
|
|
32
|
+
## Dlaczego łączyć Intlayer z react-intl?
|
|
33
|
+
|
|
34
|
+
Chociaż Intlayer zapewnia doskonałe, samodzielne rozwiązanie i18n (zobacz nasz [przewodnik integracji z React](https://github.com/aymericzip/intlayer/blob/main/docs/docs/pl/intlayer_with_vite+react.md)), możesz chcieć połączyć je z react-intl z kilku powodów:
|
|
35
|
+
|
|
36
|
+
1. **Istniejąca baza kodu**: Masz już wdrożoną implementację react-intl i chcesz stopniowo przejść na ulepszone doświadczenie deweloperskie Intlayer.
|
|
37
|
+
2. **Wymagania dotyczące zgodności wstecznej**: Twój projekt wymaga kompatybilności z istniejącymi wtyczkami lub procesami react-intl.
|
|
38
|
+
3. **Znajomość zespołu**: Twój zespół dobrze zna react-intl, ale chce lepszego zarządzania treścią.
|
|
39
|
+
|
|
40
|
+
**W tym celu Intlayer może być zaimplementowany jako adapter dla react-intl, aby pomóc w automatyzacji tłumaczeń JSON w CLI lub pipeline'ach CI/CD, testowaniu tłumaczeń i innych zadaniach.**
|
|
41
|
+
|
|
42
|
+
Ten przewodnik pokazuje, jak wykorzystać zaawansowany system deklaracji treści Intlayer, zachowując jednocześnie kompatybilność z react-intl.
|
|
43
|
+
|
|
44
|
+
## Spis treści
|
|
45
|
+
|
|
46
|
+
<TOC/>
|
|
47
|
+
|
|
48
|
+
## Przewodnik krok po kroku, jak skonfigurować Intlayer z react-intl
|
|
49
|
+
|
|
50
|
+
### Krok 1: Instalacja zależności
|
|
51
|
+
|
|
52
|
+
Zainstaluj niezbędne pakiety:
|
|
53
|
+
|
|
54
|
+
```bash packageManager="npm"
|
|
55
|
+
npm install intlayer @intlayer/sync-json-plugin
|
|
56
|
+
```
|
|
57
|
+
|
|
58
|
+
```bash packageManager="pnpm"
|
|
59
|
+
pnpm add intlayer @intlayer/sync-json-plugin
|
|
60
|
+
```
|
|
61
|
+
|
|
62
|
+
```bash packageManager="yarn"
|
|
63
|
+
yarn add intlayer @intlayer/sync-json-plugin
|
|
64
|
+
```
|
|
65
|
+
|
|
66
|
+
**Opis pakietów:**
|
|
67
|
+
|
|
68
|
+
- **intlayer**: Podstawowa biblioteka do zarządzania internacjonalizacją, deklaracji treści i budowania
|
|
69
|
+
- **@intlayer/sync-json-plugin**: Wtyczka do eksportowania deklaracji treści Intlayer do formatu JSON kompatybilnego z react-intl
|
|
70
|
+
|
|
71
|
+
### Krok 2: Zaimplementuj wtyczkę Intlayer do opakowania JSON
|
|
72
|
+
|
|
73
|
+
Utwórz plik konfiguracyjny Intlayer, aby zdefiniować obsługiwane lokalizacje:
|
|
74
|
+
|
|
75
|
+
**Jeśli chcesz również eksportować słowniki JSON dla react-intl**, dodaj wtyczkę `syncJSON`:
|
|
76
|
+
|
|
77
|
+
```typescript fileName="intlayer.config.ts"
|
|
78
|
+
import { Locales, type IntlayerConfig } from "intlayer";
|
|
79
|
+
import { syncJSON } from "@intlayer/sync-json-plugin";
|
|
80
|
+
|
|
81
|
+
const config: IntlayerConfig = {
|
|
82
|
+
internationalization: {
|
|
83
|
+
locales: [Locales.ENGLISH, Locales.FRENCH, Locales.SPANISH],
|
|
84
|
+
defaultLocale: Locales.ENGLISH,
|
|
85
|
+
},
|
|
86
|
+
plugins: [
|
|
87
|
+
syncJSON({
|
|
88
|
+
source: ({ key, locale }) => `./intl/messages/${locale}/${key}.json`,
|
|
89
|
+
}),
|
|
90
|
+
],
|
|
91
|
+
};
|
|
92
|
+
|
|
93
|
+
export default config;
|
|
94
|
+
```
|
|
95
|
+
|
|
96
|
+
Wtyczka `syncJSON` automatycznie opakuje JSON. Będzie odczytywać i zapisywać pliki JSON bez zmiany architektury zawartości.
|
|
97
|
+
|
|
98
|
+
Jeśli chcesz, aby JSON współistniał z plikami deklaracji zawartości intlayer (`.content`), Intlayer postąpi w następujący sposób:
|
|
99
|
+
|
|
100
|
+
1. załaduje zarówno pliki JSON, jak i pliki deklaracji zawartości, a następnie przekształci je w słownik intlayer.
|
|
101
|
+
2. jeśli wystąpią konflikty między plikami JSON a plikami deklaracji zawartości, Intlayer przeprowadzi scalanie wszystkich słowników. W zależności od priorytetu wtyczek oraz pliku deklaracji zawartości (wszystko jest konfigurowalne).
|
|
102
|
+
|
|
103
|
+
Jeśli zmiany zostaną wprowadzone za pomocą CLI do tłumaczenia JSON lub za pomocą CMS, Intlayer zaktualizuje plik JSON o nowe tłumaczenia.
|
|
104
|
+
|
|
105
|
+
Aby zobaczyć więcej szczegółów dotyczących wtyczki `syncJSON`, prosimy o zapoznanie się z [dokumentacją wtyczki syncJSON](https://github.com/aymericzip/intlayer/blob/main/docs/docs/pl/plugins/sync-json.md).
|
|
106
|
+
|
|
107
|
+
## Konfiguracja Git
|
|
108
|
+
|
|
109
|
+
Zaleca się ignorowanie automatycznie generowanych plików Intlayer:
|
|
110
|
+
|
|
111
|
+
```plaintext fileName=".gitignore"
|
|
112
|
+
# Ignoruj pliki generowane przez Intlayer
|
|
113
|
+
.intlayer
|
|
114
|
+
```
|
|
115
|
+
|
|
116
|
+
Te pliki mogą być ponownie wygenerowane podczas procesu budowania i nie muszą być zatwierdzane do kontroli wersji.
|
|
117
|
+
|
|
118
|
+
### Rozszerzenie VS Code
|
|
119
|
+
|
|
120
|
+
Dla lepszego doświadczenia programistycznego zainstaluj oficjalne **rozszerzenie Intlayer dla VS Code**:
|
|
121
|
+
|
|
122
|
+
[Zainstaluj z VS Code Marketplace](https://marketplace.visualstudio.com/items?itemName=intlayer.intlayer-vs-code-extension)
|
|
@@ -1,8 +1,8 @@
|
|
|
1
1
|
---
|
|
2
2
|
createdAt: 2024-12-24
|
|
3
|
-
updatedAt: 2025-
|
|
4
|
-
title:
|
|
5
|
-
description:
|
|
3
|
+
updatedAt: 2025-10-29
|
|
4
|
+
title: Como automatizar suas traduções JSON do i18next usando Intlayer
|
|
5
|
+
description: Automatize suas traduções JSON com Intlayer e i18next para uma internacionalização aprimorada em aplicações JavaScript.
|
|
6
6
|
keywords:
|
|
7
7
|
- Intlayer
|
|
8
8
|
- i18next
|
|
@@ -14,149 +14,113 @@ keywords:
|
|
|
14
14
|
- Next.js
|
|
15
15
|
- JavaScript
|
|
16
16
|
- TypeScript
|
|
17
|
+
- Migração
|
|
18
|
+
- Integração
|
|
17
19
|
slugs:
|
|
18
20
|
- blog
|
|
19
21
|
- intlayer-with-i18next
|
|
22
|
+
history:
|
|
23
|
+
- version: 7.0.0
|
|
24
|
+
date: 2025-10-29
|
|
25
|
+
changes: Alteração para o plugin syncJSON
|
|
20
26
|
---
|
|
21
27
|
|
|
22
|
-
#
|
|
28
|
+
# Como automatizar suas traduções JSON do i18next usando Intlayer
|
|
23
29
|
|
|
24
|
-
|
|
30
|
+
## O que é o Intlayer?
|
|
25
31
|
|
|
26
|
-
Intlayer é
|
|
32
|
+
**Intlayer** é uma biblioteca inovadora e de código aberto para internacionalização, projetada para superar as limitações das soluções tradicionais de i18n. Ela oferece uma abordagem moderna para o gerenciamento de conteúdo em aplicações JavaScript.
|
|
27
33
|
|
|
28
|
-
|
|
34
|
+
Veja uma comparação concreta com o i18next em nosso post no blog [next-i18next vs. next-intl vs. Intlayer](https://github.com/aymericzip/intlayer/blob/main/docs/blog/pt/next-i18next_vs_next-intl_vs_intlayer.md).
|
|
29
35
|
|
|
30
|
-
|
|
36
|
+
## Por que combinar Intlayer com i18next?
|
|
31
37
|
|
|
32
|
-
|
|
38
|
+
Embora o Intlayer forneça uma excelente solução de i18n independente (veja nosso [guia de integração com Next.js](https://github.com/aymericzip/intlayer/blob/main/docs/docs/pt/intlayer_with_nextjs_16.md)), você pode querer combiná-lo com o i18next por vários motivos:
|
|
33
39
|
|
|
34
|
-
|
|
35
|
-
|
|
40
|
+
1. **Base de código existente**: Você já possui uma implementação estabelecida do i18next e deseja migrar gradualmente para a melhor experiência de desenvolvedor do Intlayer.
|
|
41
|
+
2. **Requisitos legados**: Seu projeto requer compatibilidade com plugins ou fluxos de trabalho existentes do i18next.
|
|
42
|
+
3. **Familiaridade da equipe**: Sua equipe está confortável com o i18next, mas deseja um melhor gerenciamento de conteúdo.
|
|
36
43
|
|
|
37
|
-
|
|
44
|
+
**Para isso, o Intlayer pode ser implementado como um adaptador para o i18next, ajudando a automatizar suas traduções JSON em pipelines CLI ou CI/CD, testar suas traduções e muito mais.**
|
|
38
45
|
|
|
39
|
-
|
|
46
|
+
Este guia mostra como aproveitar o sistema superior de declaração de conteúdo do Intlayer enquanto mantém a compatibilidade com o i18next.
|
|
40
47
|
|
|
41
|
-
|
|
48
|
+
## Índice
|
|
42
49
|
|
|
43
|
-
|
|
50
|
+
<TOC/>
|
|
44
51
|
|
|
45
|
-
|
|
52
|
+
## Guia passo a passo para configurar o Intlayer com i18next
|
|
46
53
|
|
|
47
|
-
|
|
54
|
+
### Passo 1: Instalar dependências
|
|
48
55
|
|
|
49
|
-
|
|
56
|
+
Instale os pacotes necessários:
|
|
50
57
|
|
|
51
|
-
|
|
52
|
-
|
|
53
|
-
|
|
58
|
+
```bash packageManager="npm"
|
|
59
|
+
npm install intlayer @intlayer/sync-json-plugin
|
|
60
|
+
```
|
|
54
61
|
|
|
55
|
-
|
|
62
|
+
```bash packageManager="pnpm"
|
|
63
|
+
pnpm add intlayer @intlayer/sync-json-plugin
|
|
64
|
+
```
|
|
56
65
|
|
|
57
|
-
|
|
66
|
+
```bash packageManager="yarn"
|
|
67
|
+
yarn add intlayer @intlayer/sync-json-plugin
|
|
68
|
+
```
|
|
58
69
|
|
|
59
|
-
|
|
70
|
+
**Descrição dos pacotes:**
|
|
60
71
|
|
|
61
|
-
|
|
72
|
+
- **intlayer**: Biblioteca principal para gerenciamento de internacionalização, declaração de conteúdo e construção
|
|
73
|
+
- **@intlayer/sync-json-plugin**: Plugin para exportar declarações de conteúdo do Intlayer para o formato JSON compatível com i18next
|
|
62
74
|
|
|
63
|
-
|
|
64
|
-
import { Locales, type IntlayerConfig } from "intlayer";
|
|
75
|
+
### Passo 2: Implemente o plugin Intlayer para encapsular o JSON
|
|
65
76
|
|
|
66
|
-
|
|
67
|
-
content: {
|
|
68
|
-
// Indica que o Intlayer irá exportar tanto os dicionários do Intlayer quanto do i18next
|
|
69
|
-
dictionaryOutput: ["intlayer", "i18next"],
|
|
70
|
-
// Caminho relativo a partir da raiz do projeto até o diretório onde os dicionários i18n serão exportados
|
|
71
|
-
i18nextResourcesDir: "./i18next/dictionaries",
|
|
72
|
-
},
|
|
73
|
-
};
|
|
77
|
+
Crie um arquivo de configuração do Intlayer para definir os locais suportados:
|
|
74
78
|
|
|
75
|
-
|
|
76
|
-
```
|
|
79
|
+
**Se você também quiser exportar dicionários JSON para o i18next**, adicione o plugin `syncJSON`:
|
|
77
80
|
|
|
78
|
-
```
|
|
79
|
-
import { Locales } from "intlayer";
|
|
81
|
+
```typescript fileName="intlayer.config.ts"
|
|
82
|
+
import { Locales, type IntlayerConfig } from "intlayer";
|
|
83
|
+
import { syncJSON } from "@intlayer/sync-json-plugin";
|
|
80
84
|
|
|
81
|
-
|
|
82
|
-
|
|
83
|
-
|
|
84
|
-
|
|
85
|
-
dictionaryOutput: ["intlayer", "i18next"],
|
|
86
|
-
// Caminho relativo a partir da raiz do projeto até o diretório onde os dicionários i18n serão exportados
|
|
87
|
-
i18nextResourcesDir: "./i18next/dictionaries",
|
|
85
|
+
const config: IntlayerConfig = {
|
|
86
|
+
internationalization: {
|
|
87
|
+
locales: [Locales.ENGLISH, Locales.FRENCH, Locales.SPANISH],
|
|
88
|
+
defaultLocale: Locales.ENGLISH,
|
|
88
89
|
},
|
|
90
|
+
plugins: [
|
|
91
|
+
syncJSON({
|
|
92
|
+
source: ({ key, locale }) => `./intl/messages/${locale}/${key}.json`,
|
|
93
|
+
}),
|
|
94
|
+
],
|
|
89
95
|
};
|
|
90
96
|
|
|
91
97
|
export default config;
|
|
92
98
|
```
|
|
93
99
|
|
|
94
|
-
|
|
95
|
-
const { Locales } = require("intlayer");
|
|
96
|
-
|
|
97
|
-
/** @type {import('intlayer').IntlayerConfig} */
|
|
98
|
-
const config = {
|
|
99
|
-
content: {
|
|
100
|
-
// Indica que o Intlayer irá exportar tanto os dicionários do Intlayer quanto do i18next
|
|
101
|
-
dictionaryOutput: ["intlayer", "i18next"],
|
|
102
|
-
// Caminho relativo a partir da raiz do projeto até o diretório onde os dicionários i18n serão exportados
|
|
103
|
-
i18nextResourcesDir: "./i18next/dictionaries",
|
|
104
|
-
},
|
|
105
|
-
};
|
|
106
|
-
|
|
107
|
-
module.exports = config;
|
|
108
|
-
```
|
|
100
|
+
O plugin `syncJSON` irá automaticamente encapsular o JSON. Ele irá ler e escrever os arquivos JSON sem alterar a arquitetura do conteúdo.
|
|
109
101
|
|
|
110
|
-
|
|
102
|
+
Se você quiser fazer coexistir esse JSON com arquivos de declaração de conteúdo do Intlayer (`.content`), o Intlayer procederá da seguinte forma:
|
|
111
103
|
|
|
112
|
-
|
|
104
|
+
1. carregar tanto os arquivos JSON quanto os arquivos de declaração de conteúdo e transformá-los em um dicionário Intlayer.
|
|
105
|
+
2. se houver conflitos entre o JSON e os arquivos de declaração de conteúdo, o Intlayer irá proceder à mesclagem de todos esses dicionários. Dependendo da prioridade dos plugins e da do arquivo de declaração de conteúdo (todos são configuráveis).
|
|
113
106
|
|
|
114
|
-
|
|
107
|
+
Se alterações forem feitas usando o CLI para traduzir o JSON, ou usando o CMS, o Intlayer atualizará o arquivo JSON com as novas traduções.
|
|
115
108
|
|
|
116
|
-
|
|
117
|
-
// i18n/client.ts
|
|
109
|
+
## Configuração do Git
|
|
118
110
|
|
|
119
|
-
|
|
120
|
-
import resourcesToBackend from "i18next-resources-to-backend";
|
|
111
|
+
É recomendado ignorar os arquivos gerados automaticamente pelo Intlayer:
|
|
121
112
|
|
|
122
|
-
|
|
123
|
-
|
|
124
|
-
|
|
125
|
-
resourcesToBackend(
|
|
126
|
-
(language: string, namespace: string) =>
|
|
127
|
-
import(`../i18next/dictionaries/${language}/${namespace}.json`)
|
|
128
|
-
)
|
|
129
|
-
);
|
|
113
|
+
```plaintext fileName=".gitignore"
|
|
114
|
+
# Ignorar arquivos gerados pelo Intlayer
|
|
115
|
+
.intlayer
|
|
130
116
|
```
|
|
131
117
|
|
|
132
|
-
|
|
133
|
-
// i18n/client.mjs
|
|
118
|
+
Esses arquivos podem ser regenerados durante o processo de build e não precisam ser commitados no controle de versão.
|
|
134
119
|
|
|
135
|
-
|
|
136
|
-
import resourcesToBackend from "i18next-resources-to-backend";
|
|
120
|
+
### Extensão VS Code
|
|
137
121
|
|
|
138
|
-
|
|
139
|
-
// Sua configuração do i18next
|
|
140
|
-
.use(
|
|
141
|
-
resourcesToBackend(
|
|
142
|
-
(language, namespace) =>
|
|
143
|
-
import(`../i18next/dictionaries/${language}/${namespace}.json`)
|
|
144
|
-
)
|
|
145
|
-
);
|
|
146
|
-
```
|
|
122
|
+
Para uma melhor experiência de desenvolvimento, instale a extensão oficial **Intlayer VS Code Extension**:
|
|
147
123
|
|
|
148
|
-
|
|
149
|
-
// i18n/client.cjs
|
|
124
|
+
[Instalar no VS Code Marketplace](https://marketplace.visualstudio.com/items?itemName=intlayer.intlayer-vs-code-extension)
|
|
150
125
|
|
|
151
|
-
|
|
152
|
-
const resourcesToBackend = require("i18next-resources-to-backend");
|
|
153
|
-
|
|
154
|
-
i18next
|
|
155
|
-
// Sua configuração do i18next
|
|
156
|
-
.use(
|
|
157
|
-
resourcesToBackend(
|
|
158
|
-
(language, namespace) =>
|
|
159
|
-
import(`../i18next/dictionaries/${language}/${namespace}.json`)
|
|
160
|
-
)
|
|
161
|
-
);
|
|
162
|
-
```
|
|
126
|
+
[Instalar a partir do Marketplace do VS Code](https://marketplace.visualstudio.com/items?itemName=intlayer.intlayer-vs-code-extension)
|