@intlayer/docs 7.3.1 → 7.3.2-canary.1
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/README.md +0 -2
- package/blog/ar/compiler_vs_declarative_i18n.md +1 -2
- package/blog/ar/i18n_using_next-i18next.md +8 -0
- package/blog/ar/i18n_using_next-intl.md +7 -0
- package/blog/ar/intlayer_with_next-intl.md +8 -0
- package/blog/ar/list_i18n_technologies/frameworks/flutter.md +0 -22
- package/blog/de/compiler_vs_declarative_i18n.md +1 -2
- package/blog/de/i18n_using_next-i18next.md +8 -0
- package/blog/de/i18n_using_next-intl.md +7 -0
- package/blog/de/intlayer_with_next-intl.md +8 -0
- package/blog/de/list_i18n_technologies/frameworks/flutter.md +0 -22
- package/blog/en/compiler_vs_declarative_i18n.md +1 -2
- package/blog/en/i18n_using_next-i18next.md +8 -0
- package/blog/en/i18n_using_next-intl.md +7 -0
- package/blog/en/intlayer_with_next-intl.md +8 -0
- package/blog/en/list_i18n_technologies/frameworks/flutter.md +0 -22
- package/blog/en/list_i18n_technologies/frameworks/svelte.md +19 -3
- package/blog/en/list_i18n_technologies/frameworks/vue.md +16 -2
- package/blog/en-GB/compiler_vs_declarative_i18n.md +1 -2
- package/blog/en-GB/i18n_using_next-i18next.md +8 -0
- package/blog/en-GB/i18n_using_next-intl.md +7 -0
- package/blog/en-GB/intlayer_with_next-intl.md +8 -0
- package/blog/en-GB/list_i18n_technologies/frameworks/flutter.md +0 -22
- package/blog/es/compiler_vs_declarative_i18n.md +1 -2
- package/blog/es/i18n_using_next-i18next.md +8 -0
- package/blog/es/i18n_using_next-intl.md +7 -0
- package/blog/es/intlayer_with_next-intl.md +8 -0
- package/blog/es/list_i18n_technologies/frameworks/flutter.md +0 -22
- package/blog/fr/compiler_vs_declarative_i18n.md +1 -2
- package/blog/fr/i18n_using_next-i18next.md +8 -0
- package/blog/fr/i18n_using_next-intl.md +7 -0
- package/blog/fr/intlayer_with_next-intl.md +8 -0
- package/blog/fr/list_i18n_technologies/frameworks/flutter.md +0 -22
- package/blog/hi/compiler_vs_declarative_i18n.md +2 -3
- package/blog/hi/i18n_using_next-i18next.md +8 -0
- package/blog/hi/i18n_using_next-intl.md +7 -0
- package/blog/hi/intlayer_with_next-intl.md +8 -0
- package/blog/hi/list_i18n_technologies/frameworks/flutter.md +0 -22
- package/blog/id/compiler_vs_declarative_i18n.md +1 -2
- package/blog/id/i18n_using_next-i18next.md +8 -0
- package/blog/id/i18n_using_next-intl.md +7 -0
- package/blog/id/intlayer_with_next-intl.md +8 -0
- package/blog/id/list_i18n_technologies/frameworks/flutter.md +0 -22
- package/blog/it/compiler_vs_declarative_i18n.md +1 -2
- package/blog/it/i18n_using_next-i18next.md +8 -0
- package/blog/it/i18n_using_next-intl.md +7 -0
- package/blog/it/intlayer_with_next-intl.md +8 -0
- package/blog/it/list_i18n_technologies/frameworks/flutter.md +0 -22
- package/blog/ja/compiler_vs_declarative_i18n.md +1 -2
- package/blog/ja/i18n_using_next-i18next.md +8 -0
- package/blog/ja/i18n_using_next-intl.md +7 -0
- package/blog/ja/intlayer_with_next-intl.md +8 -0
- package/blog/ja/list_i18n_technologies/frameworks/flutter.md +0 -22
- package/blog/ko/compiler_vs_declarative_i18n.md +2 -3
- package/blog/ko/i18n_using_next-i18next.md +8 -0
- package/blog/ko/i18n_using_next-intl.md +7 -0
- package/blog/ko/intlayer_with_next-intl.md +8 -0
- package/blog/ko/list_i18n_technologies/frameworks/flutter.md +0 -22
- package/blog/pl/compiler_vs_declarative_i18n.md +1 -2
- package/blog/pl/i18n_using_next-i18next.md +8 -0
- package/blog/pl/i18n_using_next-intl.md +7 -0
- package/blog/pl/intlayer_with_next-intl.md +8 -0
- package/blog/pl/list_i18n_technologies/frameworks/flutter.md +0 -22
- package/blog/pt/compiler_vs_declarative_i18n.md +1 -2
- package/blog/pt/i18n_using_next-i18next.md +8 -0
- package/blog/pt/i18n_using_next-intl.md +7 -0
- package/blog/pt/intlayer_with_next-intl.md +8 -0
- package/blog/pt/list_i18n_technologies/frameworks/flutter.md +0 -22
- package/blog/ru/compiler_vs_declarative_i18n.md +1 -2
- package/blog/ru/i18n_using_next-i18next.md +8 -0
- package/blog/ru/i18n_using_next-intl.md +7 -0
- package/blog/ru/intlayer_with_next-intl.md +8 -0
- package/blog/ru/list_i18n_technologies/frameworks/flutter.md +0 -22
- package/blog/tr/compiler_vs_declarative_i18n.md +2 -3
- package/blog/tr/i18n_using_next-i18next.md +8 -0
- package/blog/tr/i18n_using_next-intl.md +7 -0
- package/blog/tr/intlayer_with_next-intl.md +8 -0
- package/blog/tr/list_i18n_technologies/frameworks/flutter.md +0 -22
- package/blog/vi/compiler_vs_declarative_i18n.md +1 -2
- package/blog/vi/i18n_using_next-i18next.md +8 -0
- package/blog/vi/i18n_using_next-intl.md +7 -0
- package/blog/vi/intlayer_with_next-intl.md +8 -0
- package/blog/vi/list_i18n_technologies/frameworks/flutter.md +0 -22
- package/blog/zh/compiler_vs_declarative_i18n.md +1 -2
- package/blog/zh/i18n_using_next-i18next.md +8 -0
- package/blog/zh/i18n_using_next-intl.md +7 -0
- package/blog/zh/intlayer_with_next-intl.md +8 -0
- package/blog/zh/list_i18n_technologies/frameworks/flutter.md +0 -22
- package/dist/cjs/generated/docs.entry.cjs +19 -0
- package/dist/cjs/generated/docs.entry.cjs.map +1 -1
- package/dist/esm/generated/docs.entry.mjs +19 -0
- package/dist/esm/generated/docs.entry.mjs.map +1 -1
- package/dist/types/generated/docs.entry.d.ts +1 -0
- package/dist/types/generated/docs.entry.d.ts.map +1 -1
- package/docs/ar/bundle_optimization.md +6 -2
- package/docs/ar/compiler.md +133 -0
- package/docs/de/bundle_optimization.md +6 -2
- package/docs/de/compiler.md +133 -0
- package/docs/de/intlayer_with_nextjs_15.md +1 -1
- package/docs/de/per_locale_file.md +1 -1
- package/docs/en/bundle_optimization.md +6 -2
- package/docs/en/cli/index.md +2 -2
- package/docs/en/compiler.md +133 -0
- package/docs/en/intlayer_with_nextjs_14.md +0 -1
- package/docs/en-GB/bundle_optimization.md +6 -2
- package/docs/en-GB/compiler.md +133 -0
- package/docs/en-GB/packages/intlayer/getTranslation.md +1 -3
- package/docs/en-GB/packages/react-intlayer/t.md +1 -1
- package/docs/en-GB/packages/react-intlayer/useI18n.md +1 -1
- package/docs/es/bundle_optimization.md +6 -2
- package/docs/es/compiler.md +133 -0
- package/docs/fr/bundle_optimization.md +6 -2
- package/docs/fr/compiler.md +133 -0
- package/docs/fr/packages/react-intlayer/useI18n.md +1 -1
- package/docs/hi/bundle_optimization.md +6 -2
- package/docs/hi/compiler.md +133 -0
- package/docs/id/bundle_optimization.md +6 -2
- package/docs/id/compiler.md +133 -0
- package/docs/id/formatters.md +0 -1
- package/docs/id/intlayer_with_nextjs_14.md +1 -2
- package/docs/id/intlayer_with_nextjs_15.md +1 -1
- package/docs/it/bundle_optimization.md +6 -2
- package/docs/it/compiler.md +133 -0
- package/docs/ja/bundle_optimization.md +6 -2
- package/docs/ja/compiler.md +133 -0
- package/docs/ko/bundle_optimization.md +6 -2
- package/docs/ko/cli/index.md +20 -20
- package/docs/ko/compiler.md +133 -0
- package/docs/pl/bundle_optimization.md +6 -2
- package/docs/pl/compiler.md +133 -0
- package/docs/pl/formatters.md +0 -1
- package/docs/pl/intlayer_with_nextjs_14.md +1 -2
- package/docs/pl/intlayer_with_nextjs_15.md +1 -1
- package/docs/pt/bundle_optimization.md +6 -2
- package/docs/pt/compiler.md +133 -0
- package/docs/ru/bundle_optimization.md +6 -2
- package/docs/ru/compiler.md +133 -0
- package/docs/tr/bundle_optimization.md +6 -2
- package/docs/tr/compiler.md +133 -0
- package/docs/tr/intlayer_with_nextjs_14.md +2 -0
- package/docs/vi/bundle_optimization.md +6 -2
- package/docs/vi/compiler.md +133 -0
- package/docs/vi/intlayer_with_nextjs_14.md +1 -2
- package/docs/vi/intlayer_with_nextjs_15.md +1 -1
- package/docs/zh/bundle_optimization.md +6 -2
- package/docs/zh/compiler.md +133 -0
- package/package.json +10 -9
- package/src/generated/docs.entry.ts +19 -0
|
@@ -153,9 +153,13 @@ const content = useIntlayer("my-key");
|
|
|
153
153
|
// Kod zoptymalizowany (Dynamiczny)
|
|
154
154
|
const content = useDictionaryAsync({
|
|
155
155
|
en: () =>
|
|
156
|
-
import(".intlayer/dynamic_dictionary/en.json").then(
|
|
156
|
+
import(".intlayer/dynamic_dictionary/my-key/en.json").then(
|
|
157
|
+
(mod) => mod.default
|
|
158
|
+
),
|
|
157
159
|
fr: () =>
|
|
158
|
-
import(".intlayer/dynamic_dictionary/fr.json").then(
|
|
160
|
+
import(".intlayer/dynamic_dictionary/my-key/fr.json").then(
|
|
161
|
+
(mod) => mod.default
|
|
162
|
+
),
|
|
159
163
|
});
|
|
160
164
|
```
|
|
161
165
|
|
|
@@ -0,0 +1,133 @@
|
|
|
1
|
+
---
|
|
2
|
+
createdAt: 2025-09-09
|
|
3
|
+
updatedAt: 2025-09-09
|
|
4
|
+
title: Intlayer Compiler | Zautomatyzowane wydobywanie treści dla i18n
|
|
5
|
+
description: Zautomatyzuj proces internacjonalizacji za pomocą Intlayer Compiler. Wydobywaj treści bezpośrednio z komponentów dla szybszego i bardziej efektywnego i18n w Vite, Next.js i innych.
|
|
6
|
+
keywords:
|
|
7
|
+
- Intlayer
|
|
8
|
+
- Compiler
|
|
9
|
+
- Internacjonalizacja
|
|
10
|
+
- i18n
|
|
11
|
+
- Automatyzacja
|
|
12
|
+
- Wydobywanie
|
|
13
|
+
- Szybkość
|
|
14
|
+
- Vite
|
|
15
|
+
- Next.js
|
|
16
|
+
- React
|
|
17
|
+
- Vue
|
|
18
|
+
- Svelte
|
|
19
|
+
slugs:
|
|
20
|
+
- doc
|
|
21
|
+
- compiler
|
|
22
|
+
history:
|
|
23
|
+
- version: 7.3.1
|
|
24
|
+
date: 2025-11-27
|
|
25
|
+
changes: Wydanie kompilatora
|
|
26
|
+
---
|
|
27
|
+
|
|
28
|
+
# Intlayer Compiler | Zautomatyzowane wydobywanie treści dla i18n
|
|
29
|
+
|
|
30
|
+
## Czym jest Intlayer Compiler?
|
|
31
|
+
|
|
32
|
+
**Intlayer Compiler** to potężne narzędzie zaprojektowane w celu automatyzacji procesu internacjonalizacji (i18n) w Twoich aplikacjach. Przeszukuje Twój kod źródłowy (JSX, TSX, Vue, Svelte) w poszukiwaniu deklaracji treści, wydobywa je i automatycznie generuje niezbędne pliki słowników. Pozwala to na utrzymanie treści współlokalnie z komponentami, podczas gdy Intlayer zajmuje się zarządzaniem i synchronizacją Twoich słowników.
|
|
33
|
+
|
|
34
|
+
## Dlaczego warto używać Intlayer Compiler?
|
|
35
|
+
|
|
36
|
+
- **Automatyzacja**: Eliminuje ręczne kopiowanie i wklejanie treści do słowników.
|
|
37
|
+
- **Szybkość**: Optymalizowane wydobywanie treści zapewnia szybki proces budowania.
|
|
38
|
+
- **Doświadczenie programisty**: Zachowaj deklaracje treści dokładnie tam, gdzie są używane, co poprawia utrzymanie kodu.
|
|
39
|
+
- **Aktualizacje na żywo**: Obsługuje Hot Module Replacement (HMR) dla natychmiastowej informacji zwrotnej podczas tworzenia aplikacji.
|
|
40
|
+
|
|
41
|
+
Zobacz wpis na blogu [Compiler vs. Declarative i18n](https://github.com/aymericzip/intlayer/blob/main/docs/blog/pl/compiler_vs_declarative_i18n.md) dla głębszego porównania.
|
|
42
|
+
|
|
43
|
+
## Dlaczego nie używać Intlayer Compiler?
|
|
44
|
+
|
|
45
|
+
Chociaż kompilator oferuje doskonałe doświadczenie "działa od razu", wprowadza również pewne kompromisy, o których powinieneś wiedzieć:
|
|
46
|
+
|
|
47
|
+
- **Niejednoznaczność heurystyczna**: Kompilator musi zgadywać, co jest treścią skierowaną do użytkownika, a co logiką aplikacji (np. `className="active"`, kody statusu, ID produktów). W złożonych bazach kodu może to prowadzić do fałszywych pozytywów lub pominiętych ciągów znaków, które wymagają ręcznych adnotacji i wyjątków.
|
|
48
|
+
- **Tylko statyczna ekstrakcja**: Ekstrakcja oparta na kompilatorze opiera się na analizie statycznej. Ciągi znaków, które istnieją tylko w czasie wykonywania (kody błędów API, pola CMS itp.), nie mogą być odkryte ani przetłumaczone przez sam kompilator, więc nadal potrzebujesz uzupełniającej strategii i18n czasu wykonywania.
|
|
49
|
+
|
|
50
|
+
Aby uzyskać głębsze porównanie architektoniczne, zobacz wpis na blogu [Compiler vs. Declarative i18n](https://github.com/aymericzip/intlayer/blob/main/docs/blog/pl/compiler_vs_declarative_i18n.md).
|
|
51
|
+
|
|
52
|
+
Jako alternatywę, aby zautomatyzować proces i18n przy zachowaniu pełnej kontroli nad treścią, Intlayer zapewnia również polecenie auto-ekstrakcji `intlayer transform` (zobacz [dokumentację CLI](https://github.com/aymericzip/intlayer/blob/main/docs/docs/pl/cli/transform.md)) lub polecenie `Intlayer: extract content to Dictionary` z rozszerzenia Intlayer VS Code (zobacz [dokumentację rozszerzenia VS Code](https://github.com/aymericzip/intlayer/blob/main/docs/docs/pl/vs_code_extension.md)).
|
|
53
|
+
|
|
54
|
+
## Użycie
|
|
55
|
+
|
|
56
|
+
### Vite
|
|
57
|
+
|
|
58
|
+
Dla aplikacji opartych na Vite (React, Vue, Svelte itp.) najprostszym sposobem użycia kompilatora jest wtyczka `vite-intlayer`.
|
|
59
|
+
|
|
60
|
+
#### Instalacja
|
|
61
|
+
|
|
62
|
+
```bash
|
|
63
|
+
npm install vite-intlayer
|
|
64
|
+
```
|
|
65
|
+
|
|
66
|
+
#### Konfiguracja
|
|
67
|
+
|
|
68
|
+
Zaktualizuj swój plik `vite.config.ts`, aby dołączyć wtyczkę `intlayerCompiler`:
|
|
69
|
+
|
|
70
|
+
```ts fileName="vite.config.ts"
|
|
71
|
+
import { defineConfig } from "vite";
|
|
72
|
+
import { intlayer, intlayerCompiler } from "vite-intlayer";
|
|
73
|
+
|
|
74
|
+
export default defineConfig({
|
|
75
|
+
plugins: [
|
|
76
|
+
intlayer(),
|
|
77
|
+
intlayerCompiler(), // Dodaje wtyczkę kompilatora
|
|
78
|
+
],
|
|
79
|
+
});
|
|
80
|
+
```
|
|
81
|
+
|
|
82
|
+
#### Wsparcie dla frameworków
|
|
83
|
+
|
|
84
|
+
Wtyczka Vite automatycznie wykrywa i obsługuje różne typy plików:
|
|
85
|
+
|
|
86
|
+
- **React / JSX / TSX**: Obsługiwane natywnie.
|
|
87
|
+
- **Vue**: Wymaga `@intlayer/vue-compiler`.
|
|
88
|
+
- **Svelte**: Wymaga `@intlayer/svelte-compiler`.
|
|
89
|
+
|
|
90
|
+
Upewnij się, że zainstalowałeś odpowiedni pakiet kompilatora dla swojego frameworka:
|
|
91
|
+
|
|
92
|
+
```bash
|
|
93
|
+
# Dla Vue
|
|
94
|
+
npm install @intlayer/vue-compiler
|
|
95
|
+
|
|
96
|
+
# Dla Svelte
|
|
97
|
+
npm install @intlayer/svelte-compiler
|
|
98
|
+
```
|
|
99
|
+
|
|
100
|
+
### Next.js (Babel)
|
|
101
|
+
|
|
102
|
+
Dla Next.js lub innych aplikacji opartych na Webpack z użyciem Babel, możesz skonfigurować kompilator za pomocą wtyczki `@intlayer/babel`.
|
|
103
|
+
|
|
104
|
+
#### Instalacja
|
|
105
|
+
|
|
106
|
+
```bash
|
|
107
|
+
npm install @intlayer/babel
|
|
108
|
+
```
|
|
109
|
+
|
|
110
|
+
#### Konfiguracja
|
|
111
|
+
|
|
112
|
+
Zaktualizuj swój plik `babel.config.js` (lub `babel.config.json`), aby uwzględnić wtyczkę ekstrakcji. Udostępniamy pomocniczą funkcję `getExtractPluginOptions`, która automatycznie ładuje Twoją konfigurację Intlayer.
|
|
113
|
+
|
|
114
|
+
```js fileName="babel.config.js"
|
|
115
|
+
const {
|
|
116
|
+
intlayerExtractBabelPlugin,
|
|
117
|
+
intlayerOptimizeBabelPlugin,
|
|
118
|
+
getExtractPluginOptions,
|
|
119
|
+
getOptimizePluginOptions,
|
|
120
|
+
} = require("@intlayer/babel");
|
|
121
|
+
|
|
122
|
+
module.exports = {
|
|
123
|
+
presets: ["next/babel"],
|
|
124
|
+
plugins: [
|
|
125
|
+
// Extract content from components into dictionaries
|
|
126
|
+
[intlayerExtractBabelPlugin, getExtractPluginOptions()],
|
|
127
|
+
// Optimize imports by replacing useIntlayer with direct dictionary imports
|
|
128
|
+
[intlayerOptimizeBabelPlugin, getOptimizePluginOptions()],
|
|
129
|
+
],
|
|
130
|
+
};
|
|
131
|
+
```
|
|
132
|
+
|
|
133
|
+
Ta konfiguracja zapewnia, że zawartość zadeklarowana w Twoich komponentach jest automatycznie wyodrębniana i używana do generowania słowników podczas procesu budowania.
|
package/docs/pl/formatters.md
CHANGED
|
@@ -17,7 +17,6 @@ slugs:
|
|
|
17
17
|
- 14
|
|
18
18
|
applicationTemplate: https://github.com/aymericzip/intlayer-next-14-template
|
|
19
19
|
history:
|
|
20
|
-
- version: 7.0.6
|
|
21
20
|
- version: 6.2.0
|
|
22
21
|
date: 2025-10-09
|
|
23
22
|
changes: Dodano dokumentację dla hooka `useLocale` z opcją `onLocaleChange`
|
|
@@ -26,7 +25,7 @@ history:
|
|
|
26
25
|
changes: Dodano dokumentację dla funkcji `getLocale` w akcjach serwera
|
|
27
26
|
- version: 5.6.2
|
|
28
27
|
date: 2025-09-22
|
|
29
|
-
|
|
28
|
+
changes: Dodano dokumentację dla helpera `multipleMiddlewares`
|
|
30
29
|
- version: 5.6.0
|
|
31
30
|
date: 2025-07-06
|
|
32
31
|
changes: Przekształcono funkcję `withIntlayer()` na funkcję opartą na promise
|
|
@@ -26,7 +26,7 @@ history:
|
|
|
26
26
|
changes: Dodano wzmiankę o funkcji `withIntlayerSync()`
|
|
27
27
|
- version: 6.2.0
|
|
28
28
|
date: 2025-10-09
|
|
29
|
-
|
|
29
|
+
changes: Dodano dokumentację dla hooka `useLocale` z opcją `onLocaleChange`
|
|
30
30
|
- version: 5.6.6
|
|
31
31
|
date: 2025-10-02
|
|
32
32
|
changes: Dodano dokumentację dla funkcji `getLocale` w akcjach serwerowych
|
|
@@ -153,9 +153,13 @@ const content = useIntlayer("my-key");
|
|
|
153
153
|
// Código otimizado (Dinâmico)
|
|
154
154
|
const content = useDictionaryAsync({
|
|
155
155
|
en: () =>
|
|
156
|
-
import(".intlayer/dynamic_dictionary/en.json").then(
|
|
156
|
+
import(".intlayer/dynamic_dictionary/my-key/en.json").then(
|
|
157
|
+
(mod) => mod.default
|
|
158
|
+
),
|
|
157
159
|
fr: () =>
|
|
158
|
-
import(".intlayer/dynamic_dictionary/fr.json").then(
|
|
160
|
+
import(".intlayer/dynamic_dictionary/my-key/fr.json").then(
|
|
161
|
+
(mod) => mod.default
|
|
162
|
+
),
|
|
159
163
|
});
|
|
160
164
|
```
|
|
161
165
|
|
|
@@ -0,0 +1,133 @@
|
|
|
1
|
+
---
|
|
2
|
+
createdAt: 2025-09-09
|
|
3
|
+
updatedAt: 2025-09-09
|
|
4
|
+
title: Intlayer Compiler | Extração Automática de Conteúdo para i18n
|
|
5
|
+
description: Automatize seu processo de internacionalização com o Intlayer Compiler. Extraia conteúdo diretamente dos seus componentes para uma i18n mais rápida e eficiente em Vite, Next.js e mais.
|
|
6
|
+
keywords:
|
|
7
|
+
- Intlayer
|
|
8
|
+
- Compiler
|
|
9
|
+
- Internacionalização
|
|
10
|
+
- i18n
|
|
11
|
+
- Automação
|
|
12
|
+
- Extração
|
|
13
|
+
- Velocidade
|
|
14
|
+
- Vite
|
|
15
|
+
- Next.js
|
|
16
|
+
- React
|
|
17
|
+
- Vue
|
|
18
|
+
- Svelte
|
|
19
|
+
slugs:
|
|
20
|
+
- doc
|
|
21
|
+
- compiler
|
|
22
|
+
history:
|
|
23
|
+
- version: 7.3.1
|
|
24
|
+
date: 2025-11-27
|
|
25
|
+
changes: Lançamento do Compiler
|
|
26
|
+
---
|
|
27
|
+
|
|
28
|
+
# Intlayer Compiler | Extração Automática de Conteúdo para i18n
|
|
29
|
+
|
|
30
|
+
## O que é o Intlayer Compiler?
|
|
31
|
+
|
|
32
|
+
O **Intlayer Compiler** é uma ferramenta poderosa projetada para automatizar o processo de internacionalização (i18n) em suas aplicações. Ele escaneia seu código-fonte (JSX, TSX, Vue, Svelte) em busca de declarações de conteúdo, extrai-as e gera automaticamente os arquivos de dicionário necessários. Isso permite que você mantenha seu conteúdo localizado junto aos seus componentes, enquanto o Intlayer gerencia e sincroniza seus dicionários.
|
|
33
|
+
|
|
34
|
+
## Por que Usar o Intlayer Compiler?
|
|
35
|
+
|
|
36
|
+
- **Automação**: Elimina a cópia manual e colagem de conteúdo nos dicionários.
|
|
37
|
+
- **Velocidade**: Extração de conteúdo otimizada garantindo que seu processo de build permaneça rápido.
|
|
38
|
+
- **Experiência do Desenvolvedor**: Mantenha as declarações de conteúdo exatamente onde são usadas, melhorando a manutenção.
|
|
39
|
+
- **Atualizações em Tempo Real**: Suporta Hot Module Replacement (HMR) para feedback instantâneo durante o desenvolvimento.
|
|
40
|
+
|
|
41
|
+
Veja o post do blog [Compiler vs. Declarative i18n](https://github.com/aymericzip/intlayer/blob/main/docs/blog/pt/compiler_vs_declarative_i18n.md) para uma comparação mais aprofundada.
|
|
42
|
+
|
|
43
|
+
## Por que não usar o Intlayer Compiler?
|
|
44
|
+
|
|
45
|
+
Embora o compilador ofereça uma excelente experiência "funciona automaticamente", ele também introduz algumas compensações das quais você deve estar ciente:
|
|
46
|
+
|
|
47
|
+
- **Ambiguidade heurística**: O compilador deve adivinhar o que é conteúdo voltado para o usuário versus a lógica da aplicação (por exemplo, `className="active"`, códigos de status, IDs de produtos). Em bases de código complexas, isso pode levar a falsos positivos ou strings perdidas que exigem anotações manuais e exceções.
|
|
48
|
+
- **Extração apenas estática**: A extração baseada em compilador depende de análise estática. Strings que existem apenas em tempo de execução (códigos de erro de API, campos CMS, etc.) não podem ser descobertas ou traduzidas pelo compilador sozinho, então você ainda precisa de uma estratégia i18n de tempo de execução complementar.
|
|
49
|
+
|
|
50
|
+
Para uma comparação arquitetural mais profunda, veja o post do blog [Compiler vs. Declarative i18n](https://github.com/aymericzip/intlayer/blob/main/docs/blog/pt/compiler_vs_declarative_i18n.md).
|
|
51
|
+
|
|
52
|
+
Como alternativa, para automatizar seu processo i18n mantendo controle total sobre seu conteúdo, o Intlayer também fornece um comando de auto-extração `intlayer transform` (consulte a [documentação CLI](https://github.com/aymericzip/intlayer/blob/main/docs/docs/pt/cli/transform.md)), ou o comando `Intlayer: extract content to Dictionary` da extensão Intlayer VS Code (consulte a [documentação da extensão VS Code](https://github.com/aymericzip/intlayer/blob/main/docs/docs/pt/vs_code_extension.md)).
|
|
53
|
+
|
|
54
|
+
## Uso
|
|
55
|
+
|
|
56
|
+
### Vite
|
|
57
|
+
|
|
58
|
+
Para aplicações baseadas em Vite (React, Vue, Svelte, etc.), a maneira mais fácil de usar o compilador é através do plugin `vite-intlayer`.
|
|
59
|
+
|
|
60
|
+
#### Instalação
|
|
61
|
+
|
|
62
|
+
```bash
|
|
63
|
+
npm install vite-intlayer
|
|
64
|
+
```
|
|
65
|
+
|
|
66
|
+
#### Configuração
|
|
67
|
+
|
|
68
|
+
Atualize seu `vite.config.ts` para incluir o plugin `intlayerCompiler`:
|
|
69
|
+
|
|
70
|
+
```ts fileName="vite.config.ts"
|
|
71
|
+
import { defineConfig } from "vite";
|
|
72
|
+
import { intlayer, intlayerCompiler } from "vite-intlayer";
|
|
73
|
+
|
|
74
|
+
export default defineConfig({
|
|
75
|
+
plugins: [
|
|
76
|
+
intlayer(),
|
|
77
|
+
intlayerCompiler(), // Adiciona o plugin do compilador
|
|
78
|
+
],
|
|
79
|
+
});
|
|
80
|
+
```
|
|
81
|
+
|
|
82
|
+
#### Suporte a Frameworks
|
|
83
|
+
|
|
84
|
+
O plugin do Vite detecta e lida automaticamente com diferentes tipos de arquivos:
|
|
85
|
+
|
|
86
|
+
- **React / JSX / TSX**: Suportado nativamente.
|
|
87
|
+
- **Vue**: Requer `@intlayer/vue-compiler`.
|
|
88
|
+
- **Svelte**: Requer `@intlayer/svelte-compiler`.
|
|
89
|
+
|
|
90
|
+
Certifique-se de instalar o pacote do compilador apropriado para o seu framework:
|
|
91
|
+
|
|
92
|
+
```bash
|
|
93
|
+
# Para Vue
|
|
94
|
+
npm install @intlayer/vue-compiler
|
|
95
|
+
|
|
96
|
+
# Para Svelte
|
|
97
|
+
npm install @intlayer/svelte-compiler
|
|
98
|
+
```
|
|
99
|
+
|
|
100
|
+
### Next.js (Babel)
|
|
101
|
+
|
|
102
|
+
Para Next.js ou outras aplicações baseadas em Webpack que usam Babel, você pode configurar o compilador usando o plugin `@intlayer/babel`.
|
|
103
|
+
|
|
104
|
+
#### Instalação
|
|
105
|
+
|
|
106
|
+
```bash
|
|
107
|
+
npm install @intlayer/babel
|
|
108
|
+
```
|
|
109
|
+
|
|
110
|
+
#### Configuração
|
|
111
|
+
|
|
112
|
+
Atualize seu `babel.config.js` (ou `babel.config.json`) para incluir o plugin de extração. Fornecemos um helper `getExtractPluginOptions` para carregar automaticamente sua configuração do Intlayer.
|
|
113
|
+
|
|
114
|
+
```js fileName="babel.config.js"
|
|
115
|
+
const {
|
|
116
|
+
intlayerExtractBabelPlugin,
|
|
117
|
+
intlayerOptimizeBabelPlugin,
|
|
118
|
+
getExtractPluginOptions,
|
|
119
|
+
getOptimizePluginOptions,
|
|
120
|
+
} = require("@intlayer/babel");
|
|
121
|
+
|
|
122
|
+
module.exports = {
|
|
123
|
+
presets: ["next/babel"],
|
|
124
|
+
plugins: [
|
|
125
|
+
// Extract content from components into dictionaries
|
|
126
|
+
[intlayerExtractBabelPlugin, getExtractPluginOptions()],
|
|
127
|
+
// Optimize imports by replacing useIntlayer with direct dictionary imports
|
|
128
|
+
[intlayerOptimizeBabelPlugin, getOptimizePluginOptions()],
|
|
129
|
+
],
|
|
130
|
+
};
|
|
131
|
+
```
|
|
132
|
+
|
|
133
|
+
Esta configuração garante que o conteúdo declarado em seus componentes seja automaticamente extraído e usado para gerar dicionários durante o processo de build.
|
|
@@ -153,9 +153,13 @@ const content = useIntlayer("my-key");
|
|
|
153
153
|
// Оптимизированный код (Динамический)
|
|
154
154
|
const content = useDictionaryAsync({
|
|
155
155
|
en: () =>
|
|
156
|
-
import(".intlayer/dynamic_dictionary/en.json").then(
|
|
156
|
+
import(".intlayer/dynamic_dictionary/my-key/en.json").then(
|
|
157
|
+
(mod) => mod.default
|
|
158
|
+
),
|
|
157
159
|
fr: () =>
|
|
158
|
-
import(".intlayer/dynamic_dictionary/fr.json").then(
|
|
160
|
+
import(".intlayer/dynamic_dictionary/my-key/fr.json").then(
|
|
161
|
+
(mod) => mod.default
|
|
162
|
+
),
|
|
159
163
|
});
|
|
160
164
|
```
|
|
161
165
|
|
|
@@ -0,0 +1,133 @@
|
|
|
1
|
+
---
|
|
2
|
+
createdAt: 2025-09-09
|
|
3
|
+
updatedAt: 2025-09-09
|
|
4
|
+
title: Intlayer Compiler | Автоматизированное извлечение контента для i18n
|
|
5
|
+
description: Автоматизируйте процесс интернационализации с помощью Intlayer Compiler. Извлекайте контент напрямую из ваших компонентов для более быстрого и эффективного i18n в Vite, Next.js и других.
|
|
6
|
+
keywords:
|
|
7
|
+
- Intlayer
|
|
8
|
+
- Compiler
|
|
9
|
+
- Интернационализация
|
|
10
|
+
- i18n
|
|
11
|
+
- Автоматизация
|
|
12
|
+
- Извлечение
|
|
13
|
+
- Скорость
|
|
14
|
+
- Vite
|
|
15
|
+
- Next.js
|
|
16
|
+
- React
|
|
17
|
+
- Vue
|
|
18
|
+
- Svelte
|
|
19
|
+
slugs:
|
|
20
|
+
- doc
|
|
21
|
+
- compiler
|
|
22
|
+
history:
|
|
23
|
+
- version: 7.3.1
|
|
24
|
+
date: 2025-11-27
|
|
25
|
+
changes: Выпуск Compiler
|
|
26
|
+
---
|
|
27
|
+
|
|
28
|
+
# Intlayer Compiler | Автоматизированное извлечение контента для i18n
|
|
29
|
+
|
|
30
|
+
## Что такое Intlayer Compiler?
|
|
31
|
+
|
|
32
|
+
**Intlayer Compiler** — это мощный инструмент, разработанный для автоматизации процесса интернационализации (i18n) в ваших приложениях. Он сканирует ваш исходный код (JSX, TSX, Vue, Svelte) на предмет объявлений контента, извлекает их и автоматически генерирует необходимые файлы словарей. Это позволяет вам хранить контент вместе с компонентами, в то время как Intlayer управляет и синхронизирует ваши словари.
|
|
33
|
+
|
|
34
|
+
## Почему стоит использовать Intlayer Compiler?
|
|
35
|
+
|
|
36
|
+
- **Автоматизация**: устраняет необходимость вручную копировать и вставлять контент в словари.
|
|
37
|
+
- **Скорость**: оптимизированное извлечение контента обеспечивает быструю сборку.
|
|
38
|
+
- **Опыт разработчика**: храните объявления контента прямо там, где они используются, что улучшает поддерживаемость.
|
|
39
|
+
- **Живые обновления**: поддержка Hot Module Replacement (HMR) для мгновенной обратной связи во время разработки.
|
|
40
|
+
|
|
41
|
+
См. блог-пост [Compiler vs. Declarative i18n](https://github.com/aymericzip/intlayer/blob/main/docs/blog/ru/compiler_vs_declarative_i18n.md) для более глубокого сравнения.
|
|
42
|
+
|
|
43
|
+
## Почему не использовать Intlayer Compiler?
|
|
44
|
+
|
|
45
|
+
Хотя компилятор предлагает отличный опыт "работает из коробки", он также вводит некоторые компромиссы, о которых вы должны знать:
|
|
46
|
+
|
|
47
|
+
- **Эвристическая неоднозначность**: Компилятор должен угадывать, что является пользовательским контентом, а что — логикой приложения (например, `className="active"`, коды состояния, ID продуктов). В сложных кодовых базах это может привести к ложным срабатываниям или пропущенным строкам, которые требуют ручных аннотаций и исключений.
|
|
48
|
+
- **Только статическое извлечение**: Извлечение на основе компилятора полагается на статический анализ. Строки, которые существуют только во время выполнения (коды ошибок API, поля CMS и т.д.), не могут быть обнаружены или переведены компилятором в одиночку, поэтому вам все еще нужна дополнительная стратегия i18n времени выполнения.
|
|
49
|
+
|
|
50
|
+
Для более глубокого архитектурного сравнения см. блог-пост [Compiler vs. Declarative i18n](https://github.com/aymericzip/intlayer/blob/main/docs/blog/ru/compiler_vs_declarative_i18n.md).
|
|
51
|
+
|
|
52
|
+
В качестве альтернативы, для автоматизации процесса i18n при сохранении полного контроля над контентом, Intlayer также предоставляет команду автоматического извлечения `intlayer transform` (см. [документацию CLI](https://github.com/aymericzip/intlayer/blob/main/docs/docs/ru/cli/transform.md)) или команду `Intlayer: extract content to Dictionary` из расширения Intlayer VS Code (см. [документацию расширения VS Code](https://github.com/aymericzip/intlayer/blob/main/docs/docs/ru/vs_code_extension.md)).
|
|
53
|
+
|
|
54
|
+
## Использование
|
|
55
|
+
|
|
56
|
+
### Vite
|
|
57
|
+
|
|
58
|
+
Для приложений на базе Vite (React, Vue, Svelte и др.) самый простой способ использовать компилятор — через плагин `vite-intlayer`.
|
|
59
|
+
|
|
60
|
+
#### Установка
|
|
61
|
+
|
|
62
|
+
```bash
|
|
63
|
+
npm install vite-intlayer
|
|
64
|
+
```
|
|
65
|
+
|
|
66
|
+
#### Конфигурация
|
|
67
|
+
|
|
68
|
+
Обновите ваш `vite.config.ts`, чтобы включить плагин `intlayerCompiler`:
|
|
69
|
+
|
|
70
|
+
```ts fileName="vite.config.ts"
|
|
71
|
+
import { defineConfig } from "vite";
|
|
72
|
+
import { intlayer, intlayerCompiler } from "vite-intlayer";
|
|
73
|
+
|
|
74
|
+
export default defineConfig({
|
|
75
|
+
plugins: [
|
|
76
|
+
intlayer(),
|
|
77
|
+
intlayerCompiler(), // Добавляет плагин компилятора
|
|
78
|
+
],
|
|
79
|
+
});
|
|
80
|
+
```
|
|
81
|
+
|
|
82
|
+
#### Поддержка фреймворков
|
|
83
|
+
|
|
84
|
+
Плагин Vite автоматически обнаруживает и обрабатывает различные типы файлов:
|
|
85
|
+
|
|
86
|
+
- **React / JSX / TSX**: Обрабатывается нативно.
|
|
87
|
+
- **Vue**: Требуется `@intlayer/vue-compiler`.
|
|
88
|
+
- **Svelte**: Требуется `@intlayer/svelte-compiler`.
|
|
89
|
+
|
|
90
|
+
Убедитесь, что установлен соответствующий пакет компилятора для вашего фреймворка:
|
|
91
|
+
|
|
92
|
+
```bash
|
|
93
|
+
# Для Vue
|
|
94
|
+
npm install @intlayer/vue-compiler
|
|
95
|
+
|
|
96
|
+
# Для Svelte
|
|
97
|
+
npm install @intlayer/svelte-compiler
|
|
98
|
+
```
|
|
99
|
+
|
|
100
|
+
### Next.js (Babel)
|
|
101
|
+
|
|
102
|
+
Для Next.js или других приложений на основе Webpack с использованием Babel вы можете настроить компилятор с помощью плагина `@intlayer/babel`.
|
|
103
|
+
|
|
104
|
+
#### Установка
|
|
105
|
+
|
|
106
|
+
```bash
|
|
107
|
+
npm install @intlayer/babel
|
|
108
|
+
```
|
|
109
|
+
|
|
110
|
+
#### Конфигурация
|
|
111
|
+
|
|
112
|
+
Обновите ваш файл `babel.config.js` (или `babel.config.json`), чтобы включить плагин извлечения. Мы предоставляем вспомогательную функцию `getExtractPluginOptions` для автоматической загрузки вашей конфигурации Intlayer.
|
|
113
|
+
|
|
114
|
+
```js fileName="babel.config.js"
|
|
115
|
+
const {
|
|
116
|
+
intlayerExtractBabelPlugin,
|
|
117
|
+
intlayerOptimizeBabelPlugin,
|
|
118
|
+
getExtractPluginOptions,
|
|
119
|
+
getOptimizePluginOptions,
|
|
120
|
+
} = require("@intlayer/babel");
|
|
121
|
+
|
|
122
|
+
module.exports = {
|
|
123
|
+
presets: ["next/babel"],
|
|
124
|
+
plugins: [
|
|
125
|
+
// Extract content from components into dictionaries
|
|
126
|
+
[intlayerExtractBabelPlugin, getExtractPluginOptions()],
|
|
127
|
+
// Optimize imports by replacing useIntlayer with direct dictionary imports
|
|
128
|
+
[intlayerOptimizeBabelPlugin, getOptimizePluginOptions()],
|
|
129
|
+
],
|
|
130
|
+
};
|
|
131
|
+
```
|
|
132
|
+
|
|
133
|
+
Эта конфигурация гарантирует, что контент, объявленный в ваших компонентах, автоматически извлекается и используется для генерации словарей во время процесса сборки.
|
|
@@ -153,9 +153,13 @@ const content = useIntlayer("my-key");
|
|
|
153
153
|
// Optimize edilmiş kod (Dinamik)
|
|
154
154
|
const content = useDictionaryAsync({
|
|
155
155
|
en: () =>
|
|
156
|
-
import(".intlayer/dynamic_dictionary/en.json").then(
|
|
156
|
+
import(".intlayer/dynamic_dictionary/my-key/en.json").then(
|
|
157
|
+
(mod) => mod.default
|
|
158
|
+
),
|
|
157
159
|
fr: () =>
|
|
158
|
-
import(".intlayer/dynamic_dictionary/fr.json").then(
|
|
160
|
+
import(".intlayer/dynamic_dictionary/my-key/fr.json").then(
|
|
161
|
+
(mod) => mod.default
|
|
162
|
+
),
|
|
159
163
|
});
|
|
160
164
|
```
|
|
161
165
|
|
|
@@ -0,0 +1,133 @@
|
|
|
1
|
+
---
|
|
2
|
+
createdAt: 2025-09-09
|
|
3
|
+
updatedAt: 2025-09-09
|
|
4
|
+
title: Intlayer Compiler | i18n için Otomatik İçerik Çıkarımı
|
|
5
|
+
description: Uluslararasılaştırma sürecinizi Intlayer Compiler ile otomatikleştirin. İçeriği bileşenlerinizden doğrudan çıkararak Vite, Next.js ve daha fazlasında daha hızlı ve verimli i18n sağlayın.
|
|
6
|
+
keywords:
|
|
7
|
+
- Intlayer
|
|
8
|
+
- Compiler
|
|
9
|
+
- Uluslararasılaştırma
|
|
10
|
+
- i18n
|
|
11
|
+
- Otomasyon
|
|
12
|
+
- Çıkarım
|
|
13
|
+
- Hız
|
|
14
|
+
- Vite
|
|
15
|
+
- Next.js
|
|
16
|
+
- React
|
|
17
|
+
- Vue
|
|
18
|
+
- Svelte
|
|
19
|
+
slugs:
|
|
20
|
+
- doc
|
|
21
|
+
- compiler
|
|
22
|
+
history:
|
|
23
|
+
- version: 7.3.1
|
|
24
|
+
date: 2025-11-27
|
|
25
|
+
changes: Compiler Yayınlandı
|
|
26
|
+
---
|
|
27
|
+
|
|
28
|
+
# Intlayer Compiler | i18n için Otomatik İçerik Çıkarımı
|
|
29
|
+
|
|
30
|
+
## Intlayer Compiler Nedir?
|
|
31
|
+
|
|
32
|
+
**Intlayer Compiler**, uygulamalarınızda uluslararasılaştırma (i18n) sürecini otomatikleştirmek için tasarlanmış güçlü bir araçtır. Kaynak kodunuzu (JSX, TSX, Vue, Svelte) içerik bildirimleri için tarar, bunları çıkarır ve gerekli sözlük dosyalarını otomatik olarak oluşturur. Bu sayede içeriğinizi bileşenlerinizle birlikte tutabilirken, Intlayer sözlüklerinizin yönetimi ve senkronizasyonunu üstlenir.
|
|
33
|
+
|
|
34
|
+
## Neden Intlayer Compiler Kullanmalısınız?
|
|
35
|
+
|
|
36
|
+
- **Otomasyon**: İçeriğin sözlüklere manuel olarak kopyalanıp yapıştırılmasını ortadan kaldırır.
|
|
37
|
+
- **Hız**: Derleme sürecinizin hızlı kalmasını sağlayan optimize edilmiş içerik çıkarımı.
|
|
38
|
+
- **Geliştirici Deneyimi**: İçerik bildirimlerini kullanıldıkları yerde tutarak bakım kolaylığı sağlar.
|
|
39
|
+
- **Canlı Güncellemeler**: Geliştirme sırasında anlık geri bildirim için Hot Module Replacement (HMR) desteği sağlar.
|
|
40
|
+
|
|
41
|
+
Daha derin bir karşılaştırma için [Compiler vs. Declarative i18n](https://github.com/aymericzip/intlayer/blob/main/docs/blog/en/compiler_vs_declarative_i18n.md) blog yazısına bakabilirsiniz.
|
|
42
|
+
|
|
43
|
+
## Neden Intlayer Compiler Kullanmamalısınız?
|
|
44
|
+
|
|
45
|
+
Derleyici mükemmel bir "hemen çalışır" deneyimi sunarken, aynı zamanda farkında olmanız gereken bazı ödünleşmeler de getirir:
|
|
46
|
+
|
|
47
|
+
- **Sezgisel belirsizlik**: Derleyici, kullanıcıya yönelik içerik ile uygulama mantığı arasındaki farkı tahmin etmek zorundadır (örneğin, `className="active"`, durum kodları, ürün kimlikleri). Karmaşık kod tabanlarında, bu manuel açıklamalar ve istisnalar gerektiren yanlış pozitifler veya kaçırılan dizelerle sonuçlanabilir.
|
|
48
|
+
- **Yalnızca statik çıkarım**: Derleyici tabanlı çıkarım statik analize dayanır. Yalnızca çalışma zamanında var olan dizeler (API hata kodları, CMS alanları vb.) derleyici tarafından tek başına keşfedilemez veya çevrilemez, bu nedenle hala tamamlayıcı bir çalışma zamanı i18n stratejisine ihtiyacınız vardır.
|
|
49
|
+
|
|
50
|
+
Daha derin bir mimari karşılaştırma için [Compiler vs. Declarative i18n](https://github.com/aymericzip/intlayer/blob/main/docs/blog/en/compiler_vs_declarative_i18n.md) blog yazısına bakın.
|
|
51
|
+
|
|
52
|
+
Alternatif olarak, içeriğiniz üzerinde tam kontrolü korurken i18n sürecinizi otomatikleştirmek için, Intlayer ayrıca otomatik çıkarım komutu `intlayer transform` (bkz. [CLI dokümantasyonu](https://github.com/aymericzip/intlayer/blob/main/docs/docs/tr/cli/transform.md)) veya Intlayer VS Code uzantısının `Intlayer: extract content to Dictionary` komutunu (bkz. [VS Code uzantı dokümantasyonu](https://github.com/aymericzip/intlayer/blob/main/docs/docs/tr/vs_code_extension.md)) sağlar.
|
|
53
|
+
|
|
54
|
+
## Kullanım
|
|
55
|
+
|
|
56
|
+
### Vite
|
|
57
|
+
|
|
58
|
+
Vite tabanlı uygulamalar (React, Vue, Svelte, vb.) için derleyiciyi kullanmanın en kolay yolu `vite-intlayer` eklentisidir.
|
|
59
|
+
|
|
60
|
+
#### Kurulum
|
|
61
|
+
|
|
62
|
+
```bash
|
|
63
|
+
npm install vite-intlayer
|
|
64
|
+
```
|
|
65
|
+
|
|
66
|
+
#### Konfigürasyon
|
|
67
|
+
|
|
68
|
+
`vite.config.ts` dosyanızı `intlayerCompiler` eklentisini içerecek şekilde güncelleyin:
|
|
69
|
+
|
|
70
|
+
```ts fileName="vite.config.ts"
|
|
71
|
+
import { defineConfig } from "vite";
|
|
72
|
+
import { intlayer, intlayerCompiler } from "vite-intlayer";
|
|
73
|
+
|
|
74
|
+
export default defineConfig({
|
|
75
|
+
plugins: [
|
|
76
|
+
intlayer(),
|
|
77
|
+
intlayerCompiler(), // Derleyici eklentisini ekler
|
|
78
|
+
],
|
|
79
|
+
});
|
|
80
|
+
```
|
|
81
|
+
|
|
82
|
+
#### Framework Desteği
|
|
83
|
+
|
|
84
|
+
Vite eklentisi farklı dosya türlerini otomatik olarak algılar ve işler:
|
|
85
|
+
|
|
86
|
+
- **React / JSX / TSX**: Yerel olarak desteklenir.
|
|
87
|
+
- **Vue**: `@intlayer/vue-compiler` gerektirir.
|
|
88
|
+
- **Svelte**: `@intlayer/svelte-compiler` gerektirir.
|
|
89
|
+
|
|
90
|
+
Framework'ünüz için uygun derleyici paketini kurduğunuzdan emin olun:
|
|
91
|
+
|
|
92
|
+
```bash
|
|
93
|
+
# Vue için
|
|
94
|
+
npm install @intlayer/vue-compiler
|
|
95
|
+
|
|
96
|
+
# Svelte için
|
|
97
|
+
npm install @intlayer/svelte-compiler
|
|
98
|
+
```
|
|
99
|
+
|
|
100
|
+
### Next.js (Babel)
|
|
101
|
+
|
|
102
|
+
Next.js veya Babel kullanan diğer Webpack tabanlı uygulamalar için, derleyiciyi `@intlayer/babel` eklentisi ile yapılandırabilirsiniz.
|
|
103
|
+
|
|
104
|
+
#### Kurulum
|
|
105
|
+
|
|
106
|
+
```bash
|
|
107
|
+
npm install @intlayer/babel
|
|
108
|
+
```
|
|
109
|
+
|
|
110
|
+
#### Konfigürasyon
|
|
111
|
+
|
|
112
|
+
`babel.config.js` (veya `babel.config.json`) dosyanızı, extraction (çıkarma) eklentisini içerecek şekilde güncelleyin. Intlayer yapılandırmanızı otomatik olarak yüklemek için bir yardımcı `getExtractPluginOptions` sağlıyoruz.
|
|
113
|
+
|
|
114
|
+
```js fileName="babel.config.js"
|
|
115
|
+
const {
|
|
116
|
+
intlayerExtractBabelPlugin,
|
|
117
|
+
intlayerOptimizeBabelPlugin,
|
|
118
|
+
getExtractPluginOptions,
|
|
119
|
+
getOptimizePluginOptions,
|
|
120
|
+
} = require("@intlayer/babel");
|
|
121
|
+
|
|
122
|
+
module.exports = {
|
|
123
|
+
presets: ["next/babel"],
|
|
124
|
+
plugins: [
|
|
125
|
+
// Extract content from components into dictionaries
|
|
126
|
+
[intlayerExtractBabelPlugin, getExtractPluginOptions()],
|
|
127
|
+
// Optimize imports by replacing useIntlayer with direct dictionary imports
|
|
128
|
+
[intlayerOptimizeBabelPlugin, getOptimizePluginOptions()],
|
|
129
|
+
],
|
|
130
|
+
};
|
|
131
|
+
```
|
|
132
|
+
|
|
133
|
+
Bu yapılandırma, bileşenlerinizde beyan edilen içeriğin otomatik olarak çıkarılmasını ve derleme süreciniz sırasında sözlüklerin oluşturulmasında kullanılmasını sağlar.
|
|
@@ -1,4 +1,6 @@
|
|
|
1
1
|
---
|
|
2
|
+
createdAt: 2024-12-06
|
|
3
|
+
updatedAt: 2025-09-22
|
|
2
4
|
title: Next.js 14 and App Router uygulamanızı nasıl çevirirsiniz – i18n rehberi 2025
|
|
3
5
|
description: Next.js 14 ile Intlayer entegrasyonu. Next.js 14 uygulamanızda çok dilli içerik yönetimi için Intlayer'ı nasıl kuracağınızı ve kullanacağınızı öğrenin.
|
|
4
6
|
keywords:
|
|
@@ -153,9 +153,13 @@ const content = useIntlayer("my-key");
|
|
|
153
153
|
// Mã tối ưu (Động)
|
|
154
154
|
const content = useDictionaryAsync({
|
|
155
155
|
en: () =>
|
|
156
|
-
import(".intlayer/dynamic_dictionary/en.json").then(
|
|
156
|
+
import(".intlayer/dynamic_dictionary/my-key/en.json").then(
|
|
157
|
+
(mod) => mod.default
|
|
158
|
+
),
|
|
157
159
|
fr: () =>
|
|
158
|
-
import(".intlayer/dynamic_dictionary/fr.json").then(
|
|
160
|
+
import(".intlayer/dynamic_dictionary/my-key/fr.json").then(
|
|
161
|
+
(mod) => mod.default
|
|
162
|
+
),
|
|
159
163
|
});
|
|
160
164
|
```
|
|
161
165
|
|