@intlayer/docs 6.1.6-canary.0 → 6.1.6
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/en/next-i18next_vs_next-intl_vs_intlayer.md +71 -80
- package/dist/cjs/generated/docs.entry.cjs +16 -0
- package/dist/cjs/generated/docs.entry.cjs.map +1 -1
- package/dist/esm/generated/docs.entry.mjs +16 -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/intlayer_with_angular.md +2 -2
- package/docs/ar/intlayer_with_astro.md +246 -0
- package/docs/ar/intlayer_with_create_react_app.md +3 -2
- package/docs/ar/intlayer_with_express.md +2 -2
- package/docs/ar/intlayer_with_nestjs.md +2 -2
- package/docs/ar/intlayer_with_nextjs_14.md +2 -2
- package/docs/ar/intlayer_with_nextjs_15.md +2 -2
- package/docs/ar/intlayer_with_nextjs_page_router.md +2 -2
- package/docs/ar/intlayer_with_nuxt.md +2 -2
- package/docs/ar/intlayer_with_react_native+expo.md +11 -20
- package/docs/ar/intlayer_with_react_router_v7.md +195 -241
- package/docs/ar/intlayer_with_tanstack.md +198 -272
- package/docs/ar/intlayer_with_vite+preact.md +9 -9
- package/docs/ar/intlayer_with_vite+react.md +7 -7
- package/docs/ar/intlayer_with_vite+vue.md +9 -9
- package/docs/de/intlayer_with_angular.md +2 -2
- package/docs/de/intlayer_with_astro.md +246 -0
- package/docs/de/intlayer_with_create_react_app.md +2 -2
- package/docs/de/intlayer_with_express.md +2 -2
- package/docs/de/intlayer_with_nestjs.md +2 -2
- package/docs/de/intlayer_with_nextjs_14.md +2 -2
- package/docs/de/intlayer_with_nextjs_15.md +2 -2
- package/docs/de/intlayer_with_nextjs_page_router.md +2 -2
- package/docs/de/intlayer_with_nuxt.md +2 -2
- package/docs/de/intlayer_with_react_native+expo.md +11 -20
- package/docs/de/intlayer_with_react_router_v7.md +193 -242
- package/docs/de/intlayer_with_tanstack.md +194 -266
- package/docs/de/intlayer_with_vite+preact.md +9 -9
- package/docs/de/intlayer_with_vite+react.md +9 -9
- package/docs/de/intlayer_with_vite+vue.md +11 -11
- package/docs/de/packages/vite-intlayer/index.md +3 -3
- package/docs/en/how_works_intlayer.md +1 -1
- package/docs/en/index.md +1 -1
- package/docs/en/intlayer_cli.md +1 -1
- package/docs/en/intlayer_with_angular.md +4 -4
- package/docs/en/intlayer_with_astro.md +246 -0
- package/docs/en/intlayer_with_create_react_app.md +4 -4
- package/docs/en/intlayer_with_express.md +3 -3
- package/docs/en/intlayer_with_lynx+react.md +1 -1
- package/docs/en/intlayer_with_nestjs.md +2 -2
- package/docs/en/intlayer_with_nextjs_14.md +13 -4
- package/docs/en/intlayer_with_nextjs_15.md +13 -4
- package/docs/en/intlayer_with_nextjs_page_router.md +5 -5
- package/docs/en/intlayer_with_nuxt.md +4 -4
- package/docs/en/intlayer_with_react_native+expo.md +46 -24
- package/docs/en/intlayer_with_react_router_v7.md +164 -211
- package/docs/en/intlayer_with_tanstack.md +166 -241
- package/docs/en/intlayer_with_vite+preact.md +12 -12
- package/docs/en/intlayer_with_vite+react.md +12 -12
- package/docs/en/intlayer_with_vite+solid.md +2 -2
- package/docs/en/intlayer_with_vite+svelte.md +2 -2
- package/docs/en/intlayer_with_vite+vue.md +12 -12
- package/docs/en/introduction.md +1 -1
- package/docs/en/packages/next-intlayer/useDictionary.md +1 -1
- package/docs/en/packages/next-intlayer/useIntlayer.md +1 -1
- package/docs/en/packages/react-intlayer/useDictionary.md +1 -1
- package/docs/en/packages/react-intlayer/useI18n.md +1 -1
- package/docs/en/packages/react-intlayer/useIntlayer.md +1 -1
- package/docs/en/releases/v6.md +1 -0
- package/docs/en/roadmap.md +1 -1
- package/docs/en-GB/intlayer_with_angular.md +3 -3
- package/docs/en-GB/intlayer_with_astro.md +246 -0
- package/docs/en-GB/intlayer_with_create_react_app.md +5 -4
- package/docs/en-GB/intlayer_with_express.md +2 -2
- package/docs/en-GB/intlayer_with_nestjs.md +2 -2
- package/docs/en-GB/intlayer_with_nextjs_14.md +4 -4
- package/docs/en-GB/intlayer_with_nextjs_15.md +2 -2
- package/docs/en-GB/intlayer_with_nextjs_page_router.md +2 -2
- package/docs/en-GB/intlayer_with_nuxt.md +2 -2
- package/docs/en-GB/intlayer_with_react_native+expo.md +11 -20
- package/docs/en-GB/intlayer_with_react_router_v7.md +171 -220
- package/docs/en-GB/intlayer_with_tanstack.md +174 -248
- package/docs/en-GB/intlayer_with_vite+preact.md +9 -9
- package/docs/en-GB/intlayer_with_vite+react.md +9 -9
- package/docs/en-GB/intlayer_with_vite+vue.md +11 -11
- package/docs/en-GB/packages/next-intlayer/useIntlayer.md +1 -1
- package/docs/en-GB/packages/react-intlayer/useIntlayer.md +1 -1
- package/docs/es/intlayer_with_angular.md +2 -2
- package/docs/es/intlayer_with_astro.md +246 -0
- package/docs/es/intlayer_with_create_react_app.md +3 -2
- package/docs/es/intlayer_with_express.md +2 -2
- package/docs/es/intlayer_with_nextjs_14.md +2 -2
- package/docs/es/intlayer_with_nextjs_15.md +2 -2
- package/docs/es/intlayer_with_react_native+expo.md +11 -20
- package/docs/es/intlayer_with_react_router_v7.md +188 -232
- package/docs/es/intlayer_with_tanstack.md +203 -273
- package/docs/es/intlayer_with_vite+preact.md +7 -7
- package/docs/es/intlayer_with_vite+react.md +7 -7
- package/docs/es/intlayer_with_vite+vue.md +9 -9
- package/docs/fr/intlayer_with_angular.md +2 -2
- package/docs/fr/intlayer_with_astro.md +246 -0
- package/docs/fr/intlayer_with_create_react_app.md +3 -2
- package/docs/fr/intlayer_with_express.md +2 -2
- package/docs/fr/intlayer_with_nestjs.md +2 -2
- package/docs/fr/intlayer_with_nextjs_14.md +2 -2
- package/docs/fr/intlayer_with_react_native+expo.md +11 -20
- package/docs/fr/intlayer_with_react_router_v7.md +188 -248
- package/docs/fr/intlayer_with_tanstack.md +192 -265
- package/docs/fr/intlayer_with_vite+preact.md +7 -7
- package/docs/fr/intlayer_with_vite+react.md +7 -7
- package/docs/fr/intlayer_with_vite+vue.md +9 -9
- package/docs/hi/intlayer_cli.md +1 -4
- package/docs/hi/intlayer_with_angular.md +2 -2
- package/docs/hi/intlayer_with_astro.md +246 -0
- package/docs/hi/intlayer_with_create_react_app.md +2 -2
- package/docs/hi/intlayer_with_express.md +2 -2
- package/docs/hi/intlayer_with_nestjs.md +2 -2
- package/docs/hi/intlayer_with_nextjs_14.md +2 -2
- package/docs/hi/intlayer_with_nextjs_15.md +2 -2
- package/docs/hi/intlayer_with_nextjs_page_router.md +2 -2
- package/docs/hi/intlayer_with_nuxt.md +2 -2
- package/docs/hi/intlayer_with_react_native+expo.md +11 -20
- package/docs/hi/intlayer_with_react_router_v7.md +199 -243
- package/docs/hi/intlayer_with_tanstack.md +210 -285
- package/docs/hi/intlayer_with_vite+preact.md +9 -9
- package/docs/hi/intlayer_with_vite+react.md +9 -9
- package/docs/hi/intlayer_with_vite+solid.md +1 -1
- package/docs/hi/intlayer_with_vite+vue.md +11 -11
- package/docs/it/intlayer_with_angular.md +2 -2
- package/docs/it/intlayer_with_astro.md +246 -0
- package/docs/it/intlayer_with_create_react_app.md +3 -2
- package/docs/it/intlayer_with_express.md +2 -2
- package/docs/it/intlayer_with_nestjs.md +2 -2
- package/docs/it/intlayer_with_nextjs_14.md +2 -2
- package/docs/it/intlayer_with_nextjs_15.md +2 -2
- package/docs/it/intlayer_with_nextjs_page_router.md +2 -2
- package/docs/it/intlayer_with_nuxt.md +2 -2
- package/docs/it/intlayer_with_react_native+expo.md +11 -21
- package/docs/it/intlayer_with_react_router_v7.md +195 -242
- package/docs/it/intlayer_with_tanstack.md +203 -267
- package/docs/it/intlayer_with_vite+preact.md +9 -9
- package/docs/it/intlayer_with_vite+react.md +13 -11
- package/docs/it/intlayer_with_vite+vue.md +11 -11
- package/docs/ja/intlayer_with_angular.md +2 -2
- package/docs/ja/intlayer_with_astro.md +246 -0
- package/docs/ja/intlayer_with_create_react_app.md +3 -2
- package/docs/ja/intlayer_with_express.md +2 -2
- package/docs/ja/intlayer_with_nestjs.md +2 -2
- package/docs/ja/intlayer_with_nextjs_14.md +2 -2
- package/docs/ja/intlayer_with_nextjs_15.md +2 -2
- package/docs/ja/intlayer_with_nextjs_page_router.md +2 -2
- package/docs/ja/intlayer_with_nuxt.md +2 -2
- package/docs/ja/intlayer_with_react_native+expo.md +18 -29
- package/docs/ja/intlayer_with_react_router_v7.md +204 -250
- package/docs/ja/intlayer_with_tanstack.md +218 -286
- package/docs/ja/intlayer_with_vite+preact.md +9 -9
- package/docs/ja/intlayer_with_vite+react.md +11 -11
- package/docs/ja/intlayer_with_vite+vue.md +11 -11
- package/docs/ko/intlayer_with_angular.md +2 -2
- package/docs/ko/intlayer_with_astro.md +246 -0
- package/docs/ko/intlayer_with_create_react_app.md +3 -2
- package/docs/ko/intlayer_with_express.md +2 -2
- package/docs/ko/intlayer_with_nestjs.md +2 -2
- package/docs/ko/intlayer_with_nextjs_14.md +2 -2
- package/docs/ko/intlayer_with_nextjs_15.md +2 -2
- package/docs/ko/intlayer_with_nextjs_page_router.md +2 -2
- package/docs/ko/intlayer_with_nuxt.md +2 -2
- package/docs/ko/intlayer_with_react_native+expo.md +19 -28
- package/docs/ko/intlayer_with_react_router_v7.md +190 -244
- package/docs/ko/intlayer_with_tanstack.md +200 -270
- package/docs/ko/intlayer_with_vite+preact.md +9 -9
- package/docs/ko/intlayer_with_vite+react.md +9 -9
- package/docs/ko/intlayer_with_vite+vue.md +11 -11
- package/docs/pt/intlayer_with_angular.md +2 -2
- package/docs/pt/intlayer_with_astro.md +246 -0
- package/docs/pt/intlayer_with_create_react_app.md +3 -2
- package/docs/pt/intlayer_with_express.md +2 -2
- package/docs/pt/intlayer_with_nestjs.md +2 -2
- package/docs/pt/intlayer_with_nextjs_14.md +2 -2
- package/docs/pt/intlayer_with_nextjs_15.md +2 -2
- package/docs/pt/intlayer_with_nextjs_page_router.md +2 -2
- package/docs/pt/intlayer_with_nuxt.md +2 -2
- package/docs/pt/intlayer_with_react_native+expo.md +11 -20
- package/docs/pt/intlayer_with_react_router_v7.md +7 -13
- package/docs/pt/intlayer_with_tanstack.md +183 -258
- package/docs/pt/intlayer_with_vite+preact.md +9 -9
- package/docs/pt/intlayer_with_vite+react.md +9 -9
- package/docs/pt/intlayer_with_vite+vue.md +9 -9
- package/docs/ru/intlayer_with_angular.md +2 -2
- package/docs/ru/intlayer_with_astro.md +246 -0
- package/docs/ru/intlayer_with_create_react_app.md +3 -2
- package/docs/ru/intlayer_with_express.md +2 -2
- package/docs/ru/intlayer_with_nestjs.md +2 -2
- package/docs/ru/intlayer_with_nextjs_14.md +2 -2
- package/docs/ru/intlayer_with_nextjs_15.md +2 -2
- package/docs/ru/intlayer_with_nextjs_page_router.md +2 -2
- package/docs/ru/intlayer_with_nuxt.md +2 -2
- package/docs/ru/intlayer_with_react_native+expo.md +11 -20
- package/docs/ru/intlayer_with_react_router_v7.md +192 -238
- package/docs/ru/intlayer_with_tanstack.md +197 -269
- package/docs/ru/intlayer_with_vite+preact.md +9 -9
- package/docs/ru/intlayer_with_vite+react.md +9 -9
- package/docs/ru/intlayer_with_vite+vue.md +11 -11
- package/docs/tr/how_works_intlayer.md +1 -1
- package/docs/tr/index.md +1 -1
- package/docs/tr/intlayer_cli.md +1 -1
- package/docs/tr/intlayer_with_angular.md +4 -4
- package/docs/tr/intlayer_with_astro.md +246 -0
- package/docs/tr/intlayer_with_create_react_app.md +4 -4
- package/docs/tr/intlayer_with_express.md +3 -3
- package/docs/tr/intlayer_with_lynx+react.md +1 -1
- package/docs/tr/intlayer_with_nestjs.md +2 -2
- package/docs/tr/intlayer_with_nextjs_14.md +2 -2
- package/docs/tr/intlayer_with_nextjs_15.md +4 -4
- package/docs/tr/intlayer_with_nextjs_page_router.md +5 -5
- package/docs/tr/intlayer_with_nuxt.md +4 -4
- package/docs/tr/intlayer_with_react_native+expo.md +12 -21
- package/docs/tr/intlayer_with_react_router_v7.md +222 -267
- package/docs/tr/intlayer_with_tanstack.md +400 -303
- package/docs/tr/intlayer_with_vite+preact.md +12 -12
- package/docs/tr/intlayer_with_vite+react.md +12 -12
- package/docs/tr/intlayer_with_vite+solid.md +2 -2
- package/docs/tr/intlayer_with_vite+svelte.md +2 -2
- package/docs/tr/intlayer_with_vite+vue.md +12 -12
- package/docs/tr/introduction.md +1 -1
- package/docs/tr/packages/react-intlayer/useDictionary.md +1 -1
- package/docs/tr/packages/react-intlayer/useI18n.md +1 -1
- package/docs/tr/roadmap.md +1 -1
- package/docs/zh/intlayer_with_angular.md +2 -2
- package/docs/zh/intlayer_with_astro.md +246 -0
- package/docs/zh/intlayer_with_create_react_app.md +3 -2
- package/docs/zh/intlayer_with_express.md +2 -2
- package/docs/zh/intlayer_with_nestjs.md +2 -2
- package/docs/zh/intlayer_with_nextjs_14.md +2 -2
- package/docs/zh/intlayer_with_nextjs_15.md +2 -2
- package/docs/zh/intlayer_with_nextjs_page_router.md +2 -2
- package/docs/zh/intlayer_with_nuxt.md +2 -2
- package/docs/zh/intlayer_with_react_native+expo.md +19 -28
- package/docs/zh/intlayer_with_react_router_v7.md +200 -248
- package/docs/zh/intlayer_with_tanstack.md +208 -283
- package/docs/zh/intlayer_with_vite+preact.md +9 -9
- package/docs/zh/intlayer_with_vite+react.md +9 -9
- package/docs/zh/intlayer_with_vite+vue.md +9 -9
- package/package.json +11 -11
- package/src/generated/docs.entry.ts +16 -0
|
@@ -1054,38 +1054,38 @@ const App = () => (
|
|
|
1054
1054
|
module.exports = App;
|
|
1055
1055
|
```
|
|
1056
1056
|
|
|
1057
|
-
بالتوازي، يمكنك أيضًا استخدام `
|
|
1057
|
+
بالتوازي، يمكنك أيضًا استخدام `intlayerMiddleware` لإضافة التوجيه من جانب الخادم إلى تطبيقك. سيقوم هذا المكون الإضافي تلقائيًا بالكشف عن اللغة الحالية بناءً على عنوان URL وتعيين ملف تعريف الارتباط المناسب للغة. إذا لم يتم تحديد لغة، سيحدد المكون الإضافي اللغة الأنسب بناءً على تفضيلات لغة متصفح المستخدم. إذا لم يتم الكشف عن أي لغة، فسيتم إعادة التوجيه إلى اللغة الافتراضية.
|
|
1058
1058
|
|
|
1059
1059
|
```typescript {3,7} fileName="vite.config.ts" codeFormat="typescript"
|
|
1060
1060
|
import { defineConfig } from "vite";
|
|
1061
1061
|
import preact from "@preact/preset-vite";
|
|
1062
|
-
import { intlayer,
|
|
1062
|
+
import { intlayer, intlayerMiddleware } from "vite-intlayer";
|
|
1063
1063
|
|
|
1064
1064
|
// https://vitejs.dev/config/
|
|
1065
1065
|
export default defineConfig({
|
|
1066
|
-
plugins: [preact(), intlayer(),
|
|
1066
|
+
plugins: [preact(), intlayer(), intlayerMiddleware()],
|
|
1067
1067
|
});
|
|
1068
1068
|
```
|
|
1069
1069
|
|
|
1070
1070
|
```javascript {3,7} fileName="vite.config.mjs" codeFormat="esm"
|
|
1071
1071
|
import { defineConfig } from "vite";
|
|
1072
1072
|
import preact from "@preact/preset-vite";
|
|
1073
|
-
import { intlayer,
|
|
1073
|
+
import { intlayer, intlayerMiddleware } from "vite-intlayer";
|
|
1074
1074
|
|
|
1075
1075
|
// https://vitejs.dev/config/
|
|
1076
1076
|
export default defineConfig({
|
|
1077
|
-
plugins: [preact(), intlayer(),
|
|
1077
|
+
plugins: [preact(), intlayer(), intlayerMiddleware()],
|
|
1078
1078
|
});
|
|
1079
1079
|
```
|
|
1080
1080
|
|
|
1081
1081
|
```javascript {3,7} fileName="vite.config.cjs" codeFormat="commonjs"
|
|
1082
1082
|
const { defineConfig } = require("vite");
|
|
1083
1083
|
const preact = require("@preact/preset-vite");
|
|
1084
|
-
const { intlayer,
|
|
1084
|
+
const { intlayer, intlayerMiddleware } = require("vite-intlayer");
|
|
1085
1085
|
|
|
1086
1086
|
// https://vitejs.dev/config/
|
|
1087
1087
|
module.exports = defineConfig({
|
|
1088
|
-
plugins: [preact(), intlayer(),
|
|
1088
|
+
plugins: [preact(), intlayer(), intlayerMiddleware()],
|
|
1089
1089
|
});
|
|
1090
1090
|
```
|
|
1091
1091
|
|
|
@@ -1629,9 +1629,9 @@ module.exports = { LocalizedLink, checkIsExternalLink };
|
|
|
1629
1629
|
|
|
1630
1630
|
يستخدم Intlayer توسيع الوحدات (module augmentation) للاستفادة من TypeScript وجعل قاعدة الشيفرة الخاصة بك أقوى.
|
|
1631
1631
|
|
|
1632
|
-

|
|
1633
1633
|
|
|
1634
|
-

|
|
1635
1635
|
|
|
1636
1636
|
تأكد من أن تكوين TypeScript الخاص بك يتضمن الأنواع التي تم إنشاؤها تلقائيًا.
|
|
1637
1637
|
|
|
@@ -1009,38 +1009,38 @@ const App = () => (
|
|
|
1009
1009
|
);
|
|
1010
1010
|
```
|
|
1011
1011
|
|
|
1012
|
-
بالتوازي، يمكنك أيضًا استخدام `
|
|
1012
|
+
بالتوازي، يمكنك أيضًا استخدام `intlayerMiddleware` لإضافة التوجيه من جانب الخادم إلى تطبيقك. سيقوم هذا المكون الإضافي بالكشف تلقائيًا عن اللغة الحالية بناءً على عنوان URL وتعيين ملف تعريف الارتباط المناسب للغة. إذا لم يتم تحديد لغة، فسيحدد المكون الإضافي اللغة الأنسب بناءً على تفضيلات لغة متصفح المستخدم. إذا لم يتم الكشف عن أي لغة، فسيتم إعادة التوجيه إلى اللغة الافتراضية.
|
|
1013
1013
|
|
|
1014
1014
|
```typescript {3,7} fileName="vite.config.ts" codeFormat="typescript"
|
|
1015
1015
|
import { defineConfig } from "vite";
|
|
1016
1016
|
import react from "@vitejs/plugin-react-swc";
|
|
1017
|
-
import { intlayer,
|
|
1017
|
+
import { intlayer, intlayerMiddleware } from "vite-intlayer";
|
|
1018
1018
|
|
|
1019
1019
|
// https://vitejs.dev/config/
|
|
1020
1020
|
export default defineConfig({
|
|
1021
|
-
plugins: [react(), intlayer(),
|
|
1021
|
+
plugins: [react(), intlayer(), intlayerMiddleware()],
|
|
1022
1022
|
});
|
|
1023
1023
|
```
|
|
1024
1024
|
|
|
1025
1025
|
```javascript {3,7} fileName="vite.config.mjs" codeFormat="esm"
|
|
1026
1026
|
import { defineConfig } from "vite";
|
|
1027
1027
|
import react from "@vitejs/plugin-react-swc";
|
|
1028
|
-
import { intlayer,
|
|
1028
|
+
import { intlayer, intlayerMiddleware } from "vite-intlayer";
|
|
1029
1029
|
|
|
1030
1030
|
// https://vitejs.dev/config/
|
|
1031
1031
|
export default defineConfig({
|
|
1032
|
-
plugins: [react(), intlayer(),
|
|
1032
|
+
plugins: [react(), intlayer(), intlayerMiddleware()],
|
|
1033
1033
|
});
|
|
1034
1034
|
```
|
|
1035
1035
|
|
|
1036
1036
|
```javascript {3,7} fileName="vite.config.cjs" codeFormat="commonjs"
|
|
1037
1037
|
const { defineConfig } = require("vite");
|
|
1038
1038
|
const react = require("@vitejs/plugin-react-swc");
|
|
1039
|
-
const { intlayer,
|
|
1039
|
+
const { intlayer, intlayerMiddleware } = require("vite-intlayer");
|
|
1040
1040
|
|
|
1041
1041
|
// https://vitejs.dev/config/
|
|
1042
1042
|
module.exports = defineConfig({
|
|
1043
|
-
plugins: [react(), intlayer(),
|
|
1043
|
+
plugins: [react(), intlayer(), intlayerMiddleware()],
|
|
1044
1044
|
});
|
|
1045
1045
|
```
|
|
1046
1046
|
|
|
@@ -653,46 +653,46 @@ import LocaleSwitcher from "@components/LocaleSwitcher.vue";
|
|
|
653
653
|
</template>
|
|
654
654
|
```
|
|
655
655
|
|
|
656
|
-
بالتوازي، يمكنك أيضًا استخدام `
|
|
656
|
+
بالتوازي، يمكنك أيضًا استخدام `intlayerMiddleware` لإضافة التوجيه من جانب الخادم إلى تطبيقك. سيقوم هذا المكون الإضافي بالكشف تلقائيًا عن اللغة الحالية بناءً على عنوان URL وتعيين ملف تعريف الارتباط المناسب للغة. إذا لم يتم تحديد لغة، سيحدد المكون الإضافي اللغة الأنسب بناءً على تفضيلات لغة متصفح المستخدم. إذا لم يتم الكشف عن أي لغة، فسيتم إعادة التوجيه إلى اللغة الافتراضية.
|
|
657
657
|
|
|
658
658
|
```typescript {3,7} fileName="vite.config.ts" codeFormat="typescript"
|
|
659
659
|
import { defineConfig } from "vite";
|
|
660
660
|
import vue from "@vitejs/plugin-vue";
|
|
661
|
-
import { intlayer,
|
|
661
|
+
import { intlayer, intlayerMiddleware } from "vite-intlayer";
|
|
662
662
|
|
|
663
663
|
// https://vitejs.dev/config/
|
|
664
664
|
export default defineConfig({
|
|
665
|
-
plugins: [vue(), intlayer(),
|
|
665
|
+
plugins: [vue(), intlayer(), intlayerMiddleware()],
|
|
666
666
|
});
|
|
667
667
|
```
|
|
668
668
|
|
|
669
669
|
```javascript {3,7} fileName="vite.config.mjs" codeFormat="esm"
|
|
670
670
|
import { defineConfig } from "vite";
|
|
671
671
|
import vue from "@vitejs/plugin-vue";
|
|
672
|
-
import { intlayer,
|
|
672
|
+
import { intlayer, intlayerMiddleware } from "vite-intlayer";
|
|
673
673
|
|
|
674
674
|
// https://vitejs.dev/config/
|
|
675
675
|
export default defineConfig({
|
|
676
|
-
plugins: [vue(), intlayer(),
|
|
676
|
+
plugins: [vue(), intlayer(), intlayerMiddleware()],
|
|
677
677
|
});
|
|
678
678
|
```
|
|
679
679
|
|
|
680
680
|
```javascript {3,7} fileName="vite.config.cjs" codeFormat="commonjs"
|
|
681
681
|
const { defineConfig } = require("vite");
|
|
682
682
|
const vue = require("@vitejs/plugin-vue");
|
|
683
|
-
const { intlayer,
|
|
683
|
+
const { intlayer, intlayerMiddleware } = require("vite-intlayer");
|
|
684
684
|
|
|
685
685
|
// https://vitejs.dev/config/
|
|
686
686
|
module.exports = defineConfig({
|
|
687
|
-
plugins: [vue(), intlayer(),
|
|
687
|
+
plugins: [vue(), intlayer(), intlayerMiddleware()],
|
|
688
688
|
});
|
|
689
689
|
const { defineConfig } = require("vite");
|
|
690
690
|
const vue = require("@vitejs/plugin-vue");
|
|
691
|
-
const { intlayer,
|
|
691
|
+
const { intlayer, intlayerMiddleware } = require("vite-intlayer");
|
|
692
692
|
|
|
693
693
|
// https://vitejs.dev/config/
|
|
694
694
|
module.exports = defineConfig({
|
|
695
|
-
plugins: [vue(), intlayer(),
|
|
695
|
+
plugins: [vue(), intlayer(), intlayerMiddleware()],
|
|
696
696
|
});
|
|
697
697
|
```
|
|
698
698
|
|
|
@@ -677,9 +677,9 @@ Für komplexere Szenarien können Sie eine Pipe erstellen, um das HTML sicher zu
|
|
|
677
677
|
|
|
678
678
|
Intlayer verwendet Module Augmentation, um die Vorteile von TypeScript zu nutzen und Ihren Code robuster zu machen.
|
|
679
679
|
|
|
680
|
-

|
|
681
681
|
|
|
682
|
-

|
|
683
683
|
|
|
684
684
|
Stellen Sie sicher, dass Ihre TypeScript-Konfiguration die automatisch generierten Typen einschließt.
|
|
685
685
|
|
|
@@ -0,0 +1,246 @@
|
|
|
1
|
+
---
|
|
2
|
+
createdAt: 2024-03-07
|
|
3
|
+
updatedAt: 2025-10-03
|
|
4
|
+
title: Erste Schritte mit Intlayer in Astro
|
|
5
|
+
description: Erfahren Sie, wie Sie Internationalisierung (i18n) zu Ihrer Vite- und React-Anwendung mit Intlayer hinzufügen. Folgen Sie dieser Anleitung, um Ihre App mehrsprachig zu machen.
|
|
6
|
+
keywords:
|
|
7
|
+
- Internationalisierung
|
|
8
|
+
- Dokumentation
|
|
9
|
+
- Intlayer
|
|
10
|
+
- Vite
|
|
11
|
+
- React
|
|
12
|
+
- i18n
|
|
13
|
+
- JavaScript
|
|
14
|
+
slugs:
|
|
15
|
+
- doc
|
|
16
|
+
- environment
|
|
17
|
+
- astro
|
|
18
|
+
applicationTemplate: https://github.com/aymericzip/intlayer-astro-template
|
|
19
|
+
---
|
|
20
|
+
|
|
21
|
+
# Erste Schritte zur Internationalisierung (i18n) mit Intlayer und Astro
|
|
22
|
+
|
|
23
|
+
Siehe [Application Template](https://github.com/aymericzip/intlayer-astro-template) auf GitHub.
|
|
24
|
+
|
|
25
|
+
## Was ist Intlayer?
|
|
26
|
+
|
|
27
|
+
**Intlayer** ist eine innovative, Open-Source-Internationalisierungsbibliothek (i18n), die entwickelt wurde, um die mehrsprachige Unterstützung in modernen Webanwendungen zu vereinfachen.
|
|
28
|
+
|
|
29
|
+
Mit Intlayer können Sie:
|
|
30
|
+
|
|
31
|
+
- **Übersetzungen einfach verwalten** mithilfe deklarativer Wörterbücher auf Komponentenebene.
|
|
32
|
+
- **Metadaten, Routen und Inhalte dynamisch lokalisieren**.
|
|
33
|
+
- **TypeScript-Unterstützung sicherstellen** durch automatisch generierte Typen, die Autovervollständigung und Fehlererkennung verbessern.
|
|
34
|
+
- **Von erweiterten Funktionen profitieren**, wie dynamischer Spracherkennung und -umschaltung.
|
|
35
|
+
|
|
36
|
+
---
|
|
37
|
+
|
|
38
|
+
## Schritt-für-Schritt-Anleitung zur Einrichtung von Intlayer in Astro
|
|
39
|
+
|
|
40
|
+
### Schritt 1: Abhängigkeiten installieren
|
|
41
|
+
|
|
42
|
+
Installieren Sie die notwendigen Pakete mit Ihrem Paketmanager:
|
|
43
|
+
|
|
44
|
+
```bash packageManager="npm"
|
|
45
|
+
npm install intlayer astro-intlayer
|
|
46
|
+
# Optional: React Island-Unterstützung hinzufügen
|
|
47
|
+
npm install react react-dom react-intlayer @astrojs/react
|
|
48
|
+
```
|
|
49
|
+
|
|
50
|
+
```bash packageManager="pnpm"
|
|
51
|
+
pnpm add intlayer astro-intlayer
|
|
52
|
+
# Optional: React Island-Unterstützung hinzufügen
|
|
53
|
+
pnpm add react react-dom react-intlayer @astrojs/react
|
|
54
|
+
```
|
|
55
|
+
|
|
56
|
+
```bash packageManager="yarn"
|
|
57
|
+
yarn add intlayer astro-intlayer
|
|
58
|
+
# Optional: React Island-Unterstützung hinzufügen
|
|
59
|
+
yarn add react react-dom react-intlayer @astrojs/react
|
|
60
|
+
```
|
|
61
|
+
|
|
62
|
+
- **intlayer**
|
|
63
|
+
Das Kernpaket, das Internationalisierungswerkzeuge für Konfigurationsmanagement, Übersetzung, [Inhaltsdeklaration](https://github.com/aymericzip/intlayer/blob/main/docs/docs/de/dictionary/get_started.md), Transpilierung und [CLI-Befehle](https://github.com/aymericzip/intlayer/blob/main/docs/docs/de/intlayer_cli.md) bereitstellt.
|
|
64
|
+
|
|
65
|
+
- **astro-intlayer**
|
|
66
|
+
Beinhaltet das Astro-Integrationsplugin zur Integration von Intlayer mit dem [Vite-Bundler](https://vite.dev/guide/why.html#why-bundle-for-production) sowie Middleware zur Erkennung der bevorzugten Sprache des Benutzers, Verwaltung von Cookies und Handhabung von URL-Weiterleitungen.
|
|
67
|
+
|
|
68
|
+
### Schritt 2: Konfiguration Ihres Projekts
|
|
69
|
+
|
|
70
|
+
Erstellen Sie eine Konfigurationsdatei, um die Sprachen Ihrer Anwendung zu konfigurieren:
|
|
71
|
+
|
|
72
|
+
```typescript fileName="intlayer.config.ts"
|
|
73
|
+
import { Locales, type IntlayerConfig } from "intlayer";
|
|
74
|
+
|
|
75
|
+
const config: IntlayerConfig = {
|
|
76
|
+
internationalization: {
|
|
77
|
+
locales: [
|
|
78
|
+
Locales.ENGLISH,
|
|
79
|
+
Locales.FRENCH,
|
|
80
|
+
Locales.SPANISH,
|
|
81
|
+
// Ihre weiteren Sprachen
|
|
82
|
+
],
|
|
83
|
+
defaultLocale: Locales.ENGLISH,
|
|
84
|
+
},
|
|
85
|
+
};
|
|
86
|
+
|
|
87
|
+
export default config;
|
|
88
|
+
```
|
|
89
|
+
|
|
90
|
+
> Über diese Konfigurationsdatei können Sie lokalisierte URLs, Middleware-Weiterleitungen, Cookie-Namen, den Speicherort und die Erweiterung Ihrer Inhaltsdeklarationen einrichten, Intlayer-Protokolle in der Konsole deaktivieren und mehr. Für eine vollständige Liste der verfügbaren Parameter verweisen wir auf die [Konfigurationsdokumentation](https://github.com/aymericzip/intlayer/blob/main/docs/docs/de/configuration.md).
|
|
91
|
+
|
|
92
|
+
### Schritt 3: Integration von Intlayer in Ihre Astro-Konfiguration
|
|
93
|
+
|
|
94
|
+
Fügen Sie das Intlayer-Plugin in Ihre Konfiguration ein.
|
|
95
|
+
|
|
96
|
+
```typescript fileName="astro.config.ts"
|
|
97
|
+
// @ts-check
|
|
98
|
+
|
|
99
|
+
import { intlayer } from "astro-intlayer";
|
|
100
|
+
import { defineConfig } from "astro/config";
|
|
101
|
+
|
|
102
|
+
// https://astro.build/config
|
|
103
|
+
export default defineConfig({
|
|
104
|
+
integrations: [intlayer()],
|
|
105
|
+
});
|
|
106
|
+
```
|
|
107
|
+
|
|
108
|
+
> Das `intlayer()` Astro-Integrations-Plugin wird verwendet, um Intlayer mit Astro zu integrieren. Es sorgt für den Aufbau von Inhaltsdeklarationsdateien und überwacht diese im Entwicklungsmodus. Es definiert Intlayer-Umgebungsvariablen innerhalb der Astro-Anwendung. Zusätzlich stellt es Aliase zur Optimierung der Leistung bereit.
|
|
109
|
+
|
|
110
|
+
### Schritt 4: Deklarieren Sie Ihre Inhalte
|
|
111
|
+
|
|
112
|
+
Erstellen und verwalten Sie Ihre Inhaltsdeklarationen, um Übersetzungen zu speichern:
|
|
113
|
+
|
|
114
|
+
```tsx fileName="src/app.content.tsx"
|
|
115
|
+
import { t, type Dictionary } from "intlayer";
|
|
116
|
+
import type { ReactNode } from "react";
|
|
117
|
+
|
|
118
|
+
const appContent = {
|
|
119
|
+
key: "app",
|
|
120
|
+
content: {
|
|
121
|
+
title: t({
|
|
122
|
+
en: "Hello World",
|
|
123
|
+
fr: "Bonjour le monde",
|
|
124
|
+
es: "Hola mundo",
|
|
125
|
+
}),
|
|
126
|
+
},
|
|
127
|
+
} satisfies Dictionary;
|
|
128
|
+
|
|
129
|
+
export default appContent;
|
|
130
|
+
```
|
|
131
|
+
|
|
132
|
+
> Ihre Inhaltsdeklarationen können überall in Ihrer Anwendung definiert werden, solange sie im `contentDir`-Verzeichnis enthalten sind (standardmäßig `./src`). Und die Dateiendung der Inhaltsdeklaration muss übereinstimmen (standardmäßig `.content.{json,ts,tsx,js,jsx,mjs,mjx,cjs,cjx}`).
|
|
133
|
+
|
|
134
|
+
> Für weitere Details siehe die [Dokumentation zur Inhaltsdeklaration](https://github.com/aymericzip/intlayer/blob/main/docs/docs/de/dictionary/get_started.md).
|
|
135
|
+
|
|
136
|
+
### Schritt 5: Verwenden Sie Ihre Inhalte in Astro
|
|
137
|
+
|
|
138
|
+
Sie können Wörterbücher direkt in `.astro`-Dateien mit den von `intlayer` exportierten Kern-Hilfsfunktionen verwenden.
|
|
139
|
+
|
|
140
|
+
```astro fileName="src/pages/index.astro"
|
|
141
|
+
<!-- astro -->
|
|
142
|
+
---
|
|
143
|
+
import { getIntlayer } from "intlayer";
|
|
144
|
+
import appContent from "../app.content";
|
|
145
|
+
|
|
146
|
+
const { title } = getIntlayer('app');
|
|
147
|
+
---
|
|
148
|
+
|
|
149
|
+
<html lang="en">
|
|
150
|
+
<head>
|
|
151
|
+
<meta charset="utf-8" />
|
|
152
|
+
<meta name="viewport" content="width=device-width" />
|
|
153
|
+
<title>{title}</title>
|
|
154
|
+
</head>
|
|
155
|
+
<body>
|
|
156
|
+
<h1>{title}</h1>
|
|
157
|
+
</body>
|
|
158
|
+
</html>
|
|
159
|
+
```
|
|
160
|
+
|
|
161
|
+
### Schritt 6: Lokalisierte Routen
|
|
162
|
+
|
|
163
|
+
Erstellen Sie ein dynamisches Routensegment, um lokalisierte Seiten bereitzustellen, zum Beispiel `src/pages/[locale]/index.astro`:
|
|
164
|
+
|
|
165
|
+
```astro fileName="src/pages/[locale]/index.astro"
|
|
166
|
+
<!-- astro -->
|
|
167
|
+
---
|
|
168
|
+
import { getIntlayer } from "intlayer";
|
|
169
|
+
|
|
170
|
+
const { title } = getIntlayer('app');
|
|
171
|
+
---
|
|
172
|
+
|
|
173
|
+
<h1>{title}</h1>
|
|
174
|
+
```
|
|
175
|
+
|
|
176
|
+
Die Astro-Integration fügt während der Entwicklung eine Vite-Middleware hinzu, die bei der lokalisierungsbewussten Routenführung und Umgebungsdefinitionen hilft. Sie können weiterhin zwischen den Sprachen mit Ihrer eigenen Logik oder Hilfsfunktionen wie `getLocalizedUrl` von `intlayer` verlinken.
|
|
177
|
+
|
|
178
|
+
### Schritt 7: Verwenden Sie weiterhin Ihr bevorzugtes Framework
|
|
179
|
+
|
|
180
|
+
Fahren Sie fort, Ihr Lieblings-Framework zum Erstellen Ihrer Anwendung zu verwenden.
|
|
181
|
+
|
|
182
|
+
- Intlayer + React: [Intlayer mit React](https://github.com/aymericzip/intlayer/blob/main/docs/docs/de/intlayer_with_vite+react.md)
|
|
183
|
+
- Intlayer + Vue: [Intlayer mit Vue](https://github.com/aymericzip/intlayer/blob/main/docs/docs/de/intlayer_with_vite+vue.md)
|
|
184
|
+
- Intlayer + Svelte: [Intlayer mit Svelte](https://github.com/aymericzip/intlayer/blob/main/docs/docs/de/intlayer_with_vite+svelte.md)
|
|
185
|
+
- Intlayer + Solid: [Intlayer mit Solid](https://github.com/aymericzip/intlayer/blob/main/docs/docs/de/intlayer_with_vite+solid.md)
|
|
186
|
+
- Intlayer + Preact: [Intlayer mit Preact](https://github.com/aymericzip/intlayer/blob/main/docs/docs/de/intlayer_with_vite+preact.md)
|
|
187
|
+
|
|
188
|
+
### TypeScript konfigurieren
|
|
189
|
+
|
|
190
|
+
Intlayer verwendet Module Augmentation, um die Vorteile von TypeScript zu nutzen und Ihren Codebestand robuster zu machen.
|
|
191
|
+
|
|
192
|
+

|
|
193
|
+
|
|
194
|
+

|
|
195
|
+
|
|
196
|
+
Stellen Sie sicher, dass Ihre TypeScript-Konfiguration die automatisch generierten Typen einschließt.
|
|
197
|
+
|
|
198
|
+
```json5 fileName="tsconfig.json"
|
|
199
|
+
{
|
|
200
|
+
// ... Ihre bestehenden TypeScript-Konfigurationen
|
|
201
|
+
"include": [
|
|
202
|
+
// ... Ihre bestehenden TypeScript-Konfigurationen
|
|
203
|
+
".intlayer/**/*.ts", // Einschließen der automatisch generierten Typen
|
|
204
|
+
],
|
|
205
|
+
}
|
|
206
|
+
```
|
|
207
|
+
|
|
208
|
+
### Git-Konfiguration
|
|
209
|
+
|
|
210
|
+
Es wird empfohlen, die von Intlayer generierten Dateien zu ignorieren. Dadurch vermeiden Sie, diese versehentlich in Ihr Git-Repository zu committen.
|
|
211
|
+
|
|
212
|
+
Um dies zu tun, können Sie die folgenden Anweisungen zu Ihrer `.gitignore`-Datei hinzufügen:
|
|
213
|
+
|
|
214
|
+
```plaintext
|
|
215
|
+
# Ignoriere die von Intlayer generierten Dateien
|
|
216
|
+
.intlayer
|
|
217
|
+
```
|
|
218
|
+
|
|
219
|
+
### VS Code Erweiterung
|
|
220
|
+
|
|
221
|
+
Um Ihre Entwicklungserfahrung mit Intlayer zu verbessern, können Sie die offizielle **Intlayer VS Code Erweiterung** installieren.
|
|
222
|
+
|
|
223
|
+
[Installation aus dem VS Code Marketplace](https://marketplace.visualstudio.com/items?itemName=intlayer.intlayer-vs-code-extension)
|
|
224
|
+
|
|
225
|
+
Diese Erweiterung bietet:
|
|
226
|
+
|
|
227
|
+
- **Autovervollständigung** für Übersetzungsschlüssel.
|
|
228
|
+
- **Echtzeit-Fehlererkennung** für fehlende Übersetzungen.
|
|
229
|
+
- **Inline-Vorschauen** des übersetzten Inhalts.
|
|
230
|
+
- **Schnellaktionen**, um Übersetzungen einfach zu erstellen und zu aktualisieren.
|
|
231
|
+
|
|
232
|
+
Für weitere Details zur Nutzung der Erweiterung, siehe die [Intlayer VS Code Erweiterungsdokumentation](https://intlayer.org/doc/vs-code-extension).
|
|
233
|
+
|
|
234
|
+
---
|
|
235
|
+
|
|
236
|
+
### Weiterführende Schritte
|
|
237
|
+
|
|
238
|
+
Um weiterzugehen, können Sie den [visuellen Editor](https://github.com/aymericzip/intlayer/blob/main/docs/docs/de/intlayer_visual_editor.md) implementieren oder Ihre Inhalte mit dem [CMS](https://github.com/aymericzip/intlayer/blob/main/docs/docs/de/intlayer_CMS.md) auslagern.
|
|
239
|
+
|
|
240
|
+
---
|
|
241
|
+
|
|
242
|
+
## Dokumentationshistorie
|
|
243
|
+
|
|
244
|
+
| Version | Datum | Änderungen |
|
|
245
|
+
| ------- | ---------- | ------------------------------------------------------------ |
|
|
246
|
+
| 6.2.0 | 2025-10-03 | Aktualisierung für Astro-Integration, Konfiguration, Nutzung |
|
|
@@ -1175,9 +1175,9 @@ Durch die Anwendung dieser Änderungen wird Ihre Anwendung:
|
|
|
1175
1175
|
|
|
1176
1176
|
Intlayer verwendet Modulaugmentation, um die Vorteile von TypeScript zu nutzen und Ihre Codebasis robuster zu machen.
|
|
1177
1177
|
|
|
1178
|
-

|
|
1179
1179
|
|
|
1180
|
-

|
|
1181
1181
|
|
|
1182
1182
|
Stellen Sie sicher, dass Ihre TypeScript-Konfiguration die automatisch generierten Typen enthält.
|
|
1183
1183
|
|
|
@@ -370,9 +370,9 @@ Standardmäßig interpretiert `express-intlayer` den `Accept-Language`-Header, u
|
|
|
370
370
|
|
|
371
371
|
`express-intlayer` nutzt die leistungsstarken Funktionen von TypeScript, um den Internationalisierungsprozess zu verbessern. Die statische Typisierung von TypeScript stellt sicher, dass jeder Übersetzungsschlüssel berücksichtigt wird, wodurch das Risiko fehlender Übersetzungen verringert und die Wartbarkeit verbessert wird.
|
|
372
372
|
|
|
373
|
-

|
|
374
374
|
|
|
375
|
-

|
|
376
376
|
|
|
377
377
|
Stellen Sie sicher, dass die automatisch generierten Typen (standardmäßig unter ./types/intlayer.d.ts) in Ihrer tsconfig.json-Datei enthalten sind.
|
|
378
378
|
|
|
@@ -221,9 +221,9 @@ Standardmäßig interpretiert `express-intlayer` den `Accept-Language`-Header, u
|
|
|
221
221
|
|
|
222
222
|
`express-intlayer` nutzt die leistungsstarken Funktionen von TypeScript, um den Internationalisierungsprozess zu verbessern. Die statische Typisierung von TypeScript stellt sicher, dass jeder Übersetzungsschlüssel berücksichtigt wird, wodurch das Risiko fehlender Übersetzungen verringert und die Wartbarkeit verbessert wird.
|
|
223
223
|
|
|
224
|
-

|
|
225
225
|
|
|
226
|
-

|
|
227
227
|
|
|
228
228
|
Stellen Sie sicher, dass die automatisch generierten Typen (standardmäßig unter ./types/intlayer.d.ts) in Ihrer tsconfig.json-Datei enthalten sind.
|
|
229
229
|
|
|
@@ -1235,9 +1235,9 @@ yarn add @intlayer/swc --save-dev
|
|
|
1235
1235
|
|
|
1236
1236
|
Intlayer verwendet Modulerweiterung, um die Vorteile von TypeScript zu nutzen und Ihren Code robuster zu machen.
|
|
1237
1237
|
|
|
1238
|
-

|
|
1239
1239
|
|
|
1240
|
-

|
|
1241
1241
|
|
|
1242
1242
|
Stellen Sie sicher, dass Ihre TypeScript-Konfiguration die automatisch generierten Typen enthält.
|
|
1243
1243
|
|
|
@@ -1464,9 +1464,9 @@ yarn add @intlayer/swc --save-dev
|
|
|
1464
1464
|
|
|
1465
1465
|
Intlayer verwendet Module Augmentation, um die Vorteile von TypeScript zu nutzen und Ihren Code robuster zu machen.
|
|
1466
1466
|
|
|
1467
|
-

|
|
1468
1468
|
|
|
1469
|
-

|
|
1470
1470
|
|
|
1471
1471
|
Stellen Sie sicher, dass Ihre TypeScript-Konfiguration die automatisch generierten Typen einschließt.
|
|
1472
1472
|
|
|
@@ -1435,9 +1435,9 @@ yarn add @intlayer/swc --save-dev
|
|
|
1435
1435
|
|
|
1436
1436
|
Intlayer verwendet Modulaugmentation, um die Vorteile von TypeScript zu nutzen und Ihren Code robuster zu machen.
|
|
1437
1437
|
|
|
1438
|
-

|
|
1439
1439
|
|
|
1440
|
-

|
|
1441
1441
|
|
|
1442
1442
|
Stellen Sie sicher, dass Ihre TypeScript-Konfiguration die automatisch generierten Typen einschließt.
|
|
1443
1443
|
|
|
@@ -749,9 +749,9 @@ module.exports = aboutMetaContent;
|
|
|
749
749
|
|
|
750
750
|
Intlayer verwendet Module Augmentation, um die Vorteile von TypeScript zu nutzen und Ihren Code robuster zu machen.
|
|
751
751
|
|
|
752
|
-

|
|
753
753
|
|
|
754
|
-

|
|
755
755
|
|
|
756
756
|
Stellen Sie sicher, dass Ihre TypeScript-Konfiguration die automatisch generierten Typen einschließt.
|
|
757
757
|
|
|
@@ -149,28 +149,25 @@ module.exports = (async () => {
|
|
|
149
149
|
|
|
150
150
|
## Schritt 4: Fügen Sie den Intlayer-Provider hinzu
|
|
151
151
|
|
|
152
|
-
Um die Benutzersprache in Ihrer Anwendung synchron zu halten, müssen Sie Ihre Root-Komponente mit der `IntlayerProvider`-Komponente
|
|
152
|
+
Um die Benutzersprache in Ihrer Anwendung synchron zu halten, müssen Sie Ihre Root-Komponente mit der `IntlayerProvider`-Komponente von `react-intlayer-native` umschließen.
|
|
153
153
|
|
|
154
|
-
|
|
154
|
+
> Stellen Sie sicher, dass Sie den Provider von `react-native-intlayer` anstelle von `react-intlayer` verwenden. Der Export von `react-native-intlayer` enthält Polyfills für die Web-API.
|
|
155
155
|
|
|
156
156
|
```tsx fileName="app/_layout.tsx" codeFormat="typescript"
|
|
157
157
|
import { Stack } from "expo-router";
|
|
158
158
|
import { getLocales } from "expo-localization";
|
|
159
|
-
import {
|
|
160
|
-
import { intlayerPolyfill } from "react-native-intlayer";
|
|
159
|
+
import { IntlayerProvider } from "react-native-intlayer";
|
|
161
160
|
import { type FC } from "react";
|
|
162
161
|
|
|
163
|
-
intlayerPolyfill();
|
|
164
|
-
|
|
165
162
|
const getDeviceLocale = () => getLocales()[0]?.languageTag;
|
|
166
163
|
|
|
167
164
|
const RootLayout: FC = () => {
|
|
168
165
|
return (
|
|
169
|
-
<
|
|
166
|
+
<IntlayerProvider defaultLocale={getDeviceLocale()}>
|
|
170
167
|
<Stack>
|
|
171
168
|
<Stack.Screen name="(tabs)" options={{ headerShown: false }} />
|
|
172
169
|
</Stack>
|
|
173
|
-
</
|
|
170
|
+
</IntlayerProvider>
|
|
174
171
|
);
|
|
175
172
|
};
|
|
176
173
|
|
|
@@ -180,20 +177,17 @@ export default RootLayout;
|
|
|
180
177
|
```jsx fileName="app/_layout.mjx" codeFormat="esm"
|
|
181
178
|
import { Stack } from "expo-router";
|
|
182
179
|
import { getLocales } from "expo-localization";
|
|
183
|
-
import {
|
|
184
|
-
import { intlayerPolyfill } from "react-native-intlayer";
|
|
185
|
-
|
|
186
|
-
intlayerPolyfill();
|
|
180
|
+
import { IntlayerProvider } from "react-native-intlayer";
|
|
187
181
|
|
|
188
182
|
const getDeviceLocale = () => getLocales()[0]?.languageTag;
|
|
189
183
|
|
|
190
184
|
const RootLayout = () => {
|
|
191
185
|
return (
|
|
192
|
-
<
|
|
186
|
+
<IntlayerProvider defaultLocale={getDeviceLocale()}>
|
|
193
187
|
<Stack>
|
|
194
188
|
<Stack.Screen name="(tabs)" options={{ headerShown: false }} />
|
|
195
189
|
</Stack>
|
|
196
|
-
</
|
|
190
|
+
</IntlayerProvider>
|
|
197
191
|
);
|
|
198
192
|
};
|
|
199
193
|
|
|
@@ -203,21 +197,18 @@ export default RootLayout;
|
|
|
203
197
|
```jsx fileName="app/_layout.cjx" codeFormat="commonjs"
|
|
204
198
|
const { Stack } = require("expo-router");
|
|
205
199
|
const { getLocales } = require("expo-localization");
|
|
206
|
-
const {
|
|
207
|
-
const { intlayerPolyfill } = require("react-native-intlayer");
|
|
208
|
-
|
|
209
|
-
intlayerPolyfill();
|
|
200
|
+
const { IntlayerProvider } = require("react-native-intlayer");
|
|
210
201
|
|
|
211
202
|
// Funktion, um die Gerätesprache zu ermitteln
|
|
212
203
|
const getDeviceLocale = () => getLocales()[0]?.languageTag;
|
|
213
204
|
|
|
214
205
|
const RootLayout = () => {
|
|
215
206
|
return (
|
|
216
|
-
<
|
|
207
|
+
<IntlayerProvider defaultLocale={getDeviceLocale()}>
|
|
217
208
|
<Stack>
|
|
218
209
|
<Stack.Screen name="(tabs)" options={{ headerShown: false }} />
|
|
219
210
|
</Stack>
|
|
220
|
-
</
|
|
211
|
+
</IntlayerProvider>
|
|
221
212
|
);
|
|
222
213
|
};
|
|
223
214
|
|