@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.
Files changed (107) hide show
  1. package/blog/ar/intlayer_with_i18next.md +68 -106
  2. package/blog/ar/intlayer_with_next-i18next.md +84 -288
  3. package/blog/ar/intlayer_with_next-intl.md +58 -337
  4. package/blog/ar/intlayer_with_react-i18next.md +68 -290
  5. package/blog/ar/intlayer_with_react-intl.md +63 -266
  6. package/blog/de/intlayer_with_i18next.md +77 -97
  7. package/blog/de/intlayer_with_next-i18next.md +69 -296
  8. package/blog/de/intlayer_with_next-intl.md +59 -340
  9. package/blog/de/intlayer_with_react-i18next.md +68 -290
  10. package/blog/de/intlayer_with_react-intl.md +62 -264
  11. package/blog/en/intlayer_with_i18next.md +36 -1638
  12. package/blog/en/intlayer_with_next-i18next.md +22 -847
  13. package/blog/en/intlayer_with_next-intl.md +32 -1053
  14. package/blog/en/intlayer_with_react-i18next.md +38 -764
  15. package/blog/en/intlayer_with_react-intl.md +42 -1018
  16. package/blog/en-GB/intlayer_with_i18next.md +67 -103
  17. package/blog/en-GB/intlayer_with_next-i18next.md +71 -292
  18. package/blog/en-GB/intlayer_with_next-intl.md +58 -337
  19. package/blog/en-GB/intlayer_with_react-i18next.md +67 -289
  20. package/blog/en-GB/intlayer_with_react-intl.md +61 -264
  21. package/blog/es/intlayer_with_i18next.md +67 -103
  22. package/blog/es/intlayer_with_next-i18next.md +71 -296
  23. package/blog/es/intlayer_with_next-intl.md +57 -338
  24. package/blog/es/intlayer_with_react-i18next.md +68 -290
  25. package/blog/es/intlayer_with_react-intl.md +62 -265
  26. package/blog/fr/intlayer_with_i18next.md +66 -104
  27. package/blog/fr/intlayer_with_next-i18next.md +82 -285
  28. package/blog/fr/intlayer_with_next-intl.md +57 -338
  29. package/blog/fr/intlayer_with_react-i18next.md +67 -289
  30. package/blog/fr/intlayer_with_react-intl.md +61 -264
  31. package/blog/hi/intlayer_with_i18next.md +68 -104
  32. package/blog/hi/intlayer_with_next-i18next.md +74 -299
  33. package/blog/hi/intlayer_with_next-intl.md +57 -239
  34. package/blog/hi/intlayer_with_react-i18next.md +69 -291
  35. package/blog/hi/intlayer_with_react-intl.md +65 -268
  36. package/blog/id/intlayer_with_i18next.md +126 -0
  37. package/blog/id/intlayer_with_next-i18next.md +142 -0
  38. package/blog/id/intlayer_with_next-intl.md +113 -0
  39. package/blog/id/intlayer_with_react-i18next.md +124 -0
  40. package/blog/id/intlayer_with_react-intl.md +122 -0
  41. package/blog/it/intlayer_with_i18next.md +67 -103
  42. package/blog/it/intlayer_with_next-i18next.md +71 -296
  43. package/blog/it/intlayer_with_next-intl.md +57 -338
  44. package/blog/it/intlayer_with_react-i18next.md +68 -290
  45. package/blog/it/intlayer_with_react-intl.md +62 -265
  46. package/blog/ja/intlayer_with_i18next.md +68 -103
  47. package/blog/ja/intlayer_with_next-i18next.md +85 -283
  48. package/blog/ja/intlayer_with_next-intl.md +58 -336
  49. package/blog/ja/intlayer_with_react-i18next.md +68 -290
  50. package/blog/ja/intlayer_with_react-intl.md +62 -264
  51. package/blog/ko/intlayer_with_i18next.md +80 -96
  52. package/blog/ko/intlayer_with_next-i18next.md +85 -287
  53. package/blog/ko/intlayer_with_next-intl.md +68 -327
  54. package/blog/ko/intlayer_with_react-i18next.md +68 -290
  55. package/blog/ko/intlayer_with_react-intl.md +64 -266
  56. package/blog/pl/intlayer_with_i18next.md +126 -0
  57. package/blog/pl/intlayer_with_next-i18next.md +142 -0
  58. package/blog/pl/intlayer_with_next-intl.md +111 -0
  59. package/blog/pl/intlayer_with_react-i18next.md +124 -0
  60. package/blog/pl/intlayer_with_react-intl.md +122 -0
  61. package/blog/pt/intlayer_with_i18next.md +67 -103
  62. package/blog/pt/intlayer_with_next-i18next.md +72 -293
  63. package/blog/pt/intlayer_with_next-intl.md +57 -256
  64. package/blog/pt/intlayer_with_react-i18next.md +104 -78
  65. package/blog/pt/intlayer_with_react-intl.md +62 -266
  66. package/blog/ru/intlayer_with_i18next.md +66 -104
  67. package/blog/ru/intlayer_with_next-i18next.md +71 -296
  68. package/blog/ru/intlayer_with_next-intl.md +58 -337
  69. package/blog/ru/intlayer_with_react-i18next.md +68 -290
  70. package/blog/ru/intlayer_with_react-intl.md +62 -265
  71. package/blog/tr/intlayer_with_i18next.md +71 -107
  72. package/blog/tr/intlayer_with_next-i18next.md +72 -297
  73. package/blog/tr/intlayer_with_next-intl.md +58 -339
  74. package/blog/tr/intlayer_with_react-i18next.md +69 -291
  75. package/blog/tr/intlayer_with_react-intl.md +63 -285
  76. package/blog/vi/intlayer_with_i18next.md +126 -0
  77. package/blog/vi/intlayer_with_next-i18next.md +142 -0
  78. package/blog/vi/intlayer_with_next-intl.md +111 -0
  79. package/blog/vi/intlayer_with_react-i18next.md +124 -0
  80. package/blog/vi/intlayer_with_react-intl.md +122 -0
  81. package/blog/zh/intlayer_with_i18next.md +67 -102
  82. package/blog/zh/intlayer_with_next-i18next.md +72 -296
  83. package/blog/zh/intlayer_with_next-intl.md +58 -336
  84. package/blog/zh/intlayer_with_react-i18next.md +68 -290
  85. package/blog/zh/intlayer_with_react-intl.md +63 -106
  86. package/docs/ar/plugins/sync-json.md +244 -0
  87. package/docs/de/plugins/sync-json.md +244 -0
  88. package/docs/en/intlayer_cli.md +25 -0
  89. package/docs/en/intlayer_with_nextjs_14.md +2 -0
  90. package/docs/en/intlayer_with_nextjs_15.md +2 -0
  91. package/docs/en/intlayer_with_nextjs_16.md +2 -0
  92. package/docs/en/plugins/sync-json.md +1 -1
  93. package/docs/en-GB/plugins/sync-json.md +244 -0
  94. package/docs/es/plugins/sync-json.md +244 -0
  95. package/docs/fr/plugins/sync-json.md +244 -0
  96. package/docs/hi/plugins/sync-json.md +244 -0
  97. package/docs/id/plugins/sync-json.md +244 -0
  98. package/docs/it/plugins/sync-json.md +244 -0
  99. package/docs/ja/plugins/sync-json.md +244 -0
  100. package/docs/ko/plugins/sync-json.md +244 -0
  101. package/docs/pl/plugins/sync-json.md +244 -0
  102. package/docs/pt/plugins/sync-json.md +244 -0
  103. package/docs/ru/plugins/sync-json.md +244 -0
  104. package/docs/tr/plugins/sync-json.md +245 -0
  105. package/docs/vi/plugins/sync-json.md +244 -0
  106. package/docs/zh/plugins/sync-json.md +244 -0
  107. 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-06-29
