@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
|
@@ -1046,38 +1046,38 @@ const App = () => (
|
|
|
1046
1046
|
module.exports = App;
|
|
1047
1047
|
```
|
|
1048
1048
|
|
|
1049
|
-
並行して、`
|
|
1049
|
+
並行して、`intlayerMiddleware` を使用してアプリケーションにサーバーサイドルーティングを追加することもできます。このプラグインはURLに基づいて現在のロケールを自動的に検出し、適切なロケールクッキーを設定します。ロケールが指定されていない場合、プラグインはユーザーのブラウザの言語設定に基づいて最適なロケールを判別します。ロケールが検出されない場合は、デフォルトのロケールにリダイレクトします。
|
|
1050
1050
|
|
|
1051
1051
|
```typescript {3,7} fileName="vite.config.ts" codeFormat="typescript"
|
|
1052
1052
|
import { defineConfig } from "vite";
|
|
1053
1053
|
import preact from "@preact/preset-vite";
|
|
1054
|
-
import { intlayer,
|
|
1054
|
+
import { intlayer, intlayerMiddleware } from "vite-intlayer";
|
|
1055
1055
|
|
|
1056
1056
|
// https://vitejs.dev/config/
|
|
1057
1057
|
export default defineConfig({
|
|
1058
|
-
plugins: [preact(), intlayer(),
|
|
1058
|
+
plugins: [preact(), intlayer(), intlayerMiddleware()],
|
|
1059
1059
|
});
|
|
1060
1060
|
```
|
|
1061
1061
|
|
|
1062
1062
|
```javascript {3,7} fileName="vite.config.mjs" codeFormat="esm"
|
|
1063
1063
|
import { defineConfig } from "vite";
|
|
1064
1064
|
import preact from "@preact/preset-vite";
|
|
1065
|
-
import { intlayer,
|
|
1065
|
+
import { intlayer, intlayerMiddleware } from "vite-intlayer";
|
|
1066
1066
|
|
|
1067
1067
|
// https://vitejs.dev/config/
|
|
1068
1068
|
export default defineConfig({
|
|
1069
|
-
plugins: [preact(), intlayer(),
|
|
1069
|
+
plugins: [preact(), intlayer(), intlayerMiddleware()],
|
|
1070
1070
|
});
|
|
1071
1071
|
```
|
|
1072
1072
|
|
|
1073
1073
|
```javascript {3,7} fileName="vite.config.cjs" codeFormat="commonjs"
|
|
1074
1074
|
const { defineConfig } = require("vite");
|
|
1075
1075
|
const preact = require("@preact/preset-vite");
|
|
1076
|
-
const { intlayer,
|
|
1076
|
+
const { intlayer, intlayerMiddleware } = require("vite-intlayer");
|
|
1077
1077
|
|
|
1078
1078
|
// https://vitejs.dev/config/
|
|
1079
1079
|
module.exports = defineConfig({
|
|
1080
|
-
plugins: [preact(), intlayer(),
|
|
1080
|
+
plugins: [preact(), intlayer(), intlayerMiddleware()],
|
|
1081
1081
|
});
|
|
1082
1082
|
```
|
|
1083
1083
|
|
|
@@ -1622,9 +1622,9 @@ module.exports = { LocalizedLink, checkIsExternalLink };
|
|
|
1622
1622
|
|
|
1623
1623
|
Intlayerはモジュール拡張を利用してTypeScriptの利点を活かし、コードベースをより強固にします。
|
|
1624
1624
|
|
|
1625
|
-

|
|
1626
1626
|
|
|
1627
|
-

|
|
1628
1628
|
|
|
1629
1629
|
TypeScriptの設定に自動生成された型が含まれていることを確認してください。
|
|
1630
1630
|
|
|
@@ -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
|
|
|
@@ -1605,9 +1605,9 @@ Link.displayName = "Link";
|
|
|
1605
1605
|
|
|
1606
1606
|
Intlayer はモジュール拡張を利用して TypeScript の利点を活かし、コードベースをより強固にします。
|
|
1607
1607
|
|
|
1608
|
-

|
|
1609
1609
|
|
|
1610
|
-

|
|
1611
1611
|
|
|
1612
1612
|
TypeScript の設定に自動生成された型が含まれていることを確認してください。
|
|
1613
1613
|
|
|
@@ -1619,9 +1619,9 @@ TypeScript の設定に自動生成された型が含まれていることを確
|
|
|
1619
1619
|
|
|
1620
1620
|
Intlayerはモジュール拡張を利用してTypeScriptの利点を活かし、コードベースをより堅牢にします。
|
|
1621
1621
|
|
|
1622
|
-

|
|
1623
1623
|
|
|
1624
|
-

|
|
1625
1625
|
|
|
1626
1626
|
TypeScriptの設定に自動生成された型を含めることを確認してください。
|
|
1627
1627
|
|
|
@@ -681,46 +681,46 @@ import LocaleSwitcher from "@components/LocaleSwitcher.vue";
|
|
|
681
681
|
</template>
|
|
682
682
|
```
|
|
683
683
|
|
|
684
|
-
同時に、`
|
|
684
|
+
同時に、`intlayerMiddleware` を使用してアプリケーションにサーバーサイドルーティングを追加することもできます。このプラグインはURLに基づいて現在のロケールを自動的に検出し、適切なロケールクッキーを設定します。ロケールが指定されていない場合、プラグインはユーザーのブラウザの言語設定に基づいて最適なロケールを判定します。ロケールが検出されない場合は、デフォルトのロケールにリダイレクトします。
|
|
685
685
|
|
|
686
686
|
```typescript {3,7} fileName="vite.config.ts" codeFormat="typescript"
|
|
687
687
|
import { defineConfig } from "vite";
|
|
688
688
|
import vue from "@vitejs/plugin-vue";
|
|
689
|
-
import { intlayer,
|
|
689
|
+
import { intlayer, intlayerMiddleware } from "vite-intlayer";
|
|
690
690
|
|
|
691
691
|
// https://vitejs.dev/config/
|
|
692
692
|
export default defineConfig({
|
|
693
|
-
plugins: [vue(), intlayer(),
|
|
693
|
+
plugins: [vue(), intlayer(), intlayerMiddleware()],
|
|
694
694
|
});
|
|
695
695
|
```
|
|
696
696
|
|
|
697
697
|
```javascript {3,7} fileName="vite.config.mjs" codeFormat="esm"
|
|
698
698
|
import { defineConfig } from "vite";
|
|
699
699
|
import vue from "@vitejs/plugin-vue";
|
|
700
|
-
import { intlayer,
|
|
700
|
+
import { intlayer, intlayerMiddleware } from "vite-intlayer";
|
|
701
701
|
|
|
702
702
|
// https://vitejs.dev/config/
|
|
703
703
|
export default defineConfig({
|
|
704
|
-
plugins: [vue(), intlayer(),
|
|
704
|
+
plugins: [vue(), intlayer(), intlayerMiddleware()],
|
|
705
705
|
});
|
|
706
706
|
```
|
|
707
707
|
|
|
708
708
|
```javascript {3,7} fileName="vite.config.cjs" codeFormat="commonjs"
|
|
709
709
|
const { defineConfig } = require("vite");
|
|
710
710
|
const vue = require("@vitejs/plugin-vue");
|
|
711
|
-
const { intlayer,
|
|
711
|
+
const { intlayer, intlayerMiddleware } = require("vite-intlayer");
|
|
712
712
|
|
|
713
713
|
// https://vitejs.dev/config/
|
|
714
714
|
module.exports = defineConfig({
|
|
715
|
-
plugins: [vue(), intlayer(),
|
|
715
|
+
plugins: [vue(), intlayer(), intlayerMiddleware()],
|
|
716
716
|
});
|
|
717
717
|
const { defineConfig } = require("vite");
|
|
718
718
|
const vue = require("@vitejs/plugin-vue");
|
|
719
|
-
const { intlayer,
|
|
719
|
+
const { intlayer, intlayerMiddleware } = require("vite-intlayer");
|
|
720
720
|
|
|
721
721
|
// https://vitejs.dev/config/
|
|
722
722
|
module.exports = defineConfig({
|
|
723
|
-
plugins: [vue(), intlayer(),
|
|
723
|
+
plugins: [vue(), intlayer(), intlayerMiddleware()],
|
|
724
724
|
});
|
|
725
725
|
```
|
|
726
726
|
|
|
@@ -1024,9 +1024,9 @@ const { myMarkdownContent } = useIntlayer("my-component");
|
|
|
1024
1024
|
|
|
1025
1025
|
Intlayerはモジュール拡張を利用して、TypeScriptの利点を活かし、コードベースをより強固にします。
|
|
1026
1026
|
|
|
1027
|
-

|
|
1028
1028
|
|
|
1029
|
-

|
|
1030
1030
|
|
|
1031
1031
|
TypeScriptの設定に自動生成された型定義が含まれていることを確認してください。
|
|
1032
1032
|
|
|
@@ -634,9 +634,9 @@ npm install -D @types/markdown-it
|
|
|
634
634
|
|
|
635
635
|
Intlayer는 모듈 증강(module augmentation)을 사용하여 TypeScript의 이점을 활용하고 코드베이스를 더욱 견고하게 만듭니다.
|
|
636
636
|
|
|
637
|
-

|
|
638
638
|
|
|
639
|
-

|
|
640
640
|
|
|
641
641
|
TypeScript 구성에 자동 생성된 타입이 포함되어 있는지 확인하세요.
|
|
642
642
|
|
|
@@ -0,0 +1,246 @@
|
|
|
1
|
+
---
|
|
2
|
+
createdAt: 2024-03-07
|
|
3
|
+
updatedAt: 2025-10-03
|
|
4
|
+
title: Astro에서 Intlayer 시작하기
|
|
5
|
+
description: Intlayer를 사용하여 Vite 및 React 애플리케이션에 국제화(i18n)를 추가하는 방법을 배우세요. 이 가이드를 따라 앱을 다국어로 만드세요.
|
|
6
|
+
keywords:
|
|
7
|
+
- 국제화
|
|
8
|
+
- 문서
|
|
9
|
+
- Intlayer
|
|
10
|
+
- Vite
|
|
11
|
+
- React
|
|
12
|
+
- i18n
|
|
13
|
+
- 자바스크립트
|
|
14
|
+
slugs:
|
|
15
|
+
- doc
|
|
16
|
+
- environment
|
|
17
|
+
- astro
|
|
18
|
+
applicationTemplate: https://github.com/aymericzip/intlayer-astro-template
|
|
19
|
+
---
|
|
20
|
+
|
|
21
|
+
# Intlayer와 Astro로 국제화(i18n) 시작하기
|
|
22
|
+
|
|
23
|
+
GitHub에서 [애플리케이션 템플릿](https://github.com/aymericzip/intlayer-astro-template)을 참조하세요.
|
|
24
|
+
|
|
25
|
+
## Intlayer란 무엇인가요?
|
|
26
|
+
|
|
27
|
+
**Intlayer**는 현대 웹 애플리케이션에서 다국어 지원을 간소화하기 위해 설계된 혁신적이고 오픈 소스인 국제화(i18n) 라이브러리입니다.
|
|
28
|
+
|
|
29
|
+
Intlayer를 사용하면 다음을 할 수 있습니다:
|
|
30
|
+
|
|
31
|
+
- **컴포넌트 수준에서 선언적 사전을 사용하여 번역을 쉽게 관리**할 수 있습니다.
|
|
32
|
+
- **메타데이터, 라우트 및 콘텐츠를 동적으로 현지화**할 수 있습니다.
|
|
33
|
+
- **자동 생성된 타입으로 TypeScript 지원을 보장**하여 자동 완성 및 오류 감지를 향상시킵니다.
|
|
34
|
+
- **동적 로케일 감지 및 전환과 같은 고급 기능**을 활용할 수 있습니다.
|
|
35
|
+
|
|
36
|
+
---
|
|
37
|
+
|
|
38
|
+
## Astro에서 Intlayer 설정 단계별 가이드
|
|
39
|
+
|
|
40
|
+
### 1단계: 의존성 설치
|
|
41
|
+
|
|
42
|
+
패키지 관리자를 사용하여 필요한 패키지를 설치하세요:
|
|
43
|
+
|
|
44
|
+
```bash packageManager="npm"
|
|
45
|
+
npm install intlayer astro-intlayer
|
|
46
|
+
# 선택 사항: React 아일랜드 지원 추가
|
|
47
|
+
npm install react react-dom react-intlayer @astrojs/react
|
|
48
|
+
```
|
|
49
|
+
|
|
50
|
+
```bash packageManager="pnpm"
|
|
51
|
+
pnpm add intlayer astro-intlayer
|
|
52
|
+
# 선택 사항: React 아일랜드 지원 추가
|
|
53
|
+
pnpm add react react-dom react-intlayer @astrojs/react
|
|
54
|
+
```
|
|
55
|
+
|
|
56
|
+
```bash packageManager="yarn"
|
|
57
|
+
yarn add intlayer astro-intlayer
|
|
58
|
+
# 선택 사항: React 아일랜드 지원 추가
|
|
59
|
+
yarn add react react-dom react-intlayer @astrojs/react
|
|
60
|
+
```
|
|
61
|
+
|
|
62
|
+
- **intlayer**
|
|
63
|
+
구성 관리, 번역, [콘텐츠 선언](https://github.com/aymericzip/intlayer/blob/main/docs/docs/ko/dictionary/get_started.md), 트랜스파일링 및 [CLI 명령어](https://github.com/aymericzip/intlayer/blob/main/docs/docs/ko/intlayer_cli.md)를 제공하는 국제화 도구의 핵심 패키지입니다.
|
|
64
|
+
|
|
65
|
+
- **astro-intlayer**
|
|
66
|
+
Astro와 Intlayer를 [Vite 번들러](https://vite.dev/guide/why.html#why-bundle-for-production)와 통합하기 위한 Astro 통합 플러그인과 사용자의 선호 로케일 감지, 쿠키 관리, URL 리디렉션 처리를 위한 미들웨어를 포함합니다.
|
|
67
|
+
|
|
68
|
+
### 2단계: 프로젝트 구성
|
|
69
|
+
|
|
70
|
+
애플리케이션의 언어를 구성하기 위한 설정 파일을 만듭니다:
|
|
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
|
+
// 다른 로케일들
|
|
82
|
+
],
|
|
83
|
+
defaultLocale: Locales.ENGLISH,
|
|
84
|
+
},
|
|
85
|
+
};
|
|
86
|
+
|
|
87
|
+
export default config;
|
|
88
|
+
```
|
|
89
|
+
|
|
90
|
+
> 이 구성 파일을 통해 지역화된 URL, 미들웨어 리디렉션, 쿠키 이름, 콘텐츠 선언의 위치 및 확장자 설정, 콘솔에서 Intlayer 로그 비활성화 등 다양한 설정을 할 수 있습니다. 사용 가능한 모든 매개변수 목록은 [구성 문서](https://github.com/aymericzip/intlayer/blob/main/docs/docs/ko/configuration.md)를 참조하세요.
|
|
91
|
+
|
|
92
|
+
### 3단계: Astro 구성에 Intlayer 통합하기
|
|
93
|
+
|
|
94
|
+
intlayer 플러그인을 구성에 추가하세요.
|
|
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
|
+
> `intlayer()` Astro 통합 플러그인은 Intlayer를 Astro와 통합하는 데 사용됩니다. 이 플러그인은 콘텐츠 선언 파일을 빌드하고 개발 모드에서 이를 모니터링하는 역할을 합니다. 또한 Astro 애플리케이션 내에서 Intlayer 환경 변수를 정의하며, 성능 최적화를 위해 별칭(alias)을 제공합니다.
|
|
109
|
+
|
|
110
|
+
### 4단계: 콘텐츠 선언하기
|
|
111
|
+
|
|
112
|
+
번역을 저장하기 위해 콘텐츠 선언을 생성하고 관리하세요:
|
|
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
|
+
> 콘텐츠 선언은 애플리케이션 내 어디에서나 정의할 수 있으며, `contentDir` 디렉토리(기본값은 `./src`)에 포함되기만 하면 됩니다. 그리고 콘텐츠 선언 파일 확장자(기본값은 `.content.{json,ts,tsx,js,jsx,mjs,mjx,cjs,cjx}`)와 일치해야 합니다.
|
|
133
|
+
|
|
134
|
+
> 자세한 내용은 [콘텐츠 선언 문서](https://github.com/aymericzip/intlayer/blob/main/docs/docs/ko/dictionary/get_started.md)를 참조하세요.
|
|
135
|
+
|
|
136
|
+
### 5단계: Astro에서 콘텐츠 사용하기
|
|
137
|
+
|
|
138
|
+
`intlayer`에서 내보내는 핵심 헬퍼를 사용하여 `.astro` 파일에서 사전을 직접 사용할 수 있습니다.
|
|
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
|
+
### 6단계: 지역화된 라우팅
|
|
162
|
+
|
|
163
|
+
지역화된 페이지를 제공하기 위해 동적 라우트 세그먼트를 생성합니다. 예를 들어 `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
|
+
Astro 통합은 개발 중에 지역 인식 라우팅과 환경 정의를 돕는 Vite 미들웨어를 추가합니다. 여전히 자신의 로직이나 `intlayer`의 `getLocalizedUrl`과 같은 유틸리티 함수를 사용하여 로케일 간 링크를 연결할 수 있습니다.
|
|
177
|
+
|
|
178
|
+
### 7단계: 선호하는 프레임워크 계속 사용하기
|
|
179
|
+
|
|
180
|
+
좋아하는 프레임워크를 계속 사용하여 애플리케이션을 구축하세요.
|
|
181
|
+
|
|
182
|
+
- Intlayer + React: [React와 함께하는 Intlayer](https://github.com/aymericzip/intlayer/blob/main/docs/docs/ko/intlayer_with_vite+react.md)
|
|
183
|
+
- Intlayer + Vue: [Vue와 함께하는 Intlayer](https://github.com/aymericzip/intlayer/blob/main/docs/docs/ko/intlayer_with_vite+vue.md)
|
|
184
|
+
- Intlayer + Svelte: [Svelte와 함께하는 Intlayer](https://github.com/aymericzip/intlayer/blob/main/docs/docs/ko/intlayer_with_vite+svelte.md)
|
|
185
|
+
- Intlayer + Solid: [Solid와 함께하는 Intlayer](https://github.com/aymericzip/intlayer/blob/main/docs/docs/ko/intlayer_with_vite+solid.md)
|
|
186
|
+
- Intlayer + Preact: [Preact와 함께하는 Intlayer](https://github.com/aymericzip/intlayer/blob/main/docs/docs/ko/intlayer_with_vite+preact.md)
|
|
187
|
+
|
|
188
|
+
### TypeScript 구성
|
|
189
|
+
|
|
190
|
+
Intlayer는 TypeScript의 이점을 활용하고 코드베이스를 더 강력하게 만들기 위해 모듈 확장을 사용합니다.
|
|
191
|
+
|
|
192
|
+

|
|
193
|
+
|
|
194
|
+

|
|
195
|
+
|
|
196
|
+
TypeScript 설정에 자동 생성된 타입이 포함되어 있는지 확인하세요.
|
|
197
|
+
|
|
198
|
+
```json5 fileName="tsconfig.json"
|
|
199
|
+
{
|
|
200
|
+
// ... 기존 TypeScript 설정
|
|
201
|
+
"include": [
|
|
202
|
+
// ... 기존 TypeScript 설정
|
|
203
|
+
".intlayer/**/*.ts", // 자동 생성된 타입 포함
|
|
204
|
+
],
|
|
205
|
+
}
|
|
206
|
+
```
|
|
207
|
+
|
|
208
|
+
### Git 구성
|
|
209
|
+
|
|
210
|
+
Intlayer가 생성한 파일은 Git 저장소에 커밋하지 않도록 무시하는 것이 권장됩니다.
|
|
211
|
+
|
|
212
|
+
이를 위해, `.gitignore` 파일에 다음 지침을 추가할 수 있습니다:
|
|
213
|
+
|
|
214
|
+
```plaintext
|
|
215
|
+
# Intlayer가 생성한 파일 무시
|
|
216
|
+
.intlayer
|
|
217
|
+
```
|
|
218
|
+
|
|
219
|
+
### VS Code 확장 프로그램
|
|
220
|
+
|
|
221
|
+
Intlayer와 함께 개발 경험을 향상시키기 위해 공식 **Intlayer VS Code 확장 프로그램**을 설치할 수 있습니다.
|
|
222
|
+
|
|
223
|
+
[VS Code 마켓플레이스에서 설치하기](https://marketplace.visualstudio.com/items?itemName=intlayer.intlayer-vs-code-extension)
|
|
224
|
+
|
|
225
|
+
이 확장 프로그램은 다음 기능을 제공합니다:
|
|
226
|
+
|
|
227
|
+
- 번역 키에 대한 **자동 완성**.
|
|
228
|
+
- 누락된 번역에 대한 **실시간 오류 감지**.
|
|
229
|
+
- 번역된 콘텐츠의 **인라인 미리보기**.
|
|
230
|
+
- 번역을 쉽게 생성하고 업데이트할 수 있는 **빠른 작업**.
|
|
231
|
+
|
|
232
|
+
확장 프로그램 사용 방법에 대한 자세한 내용은 [Intlayer VS Code 확장 프로그램 문서](https://intlayer.org/doc/vs-code-extension)를 참조하세요.
|
|
233
|
+
|
|
234
|
+
---
|
|
235
|
+
|
|
236
|
+
### 더 나아가기
|
|
237
|
+
|
|
238
|
+
더 나아가려면 [비주얼 에디터](https://github.com/aymericzip/intlayer/blob/main/docs/docs/ko/intlayer_visual_editor.md)를 구현하거나 [CMS](https://github.com/aymericzip/intlayer/blob/main/docs/docs/ko/intlayer_CMS.md)를 사용하여 콘텐츠를 외부화할 수 있습니다.
|
|
239
|
+
|
|
240
|
+
---
|
|
241
|
+
|
|
242
|
+
## 문서 이력
|
|
243
|
+
|
|
244
|
+
| 버전 | 날짜 | 변경 사항 |
|
|
245
|
+
| ----- | ---------- | --------------------------------- |
|
|
246
|
+
| 6.2.0 | 2025-10-03 | Astro 통합, 구성, 사용법 리프레시 |
|
|
@@ -1172,9 +1172,10 @@ module.exports = App;
|
|
|
1172
1172
|
|
|
1173
1173
|
Intlayer는 TypeScript의 모듈 확장을 사용하여 코드베이스를 더 강력하게 만듭니다.
|
|
1174
1174
|
|
|
1175
|
-

|
|
1176
|
+
|
|
1177
|
+

|
|
1176
1178
|
|
|
1177
|
-

|
|
1178
1179
|
TypeScript 구성에 자동 생성된 타입을 포함해야 합니다.
|
|
1179
1180
|
|
|
1180
1181
|
```json5 fileName="tsconfig.json"
|
|
@@ -368,9 +368,9 @@ module.exports = config;
|
|
|
368
368
|
|
|
369
369
|
`express-intlayer`는 국제화 과정을 향상시키기 위해 TypeScript의 강력한 기능을 활용합니다. TypeScript의 정적 타이핑은 모든 번역 키가 포함되도록 보장하여 누락된 번역의 위험을 줄이고 유지보수성을 향상시킵니다.
|
|
370
370
|
|
|
371
|
-

|
|
372
372
|
|
|
373
|
-

|
|
374
374
|
|
|
375
375
|
자동 생성된 타입들(기본적으로 ./types/intlayer.d.ts 위치)을 tsconfig.json 파일에 포함했는지 확인하세요.
|
|
376
376
|
|
|
@@ -219,9 +219,9 @@ export default config;
|
|
|
219
219
|
|
|
220
220
|
`express-intlayer`는 국제화 프로세스를 향상시키기 위해 TypeScript의 강력한 기능을 활용합니다. TypeScript의 정적 타이핑은 모든 번역 키가 포함되도록 보장하여 누락된 번역의 위험을 줄이고 유지보수성을 향상시킵니다.
|
|
221
221
|
|
|
222
|
-

|
|
223
223
|
|
|
224
|
-

|
|
225
225
|
|
|
226
226
|
자동 생성된 타입들(기본적으로 ./types/intlayer.d.ts 위치)이 tsconfig.json 파일에 포함되어 있는지 확인하세요.
|
|
227
227
|
|
|
@@ -1431,9 +1431,9 @@ yarn add @intlayer/swc --save-dev
|
|
|
1431
1431
|
|
|
1432
1432
|
Intlayer는 모듈 증강(module augmentation)을 사용하여 TypeScript의 이점을 활용하고 코드베이스를 더욱 견고하게 만듭니다.
|
|
1433
1433
|
|
|
1434
|
-

|
|
1435
1435
|
|
|
1436
|
-

|
|
1437
1437
|
|
|
1438
1438
|
TypeScript 구성에 자동 생성된 타입이 포함되어 있는지 확인하세요.
|
|
1439
1439
|
|
|
@@ -1502,9 +1502,9 @@ yarn add @intlayer/swc --save-dev
|
|
|
1502
1502
|
|
|
1503
1503
|
Intlayer는 모듈 증강(module augmentation)을 사용하여 TypeScript의 이점을 활용하고 코드베이스를 더욱 견고하게 만듭니다.
|
|
1504
1504
|
|
|
1505
|
-

|
|
1506
1506
|
|
|
1507
|
-

|
|
1508
1508
|
|
|
1509
1509
|
TypeScript 구성에 자동 생성된 타입이 포함되어 있는지 확인하세요.
|
|
1510
1510
|
|
|
@@ -1455,9 +1455,9 @@ yarn add @intlayer/swc --save-dev
|
|
|
1455
1455
|
|
|
1456
1456
|
Intlayer는 모듈 증강(module augmentation)을 사용하여 TypeScript의 이점을 활용하고 코드베이스를 더욱 견고하게 만듭니다.
|
|
1457
1457
|
|
|
1458
|
-

|
|
1459
1459
|
|
|
1460
|
-

|
|
1461
1461
|
|
|
1462
1462
|
TypeScript 구성에 자동 생성된 타입이 포함되어 있는지 확인하세요.
|
|
1463
1463
|
|
|
@@ -753,9 +753,9 @@ module.exports = aboutMetaContent;
|
|
|
753
753
|
|
|
754
754
|
Intlayer는 모듈 확장을 사용하여 TypeScript의 이점을 활용하고 코드베이스를 더욱 견고하게 만듭니다.
|
|
755
755
|
|
|
756
|
-

|
|
757
757
|
|
|
758
|
-

|
|
759
759
|
|
|
760
760
|
TypeScript 구성에 자동 생성된 타입이 포함되어 있는지 확인하세요.
|
|
761
761
|
|