@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
|
@@ -1105,38 +1105,38 @@ const App = () => (
|
|
|
1105
1105
|
module.exports = App;
|
|
1106
1106
|
```
|
|
1107
1107
|
|
|
1108
|
-
병행하여, `
|
|
1108
|
+
병행하여, `intlayerMiddleware`을 사용하여 애플리케이션에 서버 사이드 라우팅을 추가할 수도 있습니다. 이 플러그인은 URL을 기반으로 현재 로케일을 자동으로 감지하고 적절한 로케일 쿠키를 설정합니다. 로케일이 지정되지 않은 경우, 플러그인은 사용자의 브라우저 언어 설정을 기준으로 가장 적합한 로케일을 결정합니다. 로케일이 감지되지 않으면 기본 로케일로 리디렉션합니다.
|
|
1109
1109
|
|
|
1110
1110
|
```typescript {3,7} fileName="vite.config.ts" codeFormat="typescript"
|
|
1111
1111
|
import { defineConfig } from "vite";
|
|
1112
1112
|
import preact from "@preact/preset-vite";
|
|
1113
|
-
import { intlayer,
|
|
1113
|
+
import { intlayer, intlayerMiddleware } from "vite-intlayer";
|
|
1114
1114
|
|
|
1115
1115
|
// https://vitejs.dev/config/
|
|
1116
1116
|
export default defineConfig({
|
|
1117
|
-
plugins: [preact(), intlayer(),
|
|
1117
|
+
plugins: [preact(), intlayer(), intlayerMiddleware()],
|
|
1118
1118
|
});
|
|
1119
1119
|
```
|
|
1120
1120
|
|
|
1121
1121
|
```javascript {3,7} fileName="vite.config.mjs" codeFormat="esm"
|
|
1122
1122
|
import { defineConfig } from "vite";
|
|
1123
1123
|
import preact from "@preact/preset-vite";
|
|
1124
|
-
import { intlayer,
|
|
1124
|
+
import { intlayer, intlayerMiddleware } from "vite-intlayer";
|
|
1125
1125
|
|
|
1126
1126
|
// https://vitejs.dev/config/
|
|
1127
1127
|
export default defineConfig({
|
|
1128
|
-
plugins: [preact(), intlayer(),
|
|
1128
|
+
plugins: [preact(), intlayer(), intlayerMiddleware()],
|
|
1129
1129
|
});
|
|
1130
1130
|
```
|
|
1131
1131
|
|
|
1132
1132
|
```javascript {3,7} fileName="vite.config.cjs" codeFormat="commonjs"
|
|
1133
1133
|
const { defineConfig } = require("vite");
|
|
1134
1134
|
const preact = require("@preact/preset-vite");
|
|
1135
|
-
const { intlayer,
|
|
1135
|
+
const { intlayer, intlayerMiddleware } = require("vite-intlayer");
|
|
1136
1136
|
|
|
1137
1137
|
// https://vitejs.dev/config/
|
|
1138
1138
|
module.exports = defineConfig({
|
|
1139
|
-
plugins: [preact(), intlayer(),
|
|
1139
|
+
plugins: [preact(), intlayer(), intlayerMiddleware()],
|
|
1140
1140
|
});
|
|
1141
1141
|
```
|
|
1142
1142
|
|
|
@@ -1671,9 +1671,9 @@ module.exports = { LocalizedLink, checkIsExternalLink };
|
|
|
1671
1671
|
|
|
1672
1672
|
Intlayer는 모듈 확장을 사용하여 TypeScript의 이점을 활용하고 코드베이스를 더욱 견고하게 만듭니다.
|
|
1673
1673
|
|
|
1674
|
-

|
|
1675
1675
|
|
|
1676
|
-

|
|
1677
1677
|
|
|
1678
1678
|
TypeScript 구성에 자동 생성된 타입이 포함되어 있는지 확인하세요.
|
|
1679
1679
|
|
|
@@ -1006,38 +1006,38 @@ const App = () => (
|
|
|
1006
1006
|
);
|
|
1007
1007
|
```
|
|
1008
1008
|
|
|
1009
|
-
병행하여, `
|
|
1009
|
+
병행하여, `intlayerMiddleware`을 사용하여 애플리케이션에 서버 사이드 라우팅을 추가할 수도 있습니다. 이 플러그인은 URL을 기반으로 현재 로케일을 자동으로 감지하고 적절한 로케일 쿠키를 설정합니다. 로케일이 지정되지 않은 경우, 플러그인은 사용자의 브라우저 언어 설정을 기반으로 가장 적합한 로케일을 결정합니다. 로케일이 감지되지 않으면 기본 로케일로 리디렉션합니다.
|
|
1010
1010
|
|
|
1011
1011
|
```typescript {3,7} fileName="vite.config.ts" codeFormat="typescript"
|
|
1012
1012
|
import { defineConfig } from "vite";
|
|
1013
1013
|
import react from "@vitejs/plugin-react-swc";
|
|
1014
|
-
import { intlayer,
|
|
1014
|
+
import { intlayer, intlayerMiddleware } from "vite-intlayer";
|
|
1015
1015
|
|
|
1016
1016
|
// https://vitejs.dev/config/
|
|
1017
1017
|
export default defineConfig({
|
|
1018
|
-
plugins: [react(), intlayer(),
|
|
1018
|
+
plugins: [react(), intlayer(), intlayerMiddleware()],
|
|
1019
1019
|
});
|
|
1020
1020
|
```
|
|
1021
1021
|
|
|
1022
1022
|
```javascript {3,7} fileName="vite.config.mjs" codeFormat="esm"
|
|
1023
1023
|
import { defineConfig } from "vite";
|
|
1024
1024
|
import react from "@vitejs/plugin-react-swc";
|
|
1025
|
-
import { intlayer,
|
|
1025
|
+
import { intlayer, intlayerMiddleware } from "vite-intlayer";
|
|
1026
1026
|
|
|
1027
1027
|
// https://vitejs.dev/config/
|
|
1028
1028
|
export default defineConfig({
|
|
1029
|
-
plugins: [react(), intlayer(),
|
|
1029
|
+
plugins: [react(), intlayer(), intlayerMiddleware()],
|
|
1030
1030
|
});
|
|
1031
1031
|
```
|
|
1032
1032
|
|
|
1033
1033
|
```javascript {3,7} fileName="vite.config.cjs" codeFormat="commonjs"
|
|
1034
1034
|
const { defineConfig } = require("vite");
|
|
1035
1035
|
const react = require("@vitejs/plugin-react-swc");
|
|
1036
|
-
const { intlayer,
|
|
1036
|
+
const { intlayer, intlayerMiddleware } = require("vite-intlayer");
|
|
1037
1037
|
|
|
1038
1038
|
// https://vitejs.dev/config/
|
|
1039
1039
|
module.exports = defineConfig({
|
|
1040
|
-
plugins: [react(), intlayer(),
|
|
1040
|
+
plugins: [react(), intlayer(), intlayerMiddleware()],
|
|
1041
1041
|
});
|
|
1042
1042
|
```
|
|
1043
1043
|
|
|
@@ -1571,9 +1571,9 @@ Link.displayName = "Link";
|
|
|
1571
1571
|
|
|
1572
1572
|
Intlayer는 모듈 확장을 사용하여 TypeScript의 이점을 활용하고 코드베이스를 더욱 견고하게 만듭니다.
|
|
1573
1573
|
|
|
1574
|
-

|
|
1575
1575
|
|
|
1576
|
-

|
|
1577
1577
|
|
|
1578
1578
|
TypeScript 구성에 자동 생성된 타입이 포함되어 있는지 확인하세요.
|
|
1579
1579
|
|
|
@@ -685,46 +685,46 @@ import LocaleSwitcher from "@components/LocaleSwitcher.vue";
|
|
|
685
685
|
</template>
|
|
686
686
|
```
|
|
687
687
|
|
|
688
|
-
동시에, `
|
|
688
|
+
동시에, `intlayerMiddleware`을 사용하여 애플리케이션에 서버 사이드 라우팅을 추가할 수도 있습니다. 이 플러그인은 URL을 기반으로 현재 로케일을 자동으로 감지하고 적절한 로케일 쿠키를 설정합니다. 로케일이 지정되지 않은 경우, 사용자의 브라우저 언어 설정을 기반으로 가장 적합한 로케일을 결정합니다. 로케일이 감지되지 않으면 기본 로케일로 리디렉션합니다.
|
|
689
689
|
|
|
690
690
|
```typescript {3,7} fileName="vite.config.ts" codeFormat="typescript"
|
|
691
691
|
import { defineConfig } from "vite";
|
|
692
692
|
import vue from "@vitejs/plugin-vue";
|
|
693
|
-
import { intlayer,
|
|
693
|
+
import { intlayer, intlayerMiddleware } from "vite-intlayer";
|
|
694
694
|
|
|
695
695
|
// https://vitejs.dev/config/
|
|
696
696
|
export default defineConfig({
|
|
697
|
-
plugins: [vue(), intlayer(),
|
|
697
|
+
plugins: [vue(), intlayer(), intlayerMiddleware()],
|
|
698
698
|
});
|
|
699
699
|
```
|
|
700
700
|
|
|
701
701
|
```javascript {3,7} fileName="vite.config.mjs" codeFormat="esm"
|
|
702
702
|
import { defineConfig } from "vite";
|
|
703
703
|
import vue from "@vitejs/plugin-vue";
|
|
704
|
-
import { intlayer,
|
|
704
|
+
import { intlayer, intlayerMiddleware } from "vite-intlayer";
|
|
705
705
|
|
|
706
706
|
// https://vitejs.dev/config/
|
|
707
707
|
export default defineConfig({
|
|
708
|
-
plugins: [vue(), intlayer(),
|
|
708
|
+
plugins: [vue(), intlayer(), intlayerMiddleware()],
|
|
709
709
|
});
|
|
710
710
|
```
|
|
711
711
|
|
|
712
712
|
```javascript {3,7} fileName="vite.config.cjs" codeFormat="commonjs"
|
|
713
713
|
const { defineConfig } = require("vite");
|
|
714
714
|
const vue = require("@vitejs/plugin-vue");
|
|
715
|
-
const { intlayer,
|
|
715
|
+
const { intlayer, intlayerMiddleware } = require("vite-intlayer");
|
|
716
716
|
|
|
717
717
|
// https://vitejs.dev/config/
|
|
718
718
|
module.exports = defineConfig({
|
|
719
|
-
plugins: [vue(), intlayer(),
|
|
719
|
+
plugins: [vue(), intlayer(), intlayerMiddleware()],
|
|
720
720
|
});
|
|
721
721
|
const { defineConfig } = require("vite");
|
|
722
722
|
const vue = require("@vitejs/plugin-vue");
|
|
723
|
-
const { intlayer,
|
|
723
|
+
const { intlayer, intlayerMiddleware } = require("vite-intlayer");
|
|
724
724
|
|
|
725
725
|
// https://vitejs.dev/config/
|
|
726
726
|
module.exports = defineConfig({
|
|
727
|
-
plugins: [vue(), intlayer(),
|
|
727
|
+
plugins: [vue(), intlayer(), intlayerMiddleware()],
|
|
728
728
|
});
|
|
729
729
|
```
|
|
730
730
|
|
|
@@ -1028,9 +1028,9 @@ const { myMarkdownContent } = useIntlayer("my-component");
|
|
|
1028
1028
|
|
|
1029
1029
|
Intlayer는 모듈 확장을 사용하여 TypeScript의 이점을 활용하고 코드베이스를 더욱 견고하게 만듭니다.
|
|
1030
1030
|
|
|
1031
|
-

|
|
1032
1032
|
|
|
1033
|
-

|
|
1034
1034
|
|
|
1035
1035
|
TypeScript 구성에 자동 생성된 타입이 포함되어 있는지 확인하세요.
|
|
1036
1036
|
|
|
@@ -662,9 +662,9 @@ Para cenários mais complexos, você pode criar um pipe para renderizar o HTML c
|
|
|
662
662
|
|
|
663
663
|
O Intlayer usa a ampliação de módulos para aproveitar os benefícios do TypeScript e tornar sua base de código mais robusta.
|
|
664
664
|
|
|
665
|
-

|
|
666
666
|
|
|
667
|
-

|
|
668
668
|
|
|
669
669
|
Certifique-se de que sua configuração do TypeScript inclua os tipos gerados automaticamente.
|
|
670
670
|
|
|
@@ -0,0 +1,246 @@
|
|
|
1
|
+
---
|
|
2
|
+
createdAt: 2024-03-07
|
|
3
|
+
updatedAt: 2025-10-03
|
|
4
|
+
title: Começando com Intlayer no Astro
|
|
5
|
+
description: Aprenda como adicionar internacionalização (i18n) à sua aplicação Vite e React usando Intlayer. Siga este guia para tornar seu app multilíngue.
|
|
6
|
+
keywords:
|
|
7
|
+
- Internacionalização
|
|
8
|
+
- Documentação
|
|
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
|
+
# Começando a Internacionalizar (i18n) com Intlayer e Astro
|
|
22
|
+
|
|
23
|
+
Veja o [Modelo de Aplicação](https://github.com/aymericzip/intlayer-astro-template) no GitHub.
|
|
24
|
+
|
|
25
|
+
## O que é Intlayer?
|
|
26
|
+
|
|
27
|
+
**Intlayer** é uma biblioteca inovadora e open-source de internacionalização (i18n) projetada para simplificar o suporte multilíngue em aplicações web modernas.
|
|
28
|
+
|
|
29
|
+
Com o Intlayer, você pode:
|
|
30
|
+
|
|
31
|
+
- **Gerenciar traduções facilmente** usando dicionários declarativos no nível do componente.
|
|
32
|
+
- **Localizar dinamicamente metadados**, rotas e conteúdo.
|
|
33
|
+
- **Garantir suporte ao TypeScript** com tipos autogerados, melhorando o autocompletar e a detecção de erros.
|
|
34
|
+
- **Aproveitar recursos avançados**, como detecção e troca dinâmica de localidade.
|
|
35
|
+
|
|
36
|
+
---
|
|
37
|
+
|
|
38
|
+
## Guia Passo a Passo para Configurar o Intlayer no Astro
|
|
39
|
+
|
|
40
|
+
### Passo 1: Instalar Dependências
|
|
41
|
+
|
|
42
|
+
Instale os pacotes necessários usando seu gerenciador de pacotes:
|
|
43
|
+
|
|
44
|
+
```bash packageManager="npm"
|
|
45
|
+
npm install intlayer astro-intlayer
|
|
46
|
+
# Opcional: adicionar suporte a React island
|
|
47
|
+
npm install react react-dom react-intlayer @astrojs/react
|
|
48
|
+
```
|
|
49
|
+
|
|
50
|
+
```bash packageManager="pnpm"
|
|
51
|
+
pnpm add intlayer astro-intlayer
|
|
52
|
+
# Opcional: adicionar suporte a React island
|
|
53
|
+
pnpm add react react-dom react-intlayer @astrojs/react
|
|
54
|
+
```
|
|
55
|
+
|
|
56
|
+
```bash packageManager="yarn"
|
|
57
|
+
yarn add intlayer astro-intlayer
|
|
58
|
+
# Opcional: adicionar suporte a React island
|
|
59
|
+
yarn add react react-dom react-intlayer @astrojs/react
|
|
60
|
+
```
|
|
61
|
+
|
|
62
|
+
- **intlayer**
|
|
63
|
+
O pacote principal que fornece ferramentas de internacionalização para gerenciamento de configuração, tradução, [declaração de conteúdo](https://github.com/aymericzip/intlayer/blob/main/docs/docs/pt/dictionary/get_started.md), transpiração e [comandos CLI](https://github.com/aymericzip/intlayer/blob/main/docs/docs/pt/intlayer_cli.md).
|
|
64
|
+
|
|
65
|
+
- **astro-intlayer**
|
|
66
|
+
Inclui o plugin de integração do Astro para integrar o Intlayer com o [empacotador Vite](https://vite.dev/guide/why.html#why-bundle-for-production), assim como middleware para detectar o idioma preferido do usuário, gerenciar cookies e lidar com redirecionamento de URL.
|
|
67
|
+
|
|
68
|
+
### Passo 2: Configuração do seu projeto
|
|
69
|
+
|
|
70
|
+
Crie um arquivo de configuração para configurar os idiomas da sua aplicação:
|
|
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
|
+
// Seus outros idiomas
|
|
82
|
+
],
|
|
83
|
+
defaultLocale: Locales.ENGLISH,
|
|
84
|
+
},
|
|
85
|
+
};
|
|
86
|
+
|
|
87
|
+
export default config;
|
|
88
|
+
```
|
|
89
|
+
|
|
90
|
+
> Através deste arquivo de configuração, você pode configurar URLs localizadas, redirecionamento via middleware, nomes de cookies, a localização e extensão das suas declarações de conteúdo, desabilitar logs do Intlayer no console, e muito mais. Para uma lista completa dos parâmetros disponíveis, consulte a [documentação de configuração](https://github.com/aymericzip/intlayer/blob/main/docs/docs/pt/configuration.md).
|
|
91
|
+
|
|
92
|
+
### Passo 3: Integre o Intlayer na sua Configuração do Astro
|
|
93
|
+
|
|
94
|
+
Adicione o plugin intlayer na sua configuração.
|
|
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
|
+
> O plugin de integração `intlayer()` para Astro é usado para integrar o Intlayer com o Astro. Ele garante a construção dos arquivos de declaração de conteúdo e os monitora no modo de desenvolvimento. Define variáveis de ambiente do Intlayer dentro da aplicação Astro. Além disso, fornece aliases para otimizar o desempenho.
|
|
109
|
+
|
|
110
|
+
### Passo 4: Declare Seu Conteúdo
|
|
111
|
+
|
|
112
|
+
Crie e gerencie suas declarações de conteúdo para armazenar traduções:
|
|
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
|
+
> Suas declarações de conteúdo podem ser definidas em qualquer lugar da sua aplicação, desde que estejam incluídas no diretório `contentDir` (por padrão, `./src`). E correspondam à extensão do arquivo de declaração de conteúdo (por padrão, `.content.{json,ts,tsx,js,jsx,mjs,mjx,cjs,cjx}`).
|
|
133
|
+
|
|
134
|
+
> Para mais detalhes, consulte a [documentação de declaração de conteúdo](https://github.com/aymericzip/intlayer/blob/main/docs/docs/pt/dictionary/get_started.md).
|
|
135
|
+
|
|
136
|
+
### Passo 5: Use seu conteúdo no Astro
|
|
137
|
+
|
|
138
|
+
Você pode consumir dicionários diretamente em arquivos `.astro` usando os helpers principais exportados pelo `intlayer`.
|
|
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
|
+
### Passo 6: Roteamento localizado
|
|
162
|
+
|
|
163
|
+
Crie um segmento de rota dinâmica para servir páginas localizadas, por exemplo `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
|
+
A integração do Astro adiciona um middleware Vite durante o desenvolvimento que ajuda com o roteamento consciente de localidade e definições de ambiente. Você ainda pode criar links entre localidades usando sua própria lógica, ou funções utilitárias como `getLocalizedUrl` do `intlayer`.
|
|
177
|
+
|
|
178
|
+
### Passo 7: Continue usando seu framework favorito
|
|
179
|
+
|
|
180
|
+
Continue usando seu framework favorito para construir sua aplicação.
|
|
181
|
+
|
|
182
|
+
- Intlayer + React: [Intlayer com React](https://github.com/aymericzip/intlayer/blob/main/docs/docs/pt/intlayer_with_vite+react.md)
|
|
183
|
+
- Intlayer + Vue: [Intlayer com Vue](https://github.com/aymericzip/intlayer/blob/main/docs/docs/pt/intlayer_with_vite+vue.md)
|
|
184
|
+
- Intlayer + Svelte: [Intlayer com Svelte](https://github.com/aymericzip/intlayer/blob/main/docs/docs/pt/intlayer_with_vite+svelte.md)
|
|
185
|
+
- Intlayer + Solid: [Intlayer com Solid](https://github.com/aymericzip/intlayer/blob/main/docs/docs/pt/intlayer_with_vite+solid.md)
|
|
186
|
+
- Intlayer + Preact: [Intlayer com Preact](https://github.com/aymericzip/intlayer/blob/main/docs/docs/pt/intlayer_with_vite+preact.md)
|
|
187
|
+
|
|
188
|
+
### Configurar TypeScript
|
|
189
|
+
|
|
190
|
+
Intlayer usa a ampliação de módulos para obter os benefícios do TypeScript e tornar sua base de código mais robusta.
|
|
191
|
+
|
|
192
|
+

|
|
193
|
+
|
|
194
|
+

|
|
195
|
+
|
|
196
|
+
Certifique-se de que sua configuração do TypeScript inclua os tipos gerados automaticamente.
|
|
197
|
+
|
|
198
|
+
```json5 fileName="tsconfig.json"
|
|
199
|
+
{
|
|
200
|
+
// ... Suas configurações existentes do TypeScript
|
|
201
|
+
"include": [
|
|
202
|
+
// ... Suas configurações existentes do TypeScript
|
|
203
|
+
".intlayer/**/*.ts", // Inclua os tipos gerados automaticamente
|
|
204
|
+
],
|
|
205
|
+
}
|
|
206
|
+
```
|
|
207
|
+
|
|
208
|
+
### Configuração do Git
|
|
209
|
+
|
|
210
|
+
É recomendado ignorar os arquivos gerados pelo Intlayer. Isso permite evitar que eles sejam commitados no seu repositório Git.
|
|
211
|
+
|
|
212
|
+
Para isso, você pode adicionar as seguintes instruções ao seu arquivo `.gitignore`:
|
|
213
|
+
|
|
214
|
+
```plaintext
|
|
215
|
+
# Ignorar os arquivos gerados pelo Intlayer
|
|
216
|
+
.intlayer
|
|
217
|
+
```
|
|
218
|
+
|
|
219
|
+
### Extensão do VS Code
|
|
220
|
+
|
|
221
|
+
Para melhorar sua experiência de desenvolvimento com o Intlayer, você pode instalar a **Extensão oficial do Intlayer para VS Code**.
|
|
222
|
+
|
|
223
|
+
[Instalar no Marketplace do VS Code](https://marketplace.visualstudio.com/items?itemName=intlayer.intlayer-vs-code-extension)
|
|
224
|
+
|
|
225
|
+
Esta extensão oferece:
|
|
226
|
+
|
|
227
|
+
- **Autocompletar** para chaves de tradução.
|
|
228
|
+
- **Detecção de erros em tempo real** para traduções ausentes.
|
|
229
|
+
- **Visualizações inline** do conteúdo traduzido.
|
|
230
|
+
- **Ações rápidas** para criar e atualizar traduções facilmente.
|
|
231
|
+
|
|
232
|
+
Para mais detalhes sobre como usar a extensão, consulte a [documentação da Extensão Intlayer para VS Code](https://intlayer.org/doc/vs-code-extension).
|
|
233
|
+
|
|
234
|
+
---
|
|
235
|
+
|
|
236
|
+
### Ir Além
|
|
237
|
+
|
|
238
|
+
Para ir além, você pode implementar o [editor visual](https://github.com/aymericzip/intlayer/blob/main/docs/docs/pt/intlayer_visual_editor.md) ou externalizar seu conteúdo usando o [CMS](https://github.com/aymericzip/intlayer/blob/main/docs/docs/pt/intlayer_CMS.md).
|
|
239
|
+
|
|
240
|
+
---
|
|
241
|
+
|
|
242
|
+
## Histórico da Documentação
|
|
243
|
+
|
|
244
|
+
| Versão | Data | Alterações |
|
|
245
|
+
| ------ | ---------- | -------------------------------------------------------- |
|
|
246
|
+
| 6.2.0 | 2025-10-03 | Atualização para integração com Astro, configuração, uso |
|
|
@@ -1147,9 +1147,10 @@ Ao aplicar essas alterações, sua aplicação irá:
|
|
|
1147
1147
|
|
|
1148
1148
|
O Intlayer usa a ampliação de módulos para obter os benefícios do TypeScript e tornar sua base de código mais robusta.
|
|
1149
1149
|
|
|
1150
|
-

|
|
1151
|
+
|
|
1152
|
+

|
|
1151
1153
|
|
|
1152
|
-

|
|
1153
1154
|
Certifique-se de que sua configuração do TypeScript inclua os tipos autogerados.
|
|
1154
1155
|
|
|
1155
1156
|
```json5 fileName="tsconfig.json"
|
|
@@ -368,9 +368,9 @@ Por padrão, o `express-intlayer` interpretará o cabeçalho `Accept-Language` p
|
|
|
368
368
|
|
|
369
369
|
`express-intlayer` aproveita as robustas capacidades do TypeScript para aprimorar o processo de internacionalização. A tipagem estática do TypeScript garante que cada chave de tradução seja considerada, reduzindo o risco de traduções ausentes e melhorando a manutenção.
|
|
370
370
|
|
|
371
|
-

|
|
372
372
|
|
|
373
|
-

|
|
374
374
|
|
|
375
375
|
Certifique-se de que os tipos autogerados (por padrão em ./types/intlayer.d.ts) estejam incluídos no seu arquivo tsconfig.json.
|
|
376
376
|
|
|
@@ -222,9 +222,9 @@ Por padrão, o `express-intlayer` interpretará o cabeçalho `Accept-Language` p
|
|
|
222
222
|
|
|
223
223
|
`express-intlayer` aproveita as robustas capacidades do TypeScript para aprimorar o processo de internacionalização. A tipagem estática do TypeScript garante que cada chave de tradução seja considerada, reduzindo o risco de traduções ausentes e melhorando a manutenção.
|
|
224
224
|
|
|
225
|
-

|
|
226
226
|
|
|
227
|
-

|
|
228
228
|
|
|
229
229
|
Certifique-se de que os tipos autogerados (por padrão em ./types/intlayer.d.ts) estejam incluídos no seu arquivo tsconfig.json.
|
|
230
230
|
|
|
@@ -1246,9 +1246,9 @@ yarn add @intlayer/swc --save-dev
|
|
|
1246
1246
|
|
|
1247
1247
|
O Intlayer usa a ampliação de módulos para obter benefícios do TypeScript e tornar sua base de código mais robusta.
|
|
1248
1248
|
|
|
1249
|
-

|
|
1250
1250
|
|
|
1251
|
-

|
|
1252
1252
|
|
|
1253
1253
|
Certifique-se de que sua configuração do TypeScript inclua os tipos autogerados.
|
|
1254
1254
|
|
|
@@ -1463,9 +1463,9 @@ yarn add @intlayer/swc --save-dev
|
|
|
1463
1463
|
|
|
1464
1464
|
O Intlayer utiliza a ampliação de módulos para aproveitar os benefícios do TypeScript e tornar sua base de código mais robusta.
|
|
1465
1465
|
|
|
1466
|
-

|
|
1467
1467
|
|
|
1468
|
-

|
|
1469
1469
|
|
|
1470
1470
|
Certifique-se de que sua configuração do TypeScript inclua os tipos gerados automaticamente.
|
|
1471
1471
|
|
|
@@ -1466,9 +1466,9 @@ yarn add @intlayer/swc --save-dev
|
|
|
1466
1466
|
|
|
1467
1467
|
O Intlayer utiliza a ampliação de módulos para aproveitar os benefícios do TypeScript e tornar sua base de código mais robusta.
|
|
1468
1468
|
|
|
1469
|
-

|
|
1470
1470
|
|
|
1471
|
-

|
|
1472
1472
|
|
|
1473
1473
|
Certifique-se de que sua configuração do TypeScript inclua os tipos gerados automaticamente.
|
|
1474
1474
|
|
|
@@ -764,9 +764,9 @@ module.exports = aboutMetaContent;
|
|
|
764
764
|
|
|
765
765
|
O Intlayer usa a ampliação de módulos para aproveitar os benefícios do TypeScript e tornar sua base de código mais robusta.
|
|
766
766
|
|
|
767
|
-

|
|
768
768
|
|
|
769
|
-

|
|
770
770
|
|
|
771
771
|
Certifique-se de que sua configuração do TypeScript inclua os tipos gerados automaticamente.
|
|
772
772
|
|
|
@@ -148,28 +148,25 @@ module.exports = (async () => {
|
|
|
148
148
|
|
|
149
149
|
## Passo 4: Adicione o provedor Intlayer
|
|
150
150
|
|
|
151
|
-
Para manter
|
|
151
|
+
Para manter sincronizada a linguagem do usuário em toda a sua aplicação, você precisa envolver seu componente raiz com o componente `IntlayerProvider` do `react-intlayer-native`.
|
|
152
152
|
|
|
153
|
-
|
|
153
|
+
> Certifique-se de usar o provedor do `react-native-intlayer` em vez do `react-intlayer`. A exportação do `react-native-intlayer` inclui polyfills para a API web.
|
|
154
154
|
|
|
155
155
|
```tsx fileName="app/_layout.tsx" codeFormat="typescript"
|
|
156
156
|
import { Stack } from "expo-router";
|
|
157
157
|
import { getLocales } from "expo-localization";
|
|
158
|
-
import {
|
|
159
|
-
import { intlayerPolyfill } from "react-native-intlayer";
|
|
158
|
+
import { IntlayerProvider } from "react-native-intlayer";
|
|
160
159
|
import { type FC } from "react";
|
|
161
160
|
|
|
162
|
-
intlayerPolyfill();
|
|
163
|
-
|
|
164
161
|
const getDeviceLocale = () => getLocales()[0]?.languageTag;
|
|
165
162
|
|
|
166
163
|
const RootLayout: FC = () => {
|
|
167
164
|
return (
|
|
168
|
-
<
|
|
165
|
+
<IntlayerProvider defaultLocale={getDeviceLocale()}>
|
|
169
166
|
<Stack>
|
|
170
167
|
<Stack.Screen name="(tabs)" options={{ headerShown: false }} />
|
|
171
168
|
</Stack>
|
|
172
|
-
</
|
|
169
|
+
</IntlayerProvider>
|
|
173
170
|
);
|
|
174
171
|
};
|
|
175
172
|
|
|
@@ -179,20 +176,17 @@ export default RootLayout;
|
|
|
179
176
|
```jsx fileName="app/_layout.mjx" codeFormat="esm"
|
|
180
177
|
import { Stack } from "expo-router";
|
|
181
178
|
import { getLocales } from "expo-localization";
|
|
182
|
-
import {
|
|
183
|
-
import { intlayerPolyfill } from "react-native-intlayer";
|
|
184
|
-
|
|
185
|
-
intlayerPolyfill();
|
|
179
|
+
import { IntlayerProvider } from "react-native-intlayer";
|
|
186
180
|
|
|
187
181
|
const getDeviceLocale = () => getLocales()[0]?.languageTag;
|
|
188
182
|
|
|
189
183
|
const RootLayout = () => {
|
|
190
184
|
return (
|
|
191
|
-
<
|
|
185
|
+
<IntlayerProvider defaultLocale={getDeviceLocale()}>
|
|
192
186
|
<Stack>
|
|
193
187
|
<Stack.Screen name="(tabs)" options={{ headerShown: false }} />
|
|
194
188
|
</Stack>
|
|
195
|
-
</
|
|
189
|
+
</IntlayerProvider>
|
|
196
190
|
);
|
|
197
191
|
};
|
|
198
192
|
|
|
@@ -202,20 +196,17 @@ export default RootLayout;
|
|
|
202
196
|
```jsx fileName="app/_layout.cjx" codeFormat="commonjs"
|
|
203
197
|
const { Stack } = require("expo-router");
|
|
204
198
|
const { getLocales } = require("expo-localization");
|
|
205
|
-
const {
|
|
206
|
-
const { intlayerPolyfill } = require("react-native-intlayer");
|
|
207
|
-
|
|
208
|
-
intlayerPolyfill();
|
|
199
|
+
const { IntlayerProvider } = require("react-native-intlayer");
|
|
209
200
|
|
|
210
201
|
const getDeviceLocale = () => getLocales()[0]?.languageTag;
|
|
211
202
|
|
|
212
203
|
const RootLayout = () => {
|
|
213
204
|
return (
|
|
214
|
-
<
|
|
205
|
+
<IntlayerProvider defaultLocale={getDeviceLocale()}>
|
|
215
206
|
<Stack>
|
|
216
207
|
<Stack.Screen name="(tabs)" options={{ headerShown: false }} />
|
|
217
208
|
</Stack>
|
|
218
|
-
</
|
|
209
|
+
</IntlayerProvider>
|
|
219
210
|
);
|
|
220
211
|
};
|
|
221
212
|
|