4
- title: Intlayer e i18next
5
- description: Integre o Intlayer com o i18next para uma internacionalização ideal. Compare os dois frameworks e aprenda como configurá-los juntos.
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
- # Internacionalização com Intlayer e i18next
28
+ # Como automatizar suas traduções JSON do i18next usando Intlayer
23
29
 
24
- i18next é um framework de internacionalização (i18n) de código aberto projetado para aplicações JavaScript. É amplamente utilizado para gerenciar traduções, localização e troca de idiomas em projetos de software. No entanto, possui algumas limitações que podem complicar a escalabilidade e o desenvolvimento.
30
+ ## O que é o Intlayer?
25
31
 
26
- Intlayer é outro framework de internacionalização que aborda essas limitações, oferecendo uma abordagem mais flexível para declaração e gerenciamento de conteúdo. Vamos explorar algumas diferenças principais entre i18next e Intlayer, e como configurar ambos para uma internacionalização ideal.
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
- ## Intlayer vs. i18next: Diferenças Chave
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
- ### 1. Declaração de Conteúdo
36
+ ## Por que combinar Intlayer com i18next?
31
37
 
32
- Com o i18next, os dicionários de tradução devem ser declarados em uma pasta específica, o que pode complicar a escalabilidade da aplicação. Em contraste, o Intlayer permite que o conteúdo seja declarado dentro do mesmo diretório que seu componente. Isso possui várias vantagens:
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
- - **Edição de Conteúdo Simplificada**: Os usuários não precisam procurar o dicionário correto para editar, diminuindo a chance de erros.
35
- - **Adaptação Automática**: Se um componente muda de localização ou é removido, o Intlayer detecta e se adapta automaticamente.
40
+ 1. **Base de código existente**: Você 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
- ### 2. Complexidade de Configuração
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
- Configurar o i18next pode ser complexo, especialmente ao integrar com componentes do lado do servidor ou ao configurar middleware para frameworks como Next.js. O Intlayer simplifica esse processo, oferecendo uma configuração mais direta.
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
- ### 3. Consistência dos Dicionários de Tradução
48
+ ## Índice
42
49
 
43
- Garantir que os dicionários de tradução sejam consistentes em diferentes idiomas pode ser desafiador com o i18next. Essa inconsistência pode levar a falhas na aplicação se não for tratada adequadamente. O Intlayer aborda isso aplicando restrições ao conteúdo traduzido, garantindo que nenhuma tradução seja perdida e que o conteúdo traduzido seja preciso.
50
+ <TOC/>
44
51
 
45
- ### 4. Integração com TypeScript
52
+ ## Guia passo a passo para configurar o Intlayer com i18next
46
53
 
47
- O Intlayer oferece melhor integração com TypeScript, permitindo sugestões automáticas de conteúdo em seu código, aumentando, assim, a eficiência do desenvolvimento.
54
+ ### Passo 1: Instalar dependências
48
55
 
49
- ### 5. Compartilhamento de Conteúdo entre Aplicações
56
+ Instale os pacotes necessários:
50
57
 
51
- O Intlayer facilita o compartilhamento de arquivos de declaração de conteúdo entre várias aplicações e bibliotecas compartilhadas. Esse recurso torna mais fácil manter traduções consistentes em uma base de código maior.
52
-
53
- ## Como Gerar Dicionários do i18next com Intlayer
58
+ ```bash packageManager="npm"
59
+ npm install intlayer @intlayer/sync-json-plugin
60
+ ```
54
61
 
55
- ### Configurando o Intlayer para Exportar Dicionários do i18next
62
+ ```bash packageManager="pnpm"
63
+ pnpm add intlayer @intlayer/sync-json-plugin
64
+ ```
56
65
 
57
- > Notas Importantes
66
+ ```bash packageManager="yarn"
67
+ yarn add intlayer @intlayer/sync-json-plugin
68
+ ```
58
69
 
59
- > A exportação de dicionários do i18next está atualmente em beta e não garante uma compatibilidade 1:1 com outros frameworks. Recomenda-se aderir a uma configuração baseada no Intlayer para minimizar problemas.
70
+ **Descrição dos pacotes:**
60
71
 
61
- Para exportar dicionários do i18next, você precisa configurar o Intlayer adequadamente. Abaixo está um exemplo de como configurar o Intlayer para exportar tanto os dicionários do Intlayer quanto do i18next.
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
- ```typescript fileName="intlayer.config.ts" codeFormat="typescript"
64
- import { Locales, type IntlayerConfig } from "intlayer";
75
+ ### Passo 2: Implemente o plugin Intlayer para encapsular o JSON
65
76
 
66
- const config: IntlayerConfig = {
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
- export default config;
76
- ```
79
+ **Se você também quiser exportar dicionários JSON para o i18next**, adicione o plugin `syncJSON`:
77
80
 
78
- ```javascript fileName="intlayer.config.mjs" codeFormat="esm"
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
- /** @type {import('intlayer').IntlayerConfig} */
82
- const config = {
83
- content: {
84
- // Indica que o Intlayer irá exportar tanto os dicionários do Intlayer quanto do i18next
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
- ```javascript fileName="intlayer.config.cjs" codeFormat="commonjs"
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
- Ao incluir 'i18next' na configuração, o Intlayer gera dicionários dedicados do i18next além dos dicionários do Intlayer. Observe que remover 'intlayer' da configuração pode quebrar a compatibilidade com React-Intlayer ou Next-Intlayer.
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
- ### Importando Dicionários na Sua Configuração do i18next
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
- Para importar os dicionários gerados na sua configuração do i18next, você pode usar 'i18next-resources-to-backend'. Aqui está um exemplo de como importar seus dicionários do i18next:
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
- ```typescript fileName="i18n/client.ts" codeFormat="typescript"
117
- // i18n/client.ts
109
+ ## Configuração do Git
118
110
 
119
- import i18next from "i18next";
120
- import resourcesToBackend from "i18next-resources-to-backend";
111
+ É recomendado ignorar os arquivos gerados automaticamente pelo Intlayer:
121
112
 
122
- i18next
123
- // Sua configuração do i18next
124
- .use(
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
- ```javascript fileName="i18n/client.mjs" codeFormat="esm"
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
- import i18next from "i18next";
136
- import resourcesToBackend from "i18next-resources-to-backend";
120
+ ### Extensão VS Code
137
121
 
138
- i18next
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
- ```javascript fileName="i18n/client.cjs" codeFormat="commonjs"
149
- // i18n/client.cjs
124
+ [Instalar no VS Code Marketplace](https://marketplace.visualstudio.com/items?itemName=intlayer.intlayer-vs-code-extension)
150
125
 
151
- const i18next = require("i18next");
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)