@intlayer/docs 9.1.3 → 9.2.0
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/ar/rag_powered_documentation_assistant.md +7 -0
- package/blog/de/rag_powered_documentation_assistant.md +6 -0
- package/blog/en-GB/rag_powered_documentation_assistant.md +6 -0
- package/blog/es/rag_powered_documentation_assistant.md +7 -0
- package/blog/fr/i18n_meaning.md +7 -1
- package/blog/fr/list_i18n_technologies/frameworks/angular.md +5 -1
- package/blog/fr/rag_powered_documentation_assistant.md +6 -0
- package/blog/hi/next-i18next_vs_next-intl_vs_intlayer.md +119 -42
- package/blog/hi/rag_powered_documentation_assistant.md +7 -0
- package/blog/id/rag_powered_documentation_assistant.md +6 -0
- package/blog/it/rag_powered_documentation_assistant.md +6 -0
- package/blog/ja/rag_powered_documentation_assistant.md +7 -0
- package/blog/ko/list_i18n_technologies/frameworks/react.md +7 -7
- package/blog/ko/rag_powered_documentation_assistant.md +6 -0
- package/blog/pl/rag_powered_documentation_assistant.md +6 -0
- package/blog/pt/rag_powered_documentation_assistant.md +6 -0
- package/blog/ru/rag_powered_documentation_assistant.md +7 -0
- package/blog/tr/intlayer_with_react-intl.md +3 -1
- package/blog/tr/next-i18next_vs_next-intl_vs_intlayer.md +175 -42
- package/blog/tr/rag_powered_documentation_assistant.md +6 -0
- package/blog/uk/rag_powered_documentation_assistant.md +6 -0
- package/blog/vi/rag_powered_documentation_assistant.md +6 -0
- package/blog/zh/intlayer_with_i18next.md +87 -28
- package/blog/zh/intlayer_with_next-i18next.md +86 -29
- package/blog/zh/intlayer_with_next-intl.md +88 -28
- package/blog/zh/intlayer_with_react-i18next.md +87 -28
- package/blog/zh/intlayer_with_react-intl.md +88 -27
- package/blog/zh/intlayer_with_vue-i18n.md +117 -8
- package/blog/zh/rag_powered_documentation_assistant.md +6 -0
- package/dist/cjs/generated/blog.entry.cjs +27 -27
- package/dist/cjs/generated/blog.entry.cjs.map +1 -1
- package/dist/cjs/generated/docs.entry.cjs +234 -214
- package/dist/cjs/generated/docs.entry.cjs.map +1 -1
- package/dist/cjs/generated/frequentQuestions.entry.cjs +17 -17
- package/dist/cjs/generated/frequentQuestions.entry.cjs.map +1 -1
- package/dist/cjs/generated/legal.entry.cjs +2 -2
- package/dist/cjs/generated/legal.entry.cjs.map +1 -1
- package/dist/esm/generated/blog.entry.mjs +27 -27
- package/dist/esm/generated/blog.entry.mjs.map +1 -1
- package/dist/esm/generated/docs.entry.mjs +234 -214
- package/dist/esm/generated/docs.entry.mjs.map +1 -1
- package/dist/esm/generated/frequentQuestions.entry.mjs +17 -17
- package/dist/esm/generated/frequentQuestions.entry.mjs.map +1 -1
- package/dist/esm/generated/legal.entry.mjs +2 -2
- package/dist/esm/generated/legal.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/analytics.md +222 -0
- package/docs/ar/autoFill.md +28 -9
- package/docs/ar/configuration.md +25 -8
- package/docs/ar/dictionary/file.md +3 -1
- package/docs/ar/dictionary/nesting.md +47 -30
- package/docs/ar/formatters.md +148 -193
- package/docs/ar/intlayer_CMS.md +152 -0
- package/docs/ar/intlayer_with_angular_21.md +9 -9
- package/docs/ar/intlayer_with_nextjs_14.md +1 -28
- package/docs/ar/intlayer_with_nextjs_15.md +1 -33
- package/docs/ar/intlayer_with_react_router_v7_fs_routes.md +40 -83
- package/docs/ar/intlayer_with_solid_start.md +1078 -0
- package/docs/ar/intlayer_with_vite+vue.md +1 -3
- package/docs/ar/packages/intlayer/getLocalizedUrl.md +26 -24
- package/docs/ar/packages/intlayer/getMultilingualUrls.md +4 -18
- package/docs/ar/packages/react-intlayer/useDictionary.md +4 -21
- package/docs/ar/packages/react-intlayer/useIntlayer.md +2 -2
- package/docs/ar/packages/vite-intlayer/exports.md +15 -0
- package/docs/ar/packages/vite-intlayer/intlayer.md +121 -6
- package/docs/ar/packages/vite-intlayer/intlayerPrune.md +70 -3
- package/docs/ar/releases/v9.md +0 -37
- package/docs/ar/self_hosting.md +46 -49
- package/docs/bn/configuration.md +25 -8
- package/docs/bn/intlayer_with_angular_21.md +9 -9
- package/docs/cs/configuration.md +25 -8
- package/docs/cs/intlayer_with_angular_21.md +9 -9
- package/docs/de/analytics.md +222 -0
- package/docs/de/autoFill.md +28 -9
- package/docs/de/configuration.md +25 -8
- package/docs/de/dictionary/file.md +3 -1
- package/docs/de/dictionary/nesting.md +47 -31
- package/docs/de/formatters.md +208 -334
- package/docs/de/intlayer_CMS.md +66 -15
- package/docs/de/intlayer_with_angular_21.md +9 -9
- package/docs/de/intlayer_with_nestjs.md +11 -7
- package/docs/de/intlayer_with_nextjs_14.md +1 -28
- package/docs/de/intlayer_with_nextjs_15.md +1 -33
- package/docs/de/intlayer_with_solid_start.md +1078 -0
- package/docs/de/intlayer_with_vite+vue.md +1 -3
- package/docs/de/packages/intlayer/getLocalizedUrl.md +33 -25
- package/docs/de/packages/intlayer/getMultilingualUrls.md +4 -18
- package/docs/de/packages/react-intlayer/useDictionary.md +2 -5
- package/docs/de/packages/vite-intlayer/exports.md +15 -0
- package/docs/de/packages/vite-intlayer/intlayer.md +121 -6
- package/docs/de/packages/vite-intlayer/intlayerPrune.md +77 -4
- package/docs/de/releases/v9.md +0 -15
- package/docs/de/self_hosting.md +46 -50
- package/docs/en/cli/doc-review.md +13 -2
- package/docs/en/configuration.md +24 -15
- package/docs/en/intlayer_with_angular_21.md +9 -9
- package/docs/en/intlayer_with_solid_start.md +1091 -0
- package/docs/en/intlayer_with_vite+solid.md +12 -0
- package/docs/en-GB/analytics.md +222 -0
- package/docs/en-GB/autoFill.md +26 -7
- package/docs/en-GB/configuration.md +25 -8
- package/docs/en-GB/dictionary/file.md +2 -0
- package/docs/en-GB/dictionary/nesting.md +64 -205
- package/docs/en-GB/formatters.md +146 -181
- package/docs/en-GB/intlayer_CMS.md +152 -0
- package/docs/en-GB/intlayer_with_angular_21.md +9 -9
- package/docs/en-GB/intlayer_with_nestjs.md +6 -2
- package/docs/en-GB/intlayer_with_nextjs_14.md +0 -27
- package/docs/en-GB/intlayer_with_nextjs_15.md +1 -33
- package/docs/en-GB/intlayer_with_react_router_v7_fs_routes.md +40 -82
- package/docs/en-GB/intlayer_with_solid_start.md +1078 -0
- package/docs/en-GB/intlayer_with_vite+vue.md +1 -3
- package/docs/en-GB/packages/intlayer/getLocalizedUrl.md +30 -22
- package/docs/en-GB/packages/intlayer/getMultilingualUrls.md +16 -48
- package/docs/en-GB/packages/vite-intlayer/exports.md +15 -0
- package/docs/en-GB/packages/vite-intlayer/intlayer.md +121 -6
- package/docs/en-GB/packages/vite-intlayer/intlayerPrune.md +77 -4
- package/docs/en-GB/self_hosting.md +60 -49
- package/docs/es/analytics.md +222 -0
- package/docs/es/autoFill.md +28 -9
- package/docs/es/configuration.md +24 -7
- package/docs/es/dictionary/file.md +3 -1
- package/docs/es/dictionary/nesting.md +47 -30
- package/docs/es/formatters.md +114 -168
- package/docs/es/intlayer_CMS.md +35 -10
- package/docs/es/intlayer_with_angular_21.md +9 -9
- package/docs/es/intlayer_with_nextjs_14.md +1 -28
- package/docs/es/intlayer_with_nextjs_15.md +1 -33
- package/docs/es/intlayer_with_solid_start.md +1078 -0
- package/docs/es/packages/intlayer/getLocalizedUrl.md +31 -23
- package/docs/es/packages/intlayer/getMultilingualUrls.md +4 -18
- package/docs/es/packages/vite-intlayer/exports.md +15 -0
- package/docs/es/packages/vite-intlayer/intlayer.md +121 -6
- package/docs/es/packages/vite-intlayer/intlayerPrune.md +69 -2
- package/docs/es/releases/v9.md +0 -15
- package/docs/es/self_hosting.md +46 -49
- package/docs/fr/analytics.md +222 -0
- package/docs/fr/autoFill.md +27 -8
- package/docs/fr/configuration.md +25 -8
- package/docs/fr/dictionary/file.md +2 -0
- package/docs/fr/dictionary/nesting.md +37 -184
- package/docs/fr/formatters.md +95 -236
- package/docs/fr/intlayer_CMS.md +66 -15
- package/docs/fr/intlayer_with_angular_21.md +9 -9
- package/docs/fr/intlayer_with_nextjs_14.md +1 -28
- package/docs/fr/intlayer_with_nextjs_15.md +1 -33
- package/docs/fr/intlayer_with_solid_start.md +1078 -0
- package/docs/fr/packages/intlayer/getLocalizedUrl.md +37 -27
- package/docs/fr/packages/intlayer/getMultilingualUrls.md +18 -20
- package/docs/fr/packages/vite-intlayer/exports.md +15 -0
- package/docs/fr/packages/vite-intlayer/intlayer.md +121 -6
- package/docs/fr/packages/vite-intlayer/intlayerPrune.md +77 -4
- package/docs/fr/releases/v9.md +0 -15
- package/docs/fr/self_hosting.md +46 -49
- package/docs/hi/analytics.md +222 -0
- package/docs/hi/autoFill.md +28 -9
- package/docs/hi/configuration.md +25 -8
- package/docs/hi/dictionary/file.md +3 -1
- package/docs/hi/dictionary/nesting.md +47 -30
- package/docs/hi/formatters.md +233 -334
- package/docs/hi/how_works_intlayer.md +3 -1
- package/docs/hi/intlayer_CMS.md +152 -0
- package/docs/hi/intlayer_with_angular_21.md +9 -9
- package/docs/hi/intlayer_with_nestjs.md +11 -7
- package/docs/hi/intlayer_with_nextjs_14.md +1 -28
- package/docs/hi/intlayer_with_nextjs_15.md +1 -33
- package/docs/hi/intlayer_with_react_router_v7_fs_routes.md +40 -83
- package/docs/hi/intlayer_with_solid_start.md +1077 -0
- package/docs/hi/intlayer_with_vite+preact.md +56 -49
- package/docs/hi/intlayer_with_vite+react.md +48 -41
- package/docs/hi/intlayer_with_vite+solid.md +32 -41
- package/docs/hi/intlayer_with_vite+vue.md +49 -44
- package/docs/hi/packages/intlayer/getLocalizedUrl.md +26 -24
- package/docs/hi/packages/intlayer/getMultilingualUrls.md +4 -18
- package/docs/hi/packages/next-intlayer/t.md +33 -1
- package/docs/hi/packages/react-intlayer/useDictionary.md +4 -21
- package/docs/hi/packages/vite-intlayer/exports.md +15 -0
- package/docs/hi/packages/vite-intlayer/intlayer.md +121 -6
- package/docs/hi/packages/vite-intlayer/intlayerPrune.md +78 -5
- package/docs/hi/plugins/sync-json.md +9 -9
- package/docs/hi/releases/v9.md +0 -15
- package/docs/hi/self_hosting.md +38 -51
- package/docs/id/analytics.md +223 -0
- package/docs/id/configuration.md +25 -8
- package/docs/id/dictionary/nesting.md +37 -184
- package/docs/id/formatters.md +208 -305
- package/docs/id/intlayer_CMS.md +164 -0
- package/docs/id/intlayer_with_angular_21.md +9 -9
- package/docs/id/intlayer_with_nextjs_14.md +1 -26
- package/docs/id/intlayer_with_react_router_v7_fs_routes.md +70 -63
- package/docs/id/intlayer_with_solid_start.md +1078 -0
- package/docs/id/packages/intlayer/getMultilingualUrls.md +4 -18
- package/docs/id/packages/react-intlayer/useIntlayer.md +2 -2
- package/docs/id/packages/vite-intlayer/exports.md +15 -0
- package/docs/id/packages/vite-intlayer/intlayer.md +121 -6
- package/docs/id/packages/vite-intlayer/intlayerPrune.md +78 -5
- package/docs/id/releases/v9.md +12 -0
- package/docs/id/self_hosting.md +61 -50
- package/docs/it/analytics.md +222 -0
- package/docs/it/autoFill.md +27 -8
- package/docs/it/configuration.md +25 -8
- package/docs/it/dictionary/file.md +3 -1
- package/docs/it/dictionary/nesting.md +47 -30
- package/docs/it/formatters.md +114 -168
- package/docs/it/intlayer_CMS.md +66 -15
- package/docs/it/intlayer_with_angular_21.md +9 -9
- package/docs/it/intlayer_with_nestjs.md +11 -7
- package/docs/it/intlayer_with_nextjs_14.md +1 -28
- package/docs/it/intlayer_with_nextjs_15.md +1 -33
- package/docs/it/intlayer_with_solid_start.md +1078 -0
- package/docs/it/intlayer_with_vite+vue.md +1 -3
- package/docs/it/packages/intlayer/getLocalizedUrl.md +34 -26
- package/docs/it/packages/intlayer/getMultilingualUrls.md +4 -18
- package/docs/it/packages/react-intlayer/useDictionary.md +4 -21
- package/docs/it/packages/vite-intlayer/exports.md +15 -0
- package/docs/it/packages/vite-intlayer/intlayer.md +121 -6
- package/docs/it/packages/vite-intlayer/intlayerPrune.md +77 -4
- package/docs/it/releases/v9.md +0 -15
- package/docs/it/self_hosting.md +60 -49
- package/docs/ja/analytics.md +222 -0
- package/docs/ja/autoFill.md +28 -9
- package/docs/ja/configuration.md +25 -8
- package/docs/ja/dictionary/content_file.md +15 -7
- package/docs/ja/dictionary/file.md +3 -1
- package/docs/ja/dictionary/nesting.md +47 -30
- package/docs/ja/formatters.md +133 -187
- package/docs/ja/intlayer_visual_editor.md +3 -1
- package/docs/ja/intlayer_with_angular_21.md +6 -6
- package/docs/ja/intlayer_with_nestjs.md +2 -12
- package/docs/ja/intlayer_with_nextjs_14.md +1 -28
- package/docs/ja/intlayer_with_nextjs_15.md +1 -33
- package/docs/ja/intlayer_with_react_router_v7.md +456 -20
- package/docs/ja/intlayer_with_solid_start.md +1078 -0
- package/docs/ja/intlayer_with_vite+preact.md +73 -41
- package/docs/ja/intlayer_with_vite+vue.md +1 -3
- package/docs/ja/mcp_server.md +3 -9
- package/docs/ja/packages/intlayer/getLocalizedUrl.md +26 -24
- package/docs/ja/packages/intlayer/getMultilingualUrls.md +3 -17
- package/docs/ja/packages/vite-intlayer/exports.md +15 -0
- package/docs/ja/packages/vite-intlayer/intlayer.md +121 -6
- package/docs/ja/packages/vite-intlayer/intlayerPrune.md +79 -6
- package/docs/ja/releases/v9.md +12 -0
- package/docs/ja/self_hosting.md +46 -50
- package/docs/ko/analytics.md +222 -0
- package/docs/ko/autoFill.md +28 -9
- package/docs/ko/configuration.md +25 -8
- package/docs/ko/dictionary/file.md +3 -1
- package/docs/ko/dictionary/nesting.md +47 -30
- package/docs/ko/formatters.md +133 -187
- package/docs/ko/intlayer_with_angular_21.md +9 -9
- package/docs/ko/intlayer_with_lynx+react.md +133 -39
- package/docs/ko/intlayer_with_nextjs_14.md +1 -28
- package/docs/ko/intlayer_with_nextjs_15.md +1 -33
- package/docs/ko/intlayer_with_react_router_v7_fs_routes.md +40 -188
- package/docs/ko/intlayer_with_solid_start.md +1078 -0
- package/docs/ko/intlayer_with_vite+preact.md +57 -23
- package/docs/ko/intlayer_with_vite+vue.md +1 -3
- package/docs/ko/packages/intlayer/getLocalizedUrl.md +26 -24
- package/docs/ko/packages/intlayer/getMultilingualUrls.md +4 -18
- package/docs/ko/packages/vite-intlayer/exports.md +15 -0
- package/docs/ko/packages/vite-intlayer/intlayer.md +121 -6
- package/docs/ko/packages/vite-intlayer/intlayerPrune.md +79 -6
- package/docs/ko/releases/v9.md +12 -0
- package/docs/ko/self_hosting.md +60 -49
- package/docs/nl/configuration.md +25 -8
- package/docs/nl/intlayer_with_angular_21.md +9 -9
- package/docs/pl/analytics.md +220 -0
- package/docs/pl/configuration.md +25 -8
- package/docs/pl/dictionary/nesting.md +47 -30
- package/docs/pl/formatters.md +208 -305
- package/docs/pl/intlayer_CMS.md +152 -0
- package/docs/pl/intlayer_with_angular_21.md +9 -9
- package/docs/pl/intlayer_with_nextjs_14.md +1 -26
- package/docs/pl/intlayer_with_solid_start.md +1078 -0
- package/docs/pl/packages/intlayer/getMultilingualUrls.md +4 -18
- package/docs/pl/packages/react-intlayer/useDictionary.md +2 -19
- package/docs/pl/packages/vite-intlayer/exports.md +15 -0
- package/docs/pl/packages/vite-intlayer/intlayer.md +121 -6
- package/docs/pl/packages/vite-intlayer/intlayerPrune.md +77 -4
- package/docs/pl/releases/v9.md +0 -15
- package/docs/pl/self_hosting.md +60 -49
- package/docs/pt/analytics.md +222 -0
- package/docs/pt/configuration.md +25 -8
- package/docs/pt/dictionary/file.md +3 -1
- package/docs/pt/dictionary/nesting.md +47 -30
- package/docs/pt/formatters.md +112 -168
- package/docs/pt/intlayer_CMS.md +66 -15
- package/docs/pt/intlayer_with_angular_21.md +9 -9
- package/docs/pt/intlayer_with_astro_lit.md +26 -1
- package/docs/pt/intlayer_with_nextjs_14.md +1 -28
- package/docs/pt/intlayer_with_nextjs_15.md +1 -33
- package/docs/pt/intlayer_with_solid_start.md +1078 -0
- package/docs/pt/intlayer_with_vite+vue.md +1 -3
- package/docs/pt/packages/intlayer/getLocalizedUrl.md +34 -26
- package/docs/pt/packages/intlayer/getMultilingualUrls.md +4 -18
- package/docs/pt/packages/vite-intlayer/exports.md +15 -0
- package/docs/pt/packages/vite-intlayer/intlayer.md +121 -6
- package/docs/pt/packages/vite-intlayer/intlayerPrune.md +78 -6
- package/docs/pt/releases/v9.md +0 -15
- package/docs/pt/self_hosting.md +60 -49
- package/docs/ru/analytics.md +222 -0
- package/docs/ru/autoFill.md +27 -8
- package/docs/ru/configuration.md +25 -8
- package/docs/ru/dictionary/file.md +3 -1
- package/docs/ru/dictionary/nesting.md +64 -205
- package/docs/ru/formatters.md +108 -128
- package/docs/ru/intlayer_with_angular_21.md +9 -9
- package/docs/ru/intlayer_with_nextjs_14.md +1 -28
- package/docs/ru/intlayer_with_nextjs_15.md +1 -33
- package/docs/ru/intlayer_with_solid_start.md +1078 -0
- package/docs/ru/intlayer_with_vite+vue.md +1 -3
- package/docs/ru/packages/intlayer/getLocalizedUrl.md +34 -26
- package/docs/ru/packages/intlayer/getMultilingualUrls.md +4 -18
- package/docs/ru/packages/react-intlayer/useDictionary.md +4 -21
- package/docs/ru/packages/vite-intlayer/exports.md +15 -0
- package/docs/ru/packages/vite-intlayer/intlayer.md +121 -6
- package/docs/ru/packages/vite-intlayer/intlayerPrune.md +77 -4
- package/docs/ru/releases/v9.md +0 -15
- package/docs/ru/self_hosting.md +60 -49
- package/docs/tr/analytics.md +222 -0
- package/docs/tr/autoFill.md +28 -9
- package/docs/tr/configuration.md +25 -8
- package/docs/tr/dictionary/file.md +2 -0
- package/docs/tr/dictionary/nesting.md +47 -30
- package/docs/tr/formatters.md +144 -190
- package/docs/tr/intlayer_CMS.md +152 -0
- package/docs/tr/intlayer_with_angular_21.md +9 -9
- package/docs/tr/intlayer_with_nestjs.md +2 -12
- package/docs/tr/intlayer_with_nextjs_15.md +1 -33
- package/docs/tr/intlayer_with_solid_start.md +1078 -0
- package/docs/tr/intlayer_with_vite+vue.md +1 -3
- package/docs/tr/packages/intlayer/getMultilingualUrls.md +4 -18
- package/docs/tr/packages/vite-intlayer/exports.md +15 -0
- package/docs/tr/packages/vite-intlayer/intlayer.md +121 -6
- package/docs/tr/packages/vite-intlayer/intlayerPrune.md +77 -4
- package/docs/tr/self_hosting.md +47 -50
- package/docs/uk/analytics.md +222 -0
- package/docs/uk/configuration.md +25 -8
- package/docs/uk/dictionary/nesting.md +47 -30
- package/docs/uk/formatters.md +128 -185
- package/docs/uk/intlayer_CMS.md +152 -0
- package/docs/uk/intlayer_with_angular_21.md +9 -9
- package/docs/uk/intlayer_with_nextjs_14.md +1 -26
- package/docs/uk/intlayer_with_solid_start.md +1078 -0
- package/docs/uk/packages/react-intlayer/useDictionary.md +2 -19
- package/docs/uk/packages/vite-intlayer/exports.md +15 -0
- package/docs/uk/packages/vite-intlayer/intlayer.md +121 -6
- package/docs/uk/packages/vite-intlayer/intlayerPrune.md +77 -4
- package/docs/uk/releases/v9.md +0 -15
- package/docs/uk/self_hosting.md +60 -50
- package/docs/ur/configuration.md +25 -8
- package/docs/ur/intlayer_with_angular_21.md +9 -9
- package/docs/vi/analytics.md +222 -0
- package/docs/vi/configuration.md +24 -8
- package/docs/vi/dictionary/nesting.md +37 -184
- package/docs/vi/formatters.md +208 -309
- package/docs/vi/intlayer_CMS.md +164 -0
- package/docs/vi/intlayer_with_angular_21.md +9 -9
- package/docs/vi/intlayer_with_nextjs_14.md +0 -25
- package/docs/vi/intlayer_with_react_router_v7_fs_routes.md +70 -63
- package/docs/vi/intlayer_with_solid_start.md +1078 -0
- package/docs/vi/packages/intlayer/getMultilingualUrls.md +4 -18
- package/docs/vi/packages/react-intlayer/useIntlayer.md +2 -2
- package/docs/vi/packages/vite-intlayer/exports.md +15 -0
- package/docs/vi/packages/vite-intlayer/intlayer.md +121 -6
- package/docs/vi/packages/vite-intlayer/intlayerPrune.md +77 -4
- package/docs/vi/plugins/sync-json.md +6 -6
- package/docs/vi/releases/v9.md +12 -0
- package/docs/vi/self_hosting.md +61 -50
- package/docs/zh/CI_CD.md +4 -0
- package/docs/zh/analytics.md +222 -0
- package/docs/zh/autoFill.md +28 -9
- package/docs/zh/configuration.md +24 -8
- package/docs/zh/dictionary/file.md +2 -0
- package/docs/zh/dictionary/nesting.md +47 -30
- package/docs/zh/formatters.md +140 -188
- package/docs/zh/intlayer_CMS.md +164 -0
- package/docs/zh/intlayer_with_analog.md +193 -3
- package/docs/zh/intlayer_with_angular_19.md +272 -3
- package/docs/zh/intlayer_with_angular_21.md +7 -7
- package/docs/zh/intlayer_with_create_react_app.md +348 -26
- package/docs/zh/intlayer_with_lynx+react.md +263 -4
- package/docs/zh/intlayer_with_nextjs_14.md +1 -28
- package/docs/zh/intlayer_with_nextjs_15.md +1 -33
- package/docs/zh/intlayer_with_nextjs_no_locale_path.md +558 -1
- package/docs/zh/intlayer_with_nuxt.md +182 -7
- package/docs/zh/intlayer_with_react_router_v7.md +183 -25
- package/docs/zh/intlayer_with_react_router_v7_fs_routes.md +306 -42
- package/docs/zh/intlayer_with_solid_start.md +1077 -0
- package/docs/zh/intlayer_with_storybook.md +260 -3
- package/docs/zh/intlayer_with_svelte_kit.md +428 -48
- package/docs/zh/intlayer_with_tanstack+solid.md +713 -13
- package/docs/zh/intlayer_with_tanstack.md +731 -20
- package/docs/zh/intlayer_with_vanilla.md +314 -4
- package/docs/zh/intlayer_with_vite+lit.md +465 -4
- package/docs/zh/intlayer_with_vite+preact.md +422 -116
- package/docs/zh/intlayer_with_vite+react.md +324 -45
- package/docs/zh/intlayer_with_vite+react_compiler.md +228 -13
- package/docs/zh/intlayer_with_vite+solid.md +462 -32
- package/docs/zh/intlayer_with_vite+vanilla.md +497 -4
- package/docs/zh/mcp_server.md +3 -9
- package/docs/zh/packages/intlayer/getLocalizedUrl.md +26 -24
- package/docs/zh/packages/intlayer/getMultilingualUrls.md +4 -18
- package/docs/zh/packages/vite-intlayer/exports.md +29 -0
- package/docs/zh/packages/vite-intlayer/intlayer.md +121 -6
- package/docs/zh/packages/vite-intlayer/intlayerPrune.md +79 -6
- package/docs/zh/releases/v9.md +12 -0
- package/docs/zh/self_hosting.md +60 -50
- package/docs/zh-TW/intlayer_with_angular_21.md +7 -7
- package/package.json +6 -6
- package/src/generated/blog.entry.ts +27 -27
- package/src/generated/docs.entry.ts +234 -214
- package/src/generated/frequentQuestions.entry.ts +17 -17
- package/src/generated/legal.entry.ts +2 -2
|
@@ -0,0 +1,1078 @@
|
|
|
1
|
+
---
|
|
2
|
+
createdAt: 2025-08-06
|
|
3
|
+
updatedAt: 2026-08-06
|
|
4
|
+
title: "Solid Start i18n - Guida completa per tradurre la tua applicazione"
|
|
5
|
+
description: "Niente più i18next. La guida 2026 per creare un'applicazione SolidStart multilingue (i18n). Routing delle impostazioni locali renderizzato lato server, hreflang, sitemap e traduzione assistita da IA."
|
|
6
|
+
keywords:
|
|
7
|
+
- Internationalization
|
|
8
|
+
- Documentation
|
|
9
|
+
- Intlayer
|
|
10
|
+
- SolidStart
|
|
11
|
+
- Solid
|
|
12
|
+
- i18n
|
|
13
|
+
- TypeScript
|
|
14
|
+
- Locale Routing
|
|
15
|
+
- Sitemap
|
|
16
|
+
slugs:
|
|
17
|
+
- doc
|
|
18
|
+
- environment
|
|
19
|
+
- solid-start
|
|
20
|
+
applicationTemplate: https://github.com/aymericzip/intlayer-solid-start-template
|
|
21
|
+
history:
|
|
22
|
+
- version: 9.1.3
|
|
23
|
+
date: 2025-08-06
|
|
24
|
+
changes: "Storia iniziale"
|
|
25
|
+
author: aymericzip
|
|
26
|
+
---
|
|
27
|
+
|
|
28
|
+
# Traduci il tuo sito web SolidStart usando Intlayer | Internazionalizzazione (i18n)
|
|
29
|
+
|
|
30
|
+
<Tabs defaultTab="video">
|
|
31
|
+
<Tab label="Video" value="video">
|
|
32
|
+
|
|
33
|
+
<iframe title="La migliore soluzione i18n per Vite e Solid? Scopri Intlayer" class="m-auto aspect-16/9 w-full overflow-hidden rounded-lg border-0" allow="autoplay; gyroscope;" loading="lazy" width="1080" height="auto" src="https://www.youtube.com/embed/dS9L7uJeak4?si=VaKmrYMmXjo3xpk2"/>
|
|
34
|
+
|
|
35
|
+
</Tab>
|
|
36
|
+
<Tab label="Codice" value="code">
|
|
37
|
+
|
|
38
|
+
<iframe
|
|
39
|
+
src="https://ide.intlayer.org/aymericzip/intlayer-solid-start-template?file=intlayer.config.ts"
|
|
40
|
+
className="m-auto overflow-hidden rounded-lg border-0 max-md:size-full max-md:h-[700px] md:aspect-16/9 md:w-full"
|
|
41
|
+
title="Demo CodeSandbox - Come internazionalizzare la tua applicazione usando Intlayer"
|
|
42
|
+
sandbox="allow-forms allow-modals allow-popups allow-presentation allow-same-origin allow-scripts"
|
|
43
|
+
loading="lazy"
|
|
44
|
+
/>
|
|
45
|
+
|
|
46
|
+
</Tab>
|
|
47
|
+
</Tabs>
|
|
48
|
+
|
|
49
|
+
## Indice
|
|
50
|
+
|
|
51
|
+
<TOC/>
|
|
52
|
+
|
|
53
|
+
Questa guida copre un'applicazione SolidStart **renderizzata lato server**: il rilevamento della locale avviene sulla richiesta, le pagine vengono renderizzate sul server nella lingua corretta e i segnali `<html lang>`, `hreflang` e sitemap di cui i motori di ricerca hanno bisogno vengono emessi lato server.
|
|
54
|
+
|
|
55
|
+
## Perché Intlayer rispetto alle alternative?
|
|
56
|
+
|
|
57
|
+
Rispetto alle principali soluzioni come `@solid-primitives/i18n` o `i18next`, Intlayer è una soluzione dotata di ottimizzazioni integrate come:
|
|
58
|
+
|
|
59
|
+
<AccordionGroup>
|
|
60
|
+
|
|
61
|
+
<Accordion header="Copertura completa di Solid">
|
|
62
|
+
|
|
63
|
+
Intlayer è ottimizzato per funzionare perfettamente con Solid offrendo **scoping del contenuto a livello di componente**, **traduzioni reattive** e tutte le funzionalità necessarie per scalare l'internazionalizzazione (i18n).
|
|
64
|
+
|
|
65
|
+
</Accordion>
|
|
66
|
+
|
|
67
|
+
<Accordion header="Dimensione del bundle">
|
|
68
|
+
|
|
69
|
+
Invece di caricare enormi file JSON nelle tue pagine, carica solo il contenuto necessario. Intlayer aiuta a **ridurre le dimensioni del tuo bundle e delle tue pagine fino al 50%**.
|
|
70
|
+
|
|
71
|
+
</Accordion>
|
|
72
|
+
|
|
73
|
+
<Accordion header="Manutenibilità">
|
|
74
|
+
|
|
75
|
+
Definire l'ambito del contenuto della tua applicazione **facilita la manutenzione** per le applicazioni su larga scala. Puoi duplicare o eliminare una singola cartella di funzionalità senza l'onere mentale di rivedere l'intera codebase del contenuto. Inoltre, Intlayer è **completamente tipizzato** per garantire la precisione del tuo contenuto.
|
|
76
|
+
|
|
77
|
+
</Accordion>
|
|
78
|
+
|
|
79
|
+
<Accordion header="Agente AI">
|
|
80
|
+
|
|
81
|
+
Collocare il contenuto **riduce il contesto necessario** per i modelli di linguaggio di grandi dimensioni (LLM). Intlayer è inoltre fornito con una suite di strumenti, come una **CLI** per verificare le traduzioni mancanti, **[LSP](https://github.com/aymericzip/intlayer/blob/main/docs/docs/it/lsp.md)**, **[MCP](https://github.com/aymericzip/intlayer/blob/main/docs/docs/it/mcp_server.md)** e **[competenze dell'agente](https://github.com/aymericzip/intlayer/blob/main/docs/docs/it/agent_skills.md)**, per rendere l'esperienza di sviluppo (DX) ancora più fluida per gli agenti AI.
|
|
82
|
+
|
|
83
|
+
</Accordion>
|
|
84
|
+
|
|
85
|
+
<Accordion header="Automazione">
|
|
86
|
+
|
|
87
|
+
Utilizza l'automazione per tradurre nella tua pipeline CI/CD utilizzando l'LLM di tua scelta al costo del tuo fornitore AI. Intlayer offre anche un **compilatore** per automatizzare l'estrazione del contenuto, oltre a una [piattaforma web](https://github.com/aymericzip/intlayer/blob/main/docs/docs/it/intlayer_CMS.md) per aiutare a **tradurre in background**.
|
|
88
|
+
|
|
89
|
+
</Accordion>
|
|
90
|
+
|
|
91
|
+
<Accordion header="Prestazioni">
|
|
92
|
+
|
|
93
|
+
Connettere enormi file JSON ai componenti può causare problemi di prestazioni e reattività. Intlayer ottimizza il caricamento del contenuto al momento della build.
|
|
94
|
+
|
|
95
|
+
</Accordion>
|
|
96
|
+
|
|
97
|
+
<Accordion header="Scalabilità con non sviluppatori">
|
|
98
|
+
|
|
99
|
+
Molto più di una semplice soluzione i18n, Intlayer fornisce un **[editor visuale](https://github.com/aymericzip/intlayer/blob/main/docs/docs/it/intlayer_visual_editor.md) self-hosted** e un **[CMS completo](https://github.com/aymericzip/intlayer/blob/main/docs/docs/it/intlayer_CMS.md)** per aiutarti a gestire il tuo contenuto multilingue in **tempo reale**, rendendo la collaborazione con traduttori, copywriter e altri membri del team semplice e fluida. Il contenuto può essere archiviato localmente e/o da remoto.
|
|
100
|
+
|
|
101
|
+
</Accordion>
|
|
102
|
+
</AccordionGroup>
|
|
103
|
+
|
|
104
|
+
---
|
|
105
|
+
|
|
106
|
+
## Guida passo dopo passo per configurare Intlayer in un'applicazione SolidStart
|
|
107
|
+
|
|
108
|
+
<Steps>
|
|
109
|
+
|
|
110
|
+
<Step number={1} title="Installa le dipendenze">
|
|
111
|
+
|
|
112
|
+
Installa i pacchetti necessari utilizzando npm:
|
|
113
|
+
|
|
114
|
+
```bash packageManager="npm"
|
|
115
|
+
npx intlayer init --interactive
|
|
116
|
+
```
|
|
117
|
+
|
|
118
|
+
```bash packageManager="pnpm"
|
|
119
|
+
pnpm dlx intlayer@canary init --interactive
|
|
120
|
+
```
|
|
121
|
+
|
|
122
|
+
```bash packageManager="yarn"
|
|
123
|
+
yarn dlx intlayer@canary init --interactive
|
|
124
|
+
```
|
|
125
|
+
|
|
126
|
+
```bash packageManager="bun"
|
|
127
|
+
bunx intlayer@canary init --interactive
|
|
128
|
+
```
|
|
129
|
+
|
|
130
|
+
> il flag `--interactive` è opzionale. Usa `intlayer-cli init` se sei un agente AI.
|
|
131
|
+
|
|
132
|
+
> Questo comando rileverà il tuo ambiente e installerà i pacchetti richiesti. Ad esempio:
|
|
133
|
+
|
|
134
|
+
```bash packageManager="npm"
|
|
135
|
+
npm install intlayer solid-intlayer vite-intlayer
|
|
136
|
+
```
|
|
137
|
+
|
|
138
|
+
```bash packageManager="pnpm"
|
|
139
|
+
pnpm add intlayer solid-intlayer vite-intlayer
|
|
140
|
+
```
|
|
141
|
+
|
|
142
|
+
```bash packageManager="yarn"
|
|
143
|
+
yarn add intlayer solid-intlayer vite-intlayer
|
|
144
|
+
```
|
|
145
|
+
|
|
146
|
+
```bash packageManager="bun"
|
|
147
|
+
bun add intlayer solid-intlayer vite-intlayer
|
|
148
|
+
```
|
|
149
|
+
|
|
150
|
+
- **intlayer**
|
|
151
|
+
|
|
152
|
+
Il pacchetto principale che fornisce strumenti di internazionalizzazione per la gestione della configurazione, traduzione, [dichiarazione del contenuto](https://github.com/aymericzip/intlayer/blob/main/docs/docs/it/dictionary/content_file.md), transpilazione e [comandi CLI](https://github.com/aymericzip/intlayer/blob/main/docs/docs/it/cli/index.md).
|
|
153
|
+
|
|
154
|
+
- **solid-intlayer**
|
|
155
|
+
|
|
156
|
+
Il pacchetto che integra Intlayer con l'applicazione Solid. Fornisce provider di contesto e hook per l'internazionalizzazione in Solid.
|
|
157
|
+
|
|
158
|
+
- **vite-intlayer**
|
|
159
|
+
|
|
160
|
+
Include il plugin Vite per integrare Intlayer con il [bundler Vite](https://vite.dev/guide/why.html#why-bundle-for-production), oltre al gestore di routing delle impostazioni locali che rileva la locale preferita dall'utente, gestisce i cookie e gestisce il reindirizzamento degli URL.
|
|
161
|
+
|
|
162
|
+
> `vite-intlayer` è una questione lato server in questo contesto, non solo di build time: fornisce il gestore di richieste eseguito dal server Nitro di SolidStart. Mantenerlo in `dependencies` è l'opzione predefinita sicura — puoi spostarlo in `devDependencies` solo se distribuisci la cartella `.output` creata, nella quale Nitro include direttamente il gestore.
|
|
163
|
+
|
|
164
|
+
</Step>
|
|
165
|
+
|
|
166
|
+
<Step number={2} title="Configurazione del tuo progetto">
|
|
167
|
+
|
|
168
|
+
Crea un file di configurazione per configurare le lingue della tua applicazione:
|
|
169
|
+
|
|
170
|
+
```typescript fileName="intlayer.config.ts" codeFormat={["typescript", "esm", "commonjs"]}
|
|
171
|
+
import { type IntlayerConfig, Locales } from "intlayer";
|
|
172
|
+
|
|
173
|
+
const config: IntlayerConfig = {
|
|
174
|
+
internationalization: {
|
|
175
|
+
locales: [
|
|
176
|
+
Locales.ENGLISH,
|
|
177
|
+
Locales.FRENCH,
|
|
178
|
+
Locales.SPANISH,
|
|
179
|
+
// Le tue altre impostazioni locali
|
|
180
|
+
],
|
|
181
|
+
defaultLocale: Locales.ENGLISH,
|
|
182
|
+
},
|
|
183
|
+
routing: {
|
|
184
|
+
mode: "prefix-no-default",
|
|
185
|
+
},
|
|
186
|
+
};
|
|
187
|
+
|
|
188
|
+
export default config;
|
|
189
|
+
```
|
|
190
|
+
|
|
191
|
+
Con `prefix-no-default`, la locale predefinita viene servita da URL senza prefisso:
|
|
192
|
+
|
|
193
|
+
```plaintext
|
|
194
|
+
/ /about → Inglese (locale predefinita)
|
|
195
|
+
/fr /fr/about → Francese
|
|
196
|
+
/es /es/about → Spagnolo
|
|
197
|
+
```
|
|
198
|
+
|
|
199
|
+
> Attraverso questo file di configurazione, puoi impostare URL localizzati, reindirizzamenti middleware, nomi di cookie, la posizione e l'estensione delle tue dichiarazioni di contenuto, disabilitare i log di Intlayer nella console e altro ancora. Per un elenco completo dei parametri disponibili, fai riferimento alla [documentazione sulla configurazione](https://github.com/aymericzip/intlayer/blob/main/docs/docs/it/configuration.md).
|
|
200
|
+
|
|
201
|
+
</Step>
|
|
202
|
+
|
|
203
|
+
<Step number={3} title="Integra Intlayer nella tua configurazione Vite">
|
|
204
|
+
|
|
205
|
+
Aggiungi il plugin Intlayer alla tua configurazione:
|
|
206
|
+
|
|
207
|
+
```typescript fileName="vite.config.ts" codeFormat={["typescript", "esm", "commonjs"]}
|
|
208
|
+
import { solidStart } from "@solidjs/start/config";
|
|
209
|
+
import { nitro } from "nitro/vite";
|
|
210
|
+
import { defineConfig } from "vite";
|
|
211
|
+
import { intlayer } from "vite-intlayer";
|
|
212
|
+
|
|
213
|
+
export default defineConfig({
|
|
214
|
+
plugins: [solidStart(), nitro(), intlayer()],
|
|
215
|
+
});
|
|
216
|
+
```
|
|
217
|
+
|
|
218
|
+
> Il plugin Vite `intlayer()` crea i tuoi file di dichiarazione del contenuto, li osserva in modalità di sviluppo e definisce le variabili di ambiente Intlayer all'interno dell'applicazione. Fornisce inoltre alias che ottimizzano le prestazioni.
|
|
219
|
+
|
|
220
|
+
### Il routing delle impostazioni locali viene fornito con il plugin
|
|
221
|
+
|
|
222
|
+
SolidStart viene eseguito su [Nitro](https://nitro.build), e `intlayer()` registra il suo gestore di routing delle impostazioni locali direttamente nella pipeline del server Nitro (tramite l'opzione `routing.enableProxy`, `true` di default). Nient'altro da collegare: su un server compilato, ogni richiesta viene ispezionata prima che raggiunga il router, e
|
|
223
|
+
|
|
224
|
+
- la locale viene letta dal prefisso URL, quindi dal cookie `INTLAYER_LOCALE`, quindi dall'intestazione `Accept-Language`;
|
|
225
|
+
- un URL senza prefisso viene reindirizzato alla sua controparte localizzata quando la locale risolta non è quella predefinita (`/` → `/fr`);
|
|
226
|
+
- un URL con prefisso ridondante viene reindirizzato alla sua forma canonica (`/en/about` → `/about`);
|
|
227
|
+
- il cookie della locale viene riscritto nella risposta.
|
|
228
|
+
|
|
229
|
+
</Step>
|
|
230
|
+
|
|
231
|
+
<Step number={4} title="Dichiara il tuo contenuto">
|
|
232
|
+
|
|
233
|
+
Crea e gestisci le tue dichiarazioni di contenuto per archiviare le traduzioni:
|
|
234
|
+
|
|
235
|
+
```tsx fileName="src/contents/home.content.ts" contentDeclarationFormat={["typescript", "esm", "commonjs"]}
|
|
236
|
+
import { type Dictionary, t } from "intlayer";
|
|
237
|
+
|
|
238
|
+
const homeContent = {
|
|
239
|
+
key: "home-page",
|
|
240
|
+
content: {
|
|
241
|
+
title: t({
|
|
242
|
+
en: "Hello world!",
|
|
243
|
+
fr: "Bonjour le monde !",
|
|
244
|
+
es: "¡Hola mundo!",
|
|
245
|
+
}),
|
|
246
|
+
metaTitle: "SolidStart + Intlayer",
|
|
247
|
+
metaDescription: t({
|
|
248
|
+
en: "A SolidStart application internationalized with Intlayer.",
|
|
249
|
+
fr: "Une application SolidStart internationalisée avec Intlayer.",
|
|
250
|
+
es: "Una aplicación SolidStart internacionalizada con Intlayer.",
|
|
251
|
+
}),
|
|
252
|
+
documentation: t({
|
|
253
|
+
en: "Visit start.solidjs.com to learn how to build SolidStart apps.",
|
|
254
|
+
fr: "Visitez start.solidjs.com pour apprendre à créer des applications SolidStart.",
|
|
255
|
+
es: "Visita start.solidjs.com para aprender a crear aplicaciones SolidStart.",
|
|
256
|
+
}),
|
|
257
|
+
},
|
|
258
|
+
} satisfies Dictionary;
|
|
259
|
+
|
|
260
|
+
export default homeContent;
|
|
261
|
+
```
|
|
262
|
+
|
|
263
|
+
```json fileName="src/contents/home.content.json" contentDeclarationFormat="json"
|
|
264
|
+
{
|
|
265
|
+
"$schema": "https://intlayer.org/schema.json",
|
|
266
|
+
"key": "home-page",
|
|
267
|
+
"content": {
|
|
268
|
+
"title": {
|
|
269
|
+
"nodeType": "translation",
|
|
270
|
+
"translation": {
|
|
271
|
+
"en": "Hello world!",
|
|
272
|
+
"fr": "Bonjour le monde !",
|
|
273
|
+
"es": "¡Hola mundo!"
|
|
274
|
+
}
|
|
275
|
+
},
|
|
276
|
+
"metaTitle": "SolidStart + Intlayer",
|
|
277
|
+
"metaDescription": {
|
|
278
|
+
"nodeType": "translation",
|
|
279
|
+
"translation": {
|
|
280
|
+
"en": "A SolidStart application internationalized with Intlayer.",
|
|
281
|
+
"fr": "Une application SolidStart internationalisée avec Intlayer.",
|
|
282
|
+
"es": "Una aplicación SolidStart internacionalizada con Intlayer."
|
|
283
|
+
}
|
|
284
|
+
},
|
|
285
|
+
"documentation": {
|
|
286
|
+
"nodeType": "translation",
|
|
287
|
+
"translation": {
|
|
288
|
+
"en": "Visit start.solidjs.com to learn how to build SolidStart apps.",
|
|
289
|
+
"fr": "Visitez start.solidjs.com pour apprendre à créer des applications SolidStart.",
|
|
290
|
+
"es": "Visita start.solidjs.com para aprender a crear aplicaciones SolidStart."
|
|
291
|
+
}
|
|
292
|
+
}
|
|
293
|
+
}
|
|
294
|
+
}
|
|
295
|
+
```
|
|
296
|
+
|
|
297
|
+
> ⚠️ **Particolarità di SolidStart**: ogni file `.ts` / `.tsx` sotto `src/routes` diventa una rotta, e un file `.content.ts` ha un'esportazione predefinita, quindi verrebbe interpretato come una pagina. Mantieni le dichiarazioni di contenuto delle tue **pagine** all'esterno della cartella delle rotte (`src/contents/` funziona benissimo). Il contenuto dei **componenti** può rimanere co-localizzato, poiché `src/components` non viene scansionato dal router del file system.
|
|
298
|
+
|
|
299
|
+
> Le tue dichiarazioni di contenuto possono essere definite ovunque nella tua applicazione a condizione che siano incluse nella cartella `contentDir` (di default, `./src`), e corrispondano all'estensione del file di dichiarazione di contenuto (di default, `.content.{json,ts,tsx,js,jsx,mjs,cjs,md,mdx,yaml,yml}`).
|
|
300
|
+
>
|
|
301
|
+
> Per maggiori dettagli, fai riferimento alla [documentazione sulla dichiarazione del contenuto](https://github.com/aymericzip/intlayer/blob/main/docs/docs/it/dictionary/content_file.md).
|
|
302
|
+
|
|
303
|
+
</Step>
|
|
304
|
+
|
|
305
|
+
<Step number={5} title="Aggiungi il routing localizzato">
|
|
306
|
+
|
|
307
|
+
L'obiettivo di questo passaggio è fornire a ciascuna lingua il proprio URL, che è quello che i motori di ricerca indicizzano.
|
|
308
|
+
|
|
309
|
+
Sposta le tue pagine sotto un **segmento dinamico opzionale**. Nel router basato su file system di SolidStart, `[[locale]]` viene compilato nel pattern di percorso `:locale?`:
|
|
310
|
+
|
|
311
|
+
```plaintext
|
|
312
|
+
src/routes/
|
|
313
|
+
[[locale]].tsx ← layout che convalida il segmento
|
|
314
|
+
[[locale]]/
|
|
315
|
+
index.tsx → / e /fr e /es
|
|
316
|
+
about.tsx → /about e /fr/about e /es/about
|
|
317
|
+
[...404].tsx → catch-all per qualsiasi altra cosa
|
|
318
|
+
```
|
|
319
|
+
|
|
320
|
+
L'unico compito del file di layout è limitare il segmento a una locale configurata:
|
|
321
|
+
|
|
322
|
+
```tsx fileName="src/routes/[[locale]].tsx" codeFormat="typescript"
|
|
323
|
+
import type { RouteSectionProps } from "@solidjs/router";
|
|
324
|
+
import { locales } from "intlayer";
|
|
325
|
+
|
|
326
|
+
export const route = {
|
|
327
|
+
matchFilters: {
|
|
328
|
+
locale: locales,
|
|
329
|
+
},
|
|
330
|
+
};
|
|
331
|
+
|
|
332
|
+
export default function LocaleLayout(props: RouteSectionProps) {
|
|
333
|
+
return <>{props.children}</>;
|
|
334
|
+
}
|
|
335
|
+
```
|
|
336
|
+
|
|
337
|
+
`@solidjs/router` espande `:locale?` in due pattern — uno con il segmento e uno senza — e li prova per specificità decrescente. `matchFilters` è ciò che fa la differenza tra una configurazione funzionante e una confusa:
|
|
338
|
+
|
|
339
|
+
| URL | Senza `matchFilters` | Con `matchFilters` |
|
|
340
|
+
| ----------- | ---------------------------------------------------- | ---------------------------------------------- |
|
|
341
|
+
| `/fr/about` | Pagina informazioni in francese | Pagina informazioni in francese |
|
|
342
|
+
| `/about` | Pagina informazioni (vince il segmento statico) | Pagina informazioni |
|
|
343
|
+
| `/unknown` | **Home page**, silenziosamente, con `locale=unknown` | Nessuna corrispondenza → passa al 404 generale |
|
|
344
|
+
|
|
345
|
+
> Preferisci `[locale]` (obbligatorio) a `[[locale]]` se usi la modalità di routing `'prefix-all'`, ed elimina completamente il segmento per `'no-prefix'` o `'search-params'`.
|
|
346
|
+
|
|
347
|
+
</Step>
|
|
348
|
+
|
|
349
|
+
<Step number={6} title="Fornire le impostazioni locali alla tua applicazione">
|
|
350
|
+
|
|
351
|
+
L'URL è l'unica fonte di verità per la locale: il middleware ha già reindirizzato la richiesta al suo percorso localizzato, quindi leggere il percorso nel layout principale mantiene in accordo il rendering lato server e l'idratazione lato client, e fa in modo che ogni navigazione lato client aggiorni la locale gratuitamente.
|
|
352
|
+
|
|
353
|
+
```tsx fileName="src/app.tsx" codeFormat="typescript"
|
|
354
|
+
import { MetaProvider } from "@solidjs/meta";
|
|
355
|
+
import { Router, useLocation } from "@solidjs/router";
|
|
356
|
+
import { FileRoutes } from "@solidjs/start/router";
|
|
357
|
+
import { defaultLocale, getHTMLTextDir, getLocaleFromPath } from "intlayer";
|
|
358
|
+
import { IntlayerProvider } from "solid-intlayer";
|
|
359
|
+
import { createEffect, type ParentProps, Suspense } from "solid-js";
|
|
360
|
+
import { isServer } from "solid-js/web";
|
|
361
|
+
import { Nav } from "~/components/Nav";
|
|
362
|
+
import "./app.css";
|
|
363
|
+
|
|
364
|
+
const RootLayout = (props: ParentProps) => {
|
|
365
|
+
const location = useLocation();
|
|
366
|
+
const locale = () => getLocaleFromPath(location.pathname) ?? defaultLocale;
|
|
367
|
+
|
|
368
|
+
// Il server renderizza <html> in entry-server.tsx; le navigazioni lato client
|
|
369
|
+
// tra le impostazioni locali devono aggiornare gli attributi da sole.
|
|
370
|
+
createEffect(() => {
|
|
371
|
+
if (isServer) return;
|
|
372
|
+
|
|
373
|
+
document.documentElement.lang = locale();
|
|
374
|
+
document.documentElement.dir = getHTMLTextDir(locale());
|
|
375
|
+
});
|
|
376
|
+
|
|
377
|
+
return (
|
|
378
|
+
<MetaProvider>
|
|
379
|
+
<IntlayerProvider locale={locale()}>
|
|
380
|
+
<Nav />
|
|
381
|
+
<Suspense>{props.children}</Suspense>
|
|
382
|
+
</IntlayerProvider>
|
|
383
|
+
</MetaProvider>
|
|
384
|
+
);
|
|
385
|
+
};
|
|
386
|
+
|
|
387
|
+
export default function App() {
|
|
388
|
+
return (
|
|
389
|
+
<Router root={RootLayout}>
|
|
390
|
+
<FileRoutes />
|
|
391
|
+
</Router>
|
|
392
|
+
);
|
|
393
|
+
}
|
|
394
|
+
```
|
|
395
|
+
|
|
396
|
+
> `IntlayerProvider` reagisce alla sua prop `locale`, quindi passare la chiamata all'accessor `locale()` all'interno di JSX è sufficiente — Solid lo compila in un getter e l'intero albero viene nuovamente renderizzato nella nuova lingua quando l'URL cambia.
|
|
397
|
+
|
|
398
|
+
</Step>
|
|
399
|
+
|
|
400
|
+
<Step number={7} title="Imposta gli attributi HTML lang e dir sul server">
|
|
401
|
+
|
|
402
|
+
L'elemento `<html>` viene renderizzato da `entry-server.tsx`, all'esterno del `Router`. Leggi la locale dall'URL della richiesta:
|
|
403
|
+
|
|
404
|
+
```tsx fileName="src/entry-server.tsx" codeFormat="typescript"
|
|
405
|
+
// @refresh reload
|
|
406
|
+
import { createHandler, StartServer } from "@solidjs/start/server";
|
|
407
|
+
import { defaultLocale, getHTMLTextDir, getLocaleFromPath } from "intlayer";
|
|
408
|
+
import { getRequestEvent } from "solid-js/web";
|
|
409
|
+
|
|
410
|
+
export default createHandler(() => (
|
|
411
|
+
<StartServer
|
|
412
|
+
document={({ assets, children, scripts }) => {
|
|
413
|
+
const url = getRequestEvent()?.request.url ?? "/";
|
|
414
|
+
const locale = getLocaleFromPath(url) ?? defaultLocale;
|
|
415
|
+
|
|
416
|
+
return (
|
|
417
|
+
<html dir={getHTMLTextDir(locale)} lang={locale}>
|
|
418
|
+
<head>
|
|
419
|
+
<meta charset="utf-8" />
|
|
420
|
+
<meta
|
|
421
|
+
name="viewport"
|
|
422
|
+
content="width=device-width, initial-scale=1"
|
|
423
|
+
/>
|
|
424
|
+
<link rel="icon" href="/favicon.ico" />
|
|
425
|
+
{assets}
|
|
426
|
+
</head>
|
|
427
|
+
<body>
|
|
428
|
+
<div id="app">{children}</div>
|
|
429
|
+
{scripts}
|
|
430
|
+
</body>
|
|
431
|
+
</html>
|
|
432
|
+
);
|
|
433
|
+
}}
|
|
434
|
+
/>
|
|
435
|
+
));
|
|
436
|
+
```
|
|
437
|
+
|
|
438
|
+
I crawler ora ricevono la lingua corretta fin dal primo byte:
|
|
439
|
+
|
|
440
|
+
```html
|
|
441
|
+
<html dir="ltr" lang="fr"></html>
|
|
442
|
+
```
|
|
443
|
+
|
|
444
|
+
</Step>
|
|
445
|
+
|
|
446
|
+
<Step number={8} title="Utilizza Intlayer nelle tue pagine">
|
|
447
|
+
|
|
448
|
+
Accedi ai tuoi dizionari di contenuto in tutta la tua applicazione:
|
|
449
|
+
|
|
450
|
+
```tsx fileName="src/routes/[[locale]]/index.tsx" codeFormat="typescript"
|
|
451
|
+
import { Meta, Title } from "@solidjs/meta";
|
|
452
|
+
import { useIntlayer } from "solid-intlayer";
|
|
453
|
+
import Counter from "~/components/Counter";
|
|
454
|
+
|
|
455
|
+
export default function Home() {
|
|
456
|
+
const content = useIntlayer("home-page");
|
|
457
|
+
|
|
458
|
+
return (
|
|
459
|
+
<main>
|
|
460
|
+
<Title>{content.metaTitle.value}</Title>
|
|
461
|
+
<Meta content={content.metaDescription.value} name="description" />
|
|
462
|
+
<h1>{content.title}</h1>
|
|
463
|
+
<Counter />
|
|
464
|
+
<p>{content.documentation}</p>
|
|
465
|
+
</main>
|
|
466
|
+
);
|
|
467
|
+
}
|
|
468
|
+
```
|
|
469
|
+
|
|
470
|
+
> In Solid, `useIntlayer` restituisce contenuto reattivo (ad es. `content`). Puoi accedere direttamente alle sue proprietà.
|
|
471
|
+
|
|
472
|
+
> Se desideri utilizzare il tuo contenuto in un attributo `string`, come `alt`, `title`, `href`, `aria-label`, ecc., puoi utilizzare il valore della funzione, come:
|
|
473
|
+
>
|
|
474
|
+
> ```html
|
|
475
|
+
> <img src="{content.image.src.value}" alt="{content.image.value}" />
|
|
476
|
+
> <img src="{content.image.src.toString()}" alt="{content.image.toString()}" />
|
|
477
|
+
> <img src="{String(content.image.src)}" alt="{String(content.image)}" />
|
|
478
|
+
> ```
|
|
479
|
+
|
|
480
|
+
> Per saperne di più sull'hook `useIntlayer`, fai riferimento alla [documentazione](https://github.com/aymericzip/intlayer/blob/main/docs/docs/it/packages/solid-intlayer/useIntlayer.md).
|
|
481
|
+
|
|
482
|
+
I nodi di contenuto non si limitano a semplici traduzioni. Un contatore con pluralizzazione, ad esempio:
|
|
483
|
+
|
|
484
|
+
```typescript fileName="src/components/Counter.content.ts" codeFormat="typescript"
|
|
485
|
+
import { type Dictionary, plural, t } from "intlayer";
|
|
486
|
+
|
|
487
|
+
const counterContent = {
|
|
488
|
+
key: "counter",
|
|
489
|
+
content: {
|
|
490
|
+
clicks: plural({
|
|
491
|
+
one: t({
|
|
492
|
+
en: "{{count}} click",
|
|
493
|
+
fr: "{{count}} clic",
|
|
494
|
+
es: "{{count}} clic",
|
|
495
|
+
}),
|
|
496
|
+
other: t({
|
|
497
|
+
en: "{{count}} clicks",
|
|
498
|
+
fr: "{{count}} clics",
|
|
499
|
+
es: "{{count}} clics",
|
|
500
|
+
}),
|
|
501
|
+
}),
|
|
502
|
+
},
|
|
503
|
+
} satisfies Dictionary;
|
|
504
|
+
|
|
505
|
+
export default counterContent;
|
|
506
|
+
```
|
|
507
|
+
|
|
508
|
+
```tsx fileName="src/components/Counter.tsx" codeFormat="typescript"
|
|
509
|
+
import { useIntlayer } from "solid-intlayer";
|
|
510
|
+
import { createSignal } from "solid-js";
|
|
511
|
+
|
|
512
|
+
export default function Counter() {
|
|
513
|
+
const [count, setCount] = createSignal(0);
|
|
514
|
+
const content = useIntlayer("counter");
|
|
515
|
+
|
|
516
|
+
return (
|
|
517
|
+
<button onClick={() => setCount(count() + 1)} type="button">
|
|
518
|
+
{content.clicks(count())}
|
|
519
|
+
</button>
|
|
520
|
+
);
|
|
521
|
+
}
|
|
522
|
+
```
|
|
523
|
+
|
|
524
|
+
`plural()` seleziona la categoria tramite `Intl.PluralRules` per la locale attiva, in modo che le lingue con più di due forme plurali funzionino senza alcun codice aggiuntivo.
|
|
525
|
+
|
|
526
|
+
</Step>
|
|
527
|
+
|
|
528
|
+
<Step number={9} title="Crea un componente Link localizzato">
|
|
529
|
+
|
|
530
|
+
Crea un componente `Link` personalizzato che aggiunge automaticamente il prefisso della lingua corrente agli URL interni:
|
|
531
|
+
|
|
532
|
+
```tsx fileName="src/components/LocalizedLink.tsx" codeFormat="typescript"
|
|
533
|
+
import { A, type AnchorProps } from "@solidjs/router";
|
|
534
|
+
import { getLocalizedUrl } from "intlayer";
|
|
535
|
+
import { useLocale } from "solid-intlayer";
|
|
536
|
+
import type { ParentComponent } from "solid-js";
|
|
537
|
+
|
|
538
|
+
export const LocalizedLink: ParentComponent<AnchorProps> = (props) => {
|
|
539
|
+
const { locale } = useLocale();
|
|
540
|
+
|
|
541
|
+
const isExternal = () => /^[a-z][a-z0-9+.-]*:/i.test(props.href);
|
|
542
|
+
|
|
543
|
+
const localizedHref = () =>
|
|
544
|
+
isExternal() ? props.href : getLocalizedUrl(props.href, locale());
|
|
545
|
+
|
|
546
|
+
return <A {...props} href={localizedHref()} />;
|
|
547
|
+
};
|
|
548
|
+
```
|
|
549
|
+
|
|
550
|
+
```tsx fileName="src/components/Nav.tsx" codeFormat="typescript"
|
|
551
|
+
import { useIntlayer } from "solid-intlayer";
|
|
552
|
+
import type { Component } from "solid-js";
|
|
553
|
+
import { LocaleSwitcher } from "./LocaleSwitcher";
|
|
554
|
+
import { LocalizedLink } from "./LocalizedLink";
|
|
555
|
+
|
|
556
|
+
export const Nav: Component = () => {
|
|
557
|
+
const content = useIntlayer("nav");
|
|
558
|
+
|
|
559
|
+
return (
|
|
560
|
+
<nav>
|
|
561
|
+
<LocalizedLink href="/">{content.home}</LocalizedLink>
|
|
562
|
+
<LocalizedLink href="/about">{content.about}</LocalizedLink>
|
|
563
|
+
<LocaleSwitcher />
|
|
564
|
+
</nav>
|
|
565
|
+
);
|
|
566
|
+
};
|
|
567
|
+
```
|
|
568
|
+
|
|
569
|
+
Scrivere `href="/about"` una volta produce ora `/about`, `/fr/about` o `/es/about` a seconda della locale attiva — nessun prefisso manuale in nessuna parte delle tue pagine.
|
|
570
|
+
|
|
571
|
+
</Step>
|
|
572
|
+
|
|
573
|
+
<Step number={10} title="Crea un componente per il cambio di lingua">
|
|
574
|
+
|
|
575
|
+
Renderizza il selettore come **ancore reali** piuttosto che come uno `<select>`: ogni lingua della pagina corrente diventa un link indicizzabile che può essere aperto in una nuova scheda, cosa che un controllo basato unicamente su JavaScript non può offrire.
|
|
576
|
+
|
|
577
|
+
`getPathWithoutLocale` rimuove il segmento della locale dal percorso corrente, e `getLocalizedUrl` lo ricostruisce per la locale di destinazione, in modo che i link seguano la tua modalità di routing senza dover codificare nulla in modo rigido. La navigazione è ciò che modifica la locale renderizzata — la rotta `[[locale]]` la ricava dall'URL — mentre `setLocale` memorizza la scelta nel cookie `INTLAYER_LOCALE` in modo che una successiva visita a un URL privo di locale si risolva nella stessa lingua.
|
|
578
|
+
|
|
579
|
+
```tsx fileName="src/components/LocaleSwitcher.tsx" codeFormat={["typescript", "esm"]}
|
|
580
|
+
import { A, useLocation } from "@solidjs/router";
|
|
581
|
+
import {
|
|
582
|
+
getHTMLTextDir,
|
|
583
|
+
getLocaleName,
|
|
584
|
+
getLocalizedUrl,
|
|
585
|
+
getPathWithoutLocale,
|
|
586
|
+
} from "intlayer";
|
|
587
|
+
import { useIntlayer, useLocale } from "solid-intlayer";
|
|
588
|
+
import { type Component, For } from "solid-js";
|
|
589
|
+
|
|
590
|
+
export const LocaleSwitcher: Component = () => {
|
|
591
|
+
const content = useIntlayer("locale-switcher");
|
|
592
|
+
const location = useLocation();
|
|
593
|
+
const { locale, setLocale, availableLocales } = useLocale();
|
|
594
|
+
|
|
595
|
+
// Percorso canonico (senza locale) della pagina attualmente visualizzata
|
|
596
|
+
const pathWithoutLocale = () => getPathWithoutLocale(location.pathname);
|
|
597
|
+
|
|
598
|
+
return (
|
|
599
|
+
<div>
|
|
600
|
+
<button
|
|
601
|
+
aria-label={content.label.value}
|
|
602
|
+
popoverTarget="localePopover"
|
|
603
|
+
type="button"
|
|
604
|
+
>
|
|
605
|
+
{getLocaleName(locale())}
|
|
606
|
+
</button>
|
|
607
|
+
<div id="localePopover" popover="auto">
|
|
608
|
+
<For each={availableLocales}>
|
|
609
|
+
{(localeItem) => (
|
|
610
|
+
<A
|
|
611
|
+
dir={getHTMLTextDir(localeItem)}
|
|
612
|
+
// Solo corrispondenza esatta, in modo che il link della locale predefinita non sia contrassegnato
|
|
613
|
+
// come attivo su ogni pagina
|
|
614
|
+
end
|
|
615
|
+
href={getLocalizedUrl(pathWithoutLocale(), localeItem)}
|
|
616
|
+
hreflang={localeItem}
|
|
617
|
+
lang={localeItem}
|
|
618
|
+
onClick={() => setLocale(localeItem)}
|
|
619
|
+
// Assicura che il pulsante "indietro" del browser torni alla pagina precedente
|
|
620
|
+
replace
|
|
621
|
+
>
|
|
622
|
+
{/* Lingua nella propria locale - es. Français */}
|
|
623
|
+
{getLocaleName(localeItem)}
|
|
624
|
+
</A>
|
|
625
|
+
)}
|
|
626
|
+
</For>
|
|
627
|
+
</div>
|
|
628
|
+
</div>
|
|
629
|
+
);
|
|
630
|
+
};
|
|
631
|
+
```
|
|
632
|
+
|
|
633
|
+
> In Solid, `locale` da `useLocale` è un **accessor di segnale**. Usa `locale()` (con parentesi) per leggere il suo valore corrente in modo reattivo.
|
|
634
|
+
>
|
|
635
|
+
> `getLocaleName(localeItem)` renderizza ciascuna lingua nella propria lingua — `English / Français / Español`. Passa un secondo argomento per tradurre i nomi nella lingua attualmente visualizzata: `getLocaleName(localeItem, locale())` restituisce `English / French / Spanish` in inglese, `anglais / français / espagnol` in francese.
|
|
636
|
+
>
|
|
637
|
+
> `<A>` imposta già `aria-current="page"` sul link che corrisponde all'URL corrente, quindi non c'è nulla da aggiungere per quello. `replace` viene letto dall'attributo renderizzato dal router: sostituisce la voce di cronologia invece di aggiungerne una nuova, in modo che il pulsante "indietro" del browser torni alla pagina visitata prima del cambio anziché alla stessa pagina nella lingua precedente.
|
|
638
|
+
>
|
|
639
|
+
> `dir` e `hreflang` su ciascun link mantengono i nomi delle lingue da destra a sinistra orientati correttamente e indicano alle tecnologie assistive e ai crawler a quale lingua punta ciascun link.
|
|
640
|
+
>
|
|
641
|
+
> Per saperne di più sull'hook `useLocale`, fai riferimento alla [documentazione](https://github.com/aymericzip/intlayer/blob/main/docs/docs/it/packages/solid-intlayer/useLocale.md).
|
|
642
|
+
|
|
643
|
+
</Step>
|
|
644
|
+
|
|
645
|
+
<Step number={11} title="Emetti link canonici e hreflang" isOptional={true}>
|
|
646
|
+
|
|
647
|
+
Le annotazioni `hreflang` dicono ai motori di ricerca che `/about`, `/fr/about` e `/es/about` sono la stessa pagina in lingue diverse. `getMultilingualUrls` le ricava dal percorso canonico (senza locale), seguendo la tua modalità di routing, in modo che nulla sia codificato in modo rigido:
|
|
648
|
+
|
|
649
|
+
```tsx fileName="src/components/AlternateLinks.tsx" codeFormat="typescript"
|
|
650
|
+
import {
|
|
651
|
+
defaultLocale,
|
|
652
|
+
getMultilingualUrls,
|
|
653
|
+
getPathWithoutLocale,
|
|
654
|
+
} from "intlayer";
|
|
655
|
+
import { type Component, For } from "solid-js";
|
|
656
|
+
|
|
657
|
+
export type AlternateLinksProps = {
|
|
658
|
+
/** URL assoluto della pagina in fase di rendering. */
|
|
659
|
+
url: string;
|
|
660
|
+
};
|
|
661
|
+
|
|
662
|
+
export const AlternateLinks: Component<AlternateLinksProps> = (props) => {
|
|
663
|
+
const multilingualUrls = () => {
|
|
664
|
+
const { origin, pathname } = new URL(props.url);
|
|
665
|
+
|
|
666
|
+
return Object.entries(
|
|
667
|
+
getMultilingualUrls(`${origin}${getPathWithoutLocale(pathname)}`)
|
|
668
|
+
);
|
|
669
|
+
};
|
|
670
|
+
|
|
671
|
+
const canonicalUrl = () =>
|
|
672
|
+
new URL(props.url).origin + new URL(props.url).pathname;
|
|
673
|
+
|
|
674
|
+
return (
|
|
675
|
+
<>
|
|
676
|
+
<link href={canonicalUrl()} rel="canonical" />
|
|
677
|
+
<For each={multilingualUrls()}>
|
|
678
|
+
{([locale, localizedUrl]) => (
|
|
679
|
+
<link href={localizedUrl} hreflang={locale} rel="alternate" />
|
|
680
|
+
)}
|
|
681
|
+
</For>
|
|
682
|
+
<link
|
|
683
|
+
href={
|
|
684
|
+
multilingualUrls().find(([locale]) => locale === defaultLocale)?.[1]
|
|
685
|
+
}
|
|
686
|
+
hreflang="x-default"
|
|
687
|
+
rel="alternate"
|
|
688
|
+
/>
|
|
689
|
+
</>
|
|
690
|
+
);
|
|
691
|
+
};
|
|
692
|
+
```
|
|
693
|
+
|
|
694
|
+
Renderizzalo nell'intestazione del documento, dove l'URL della richiesta è disponibile:
|
|
695
|
+
|
|
696
|
+
```tsx fileName="src/entry-server.tsx" codeFormat="typescript"
|
|
697
|
+
import { AlternateLinks } from "~/components/AlternateLinks";
|
|
698
|
+
|
|
699
|
+
// … all'interno di <head>, accanto agli altri tag meta:
|
|
700
|
+
<AlternateLinks url={url} />;
|
|
701
|
+
```
|
|
702
|
+
|
|
703
|
+
`GET /fr/about` restituisce quindi:
|
|
704
|
+
|
|
705
|
+
```html
|
|
706
|
+
<link href="https://example.com/fr/about" rel="canonical" />
|
|
707
|
+
<link href="https://example.com/about" hreflang="en" rel="alternate" />
|
|
708
|
+
<link href="https://example.com/fr/about" hreflang="fr" rel="alternate" />
|
|
709
|
+
<link href="https://example.com/es/about" hreflang="es" rel="alternate" />
|
|
710
|
+
<link href="https://example.com/about" hreflang="x-default" rel="alternate" />
|
|
711
|
+
```
|
|
712
|
+
|
|
713
|
+
> **Nota su `@solidjs/meta`**: al momento della scrittura, `<Title>` e `<Meta>` di `@solidjs/meta` vengono applicati sul client dopo l'idratazione ma **non** vengono emessi nel `<head>` renderizzato lato server in SolidStart v2. Fino a quando ciò non verrà risolto a monte, renderizza i tag che i crawler devono vedere senza JavaScript — `canonical`, `hreflang` e, se necessario, `title` / `description` — direttamente in `entry-server.tsx`, come mostrato sopra.
|
|
714
|
+
|
|
715
|
+
</Step>
|
|
716
|
+
|
|
717
|
+
<Step number={12} title="Gestisci le pagine non trovate" isOptional={true}>
|
|
718
|
+
|
|
719
|
+
Una rotta wildcard (splat) alla radice di `src/routes` cattura qualsiasi percorso che il segmento locale non ha trovato — compresi i prefissi di locale non validi rifiutati da `matchFilters`. Poiché la locale proviene comunque dall'URL attraverso il layout di radice, la pagina 404 viene visualizzata nella lingua del visitatore:
|
|
720
|
+
|
|
721
|
+
```tsx fileName="src/routes/[...404].tsx" codeFormat="typescript"
|
|
722
|
+
import { Title } from "@solidjs/meta";
|
|
723
|
+
import { HttpStatusCode } from "@solidjs/start";
|
|
724
|
+
import { useIntlayer } from "solid-intlayer";
|
|
725
|
+
import { LocalizedLink } from "~/components/LocalizedLink";
|
|
726
|
+
|
|
727
|
+
export default function NotFound() {
|
|
728
|
+
const content = useIntlayer("not-found-page");
|
|
729
|
+
|
|
730
|
+
return (
|
|
731
|
+
<main>
|
|
732
|
+
<Title>{content.metaTitle.value}</Title>
|
|
733
|
+
<HttpStatusCode code={404} />
|
|
734
|
+
<h1>{content.title}</h1>
|
|
735
|
+
<LocalizedLink href="/">{content.backHome}</LocalizedLink>
|
|
736
|
+
</main>
|
|
737
|
+
);
|
|
738
|
+
}
|
|
739
|
+
```
|
|
740
|
+
|
|
741
|
+
| Richiesta | Risultato |
|
|
742
|
+
| ----------------- | ----------------------------------------- |
|
|
743
|
+
| `/xx` | `404` — `xx` non è una locale configurata |
|
|
744
|
+
| `/nonexistent` | `404` nella locale predefinita |
|
|
745
|
+
| `/fr/nonexistent` | `404` in francese (`Page introuvable`) |
|
|
746
|
+
|
|
747
|
+
</Step>
|
|
748
|
+
|
|
749
|
+
<Step number={13} title="Genera una sitemap multilingue" isOptional={true}>
|
|
750
|
+
|
|
751
|
+
Il generatore di sitemap di Intlayer espande ogni percorso in una voce per locale e collega le alternative `xhtml:link` tra loro, in modo che la rotta debba solo elencare i percorsi canonici e privi di locale.
|
|
752
|
+
|
|
753
|
+
> A differenza dei generatori di base che emettono solo URL semplici, Intlayer collega link bidirezionali tra ogni variante localizzata di ciascuna pagina, aiutando i motori di ricerca a mettere in relazione gli URL localizzati e a servire quello corretto al pubblico giusto.
|
|
754
|
+
|
|
755
|
+
SolidStart trasforma un file che esporta un metodo HTTP in una rotta API e rimuove l'estensione `.ts` dal percorso — in questo modo `src/routes/sitemap.xml.ts` viene servito su `/sitemap.xml`:
|
|
756
|
+
|
|
757
|
+
```typescript fileName="src/routes/sitemap.xml.ts" codeFormat={["typescript", "esm", "commonjs"]}
|
|
758
|
+
import type { APIEvent } from "@solidjs/start/server";
|
|
759
|
+
import { generateSitemap } from "intlayer";
|
|
760
|
+
|
|
761
|
+
const SITE_URL = process.env.SITE_URL ?? "http://localhost:3000";
|
|
762
|
+
|
|
763
|
+
export const GET = (_event: APIEvent) => {
|
|
764
|
+
const sitemap = generateSitemap(
|
|
765
|
+
[
|
|
766
|
+
{ path: "/", changefreq: "daily", priority: 1.0 },
|
|
767
|
+
{ path: "/about", changefreq: "monthly", priority: 0.8 },
|
|
768
|
+
],
|
|
769
|
+
{ siteUrl: SITE_URL }
|
|
770
|
+
);
|
|
771
|
+
|
|
772
|
+
return new Response(sitemap, {
|
|
773
|
+
headers: { "Content-Type": "application/xml" },
|
|
774
|
+
});
|
|
775
|
+
};
|
|
776
|
+
```
|
|
777
|
+
|
|
778
|
+
```xml fileName="output di GET /sitemap.xml"
|
|
779
|
+
<?xml version="1.0" encoding="UTF-8"?>
|
|
780
|
+
<urlset
|
|
781
|
+
xmlns="http://www.sitemaps.org/schemas/sitemap/0.9"
|
|
782
|
+
xmlns:xhtml="http://www.w3.org/1999/xhtml"
|
|
783
|
+
>
|
|
784
|
+
<url>
|
|
785
|
+
<loc>https://example.com/about</loc>
|
|
786
|
+
<changefreq>monthly</changefreq>
|
|
787
|
+
<priority>0.8</priority>
|
|
788
|
+
<xhtml:link rel="alternate" hreflang="en" href="https://example.com/about"/>
|
|
789
|
+
<xhtml:link rel="alternate" hreflang="fr" href="https://example.com/fr/about"/>
|
|
790
|
+
<xhtml:link rel="alternate" hreflang="es" href="https://example.com/es/about"/>
|
|
791
|
+
<xhtml:link rel="alternate" hreflang="x-default" href="https://example.com/about"/>
|
|
792
|
+
</url>
|
|
793
|
+
</urlset>
|
|
794
|
+
```
|
|
795
|
+
|
|
796
|
+
> Le rotte API non supportano parametri opzionali, quindi mantieni questo file alla radice di `src/routes`, all'esterno del segmento `[[locale]]`. La sitemap contiene già ogni locale.
|
|
797
|
+
|
|
798
|
+
Puoi creare un file `robots.txt` allo stesso modo con `getMultilingualUrls`, in modo che le voci `Disallow` coprano ogni ortografia localizzata di un percorso sensibile:
|
|
799
|
+
|
|
800
|
+
```typescript fileName="src/routes/robots.txt.ts" codeFormat={["typescript", "esm", "commonjs"]}
|
|
801
|
+
import { getMultilingualUrls } from "intlayer";
|
|
802
|
+
|
|
803
|
+
const SITE_URL = process.env.SITE_URL ?? "http://localhost:3000";
|
|
804
|
+
|
|
805
|
+
const disallowedPaths = ["/admin", "/private"].flatMap((path) =>
|
|
806
|
+
Object.values(getMultilingualUrls(path))
|
|
807
|
+
);
|
|
808
|
+
|
|
809
|
+
export const GET = () =>
|
|
810
|
+
new Response(
|
|
811
|
+
[
|
|
812
|
+
"User-agent: *",
|
|
813
|
+
"Allow: /",
|
|
814
|
+
...disallowedPaths.map((path) => `Disallow: ${path}`),
|
|
815
|
+
"",
|
|
816
|
+
`Sitemap: ${SITE_URL}/sitemap.xml`,
|
|
817
|
+
].join("\n"),
|
|
818
|
+
{ headers: { "Content-Type": "text/plain" } }
|
|
819
|
+
);
|
|
820
|
+
```
|
|
821
|
+
|
|
822
|
+
</Step>
|
|
823
|
+
|
|
824
|
+
<Step number={14} title="Recupera le impostazioni locali nelle tue funzioni server" isOptional={true}>
|
|
825
|
+
|
|
826
|
+
Potresti voler accedere alla locale corrente dall'interno di una funzione server o di una rotta API.
|
|
827
|
+
|
|
828
|
+
In una configurazione basata su prefisso come questa, **l'URL fa fede**: `getLocaleFromPath` legge il prefisso dall'URL della richiesta. `getLocale` è il ripiego per le richieste che non trasportano alcun prefisso di locale — ispeziona il cookie `INTLAYER_LOCALE`, quindi l'intestazione `x-intlayer-locale`, quindi negozia `Accept-Language`.
|
|
829
|
+
|
|
830
|
+
```tsx fileName="src/routes/[[locale]]/index.tsx" codeFormat="typescript"
|
|
831
|
+
import { createAsync } from "@solidjs/router";
|
|
832
|
+
import { getCookie, getIntlayer, getLocale, getLocaleFromPath } from "intlayer";
|
|
833
|
+
import { getRequestEvent } from "solid-js/web";
|
|
834
|
+
|
|
835
|
+
const loadLocalizedData = async () => {
|
|
836
|
+
"use server";
|
|
837
|
+
|
|
838
|
+
const request = getRequestEvent()?.request;
|
|
839
|
+
|
|
840
|
+
const locale =
|
|
841
|
+
getLocaleFromPath(request?.url) ??
|
|
842
|
+
(await getLocale({
|
|
843
|
+
// Ottieni il cookie dalla richiesta (predefinito: 'INTLAYER_LOCALE')
|
|
844
|
+
getCookie: (name) =>
|
|
845
|
+
getCookie(name, request?.headers.get("cookie") ?? ""),
|
|
846
|
+
// Ottieni l'intestazione dalla richiesta (predefinito: 'x-intlayer-locale'),
|
|
847
|
+
// ripiegando sulla negoziazione Accept-Language
|
|
848
|
+
getHeader: (name) => request?.headers.get(name) ?? undefined,
|
|
849
|
+
}));
|
|
850
|
+
|
|
851
|
+
// Recupera del contenuto all'esterno di un componente utilizzando getIntlayer()
|
|
852
|
+
const content = getIntlayer("home-page", locale);
|
|
853
|
+
|
|
854
|
+
return { locale, title: String(content.title) };
|
|
855
|
+
};
|
|
856
|
+
|
|
857
|
+
export default function Page() {
|
|
858
|
+
const data = createAsync(() => loadLocalizedData());
|
|
859
|
+
|
|
860
|
+
return <p>{data()?.title}</p>;
|
|
861
|
+
}
|
|
862
|
+
```
|
|
863
|
+
|
|
864
|
+
> Non affidarti unicamente a `getLocale` qui: il cookie della locale viene scritto solo quando un visitatore cambia attivamente lingua, quindi una prima visita a `/fr/...` si risolverebbe nella locale predefinita.
|
|
865
|
+
|
|
866
|
+
</Step>
|
|
867
|
+
|
|
868
|
+
<Step number={15} title="Estrai il contenuto dei tuoi componenti" isOptional={true}>
|
|
869
|
+
|
|
870
|
+
Se hai una codebase esistente, trasformare migliaia di file può richiedere molto tempo.
|
|
871
|
+
|
|
872
|
+
Per facilitare questo processo, Intlayer propone un [compilatore](https://github.com/aymericzip/intlayer/blob/main/docs/docs/it/compiler.md) / [estrattore](https://github.com/aymericzip/intlayer/blob/main/docs/docs/it/cli/extract.md) per trasformare i tuoi componenti ed estrarne il contenuto.
|
|
873
|
+
|
|
874
|
+
Per configurarlo, puoi aggiungere una sezione `compiler` nel tuo file `intlayer.config.ts`:
|
|
875
|
+
|
|
876
|
+
```typescript fileName="intlayer.config.ts" codeFormat={["typescript", "esm", "commonjs"]}
|
|
877
|
+
import { type IntlayerConfig } from "intlayer";
|
|
878
|
+
|
|
879
|
+
const config: IntlayerConfig = {
|
|
880
|
+
// ... Resto della tua configurazione
|
|
881
|
+
compiler: {
|
|
882
|
+
/**
|
|
883
|
+
* Indica se il compilatore deve essere abilitato.
|
|
884
|
+
*/
|
|
885
|
+
enabled: true,
|
|
886
|
+
|
|
887
|
+
/**
|
|
888
|
+
* Definisce il percorso dei file di output
|
|
889
|
+
*/
|
|
890
|
+
output: ({ fileName, extension }) => `./${fileName}${extension}`,
|
|
891
|
+
|
|
892
|
+
/**
|
|
893
|
+
* Indica se i componenti devono essere salvati dopo essere stati trasformati.
|
|
894
|
+
*
|
|
895
|
+
* - Se `true`, il compilatore riscriverà il file del componente sul disco. Quindi la trasformazione sarà permanente e il compilatore salterà la trasformazione per il processo successivo. In questo modo, il compilatore può trasformare l'app e poi essere rimosso.
|
|
896
|
+
*
|
|
897
|
+
* - Se `false`, il compilatore inietterà la chiamata alla funzione `useIntlayer()` nel codice solo nell'output di build e manterrà intatta la codebase di base. La trasformazione verrà eseguita solo in memoria.
|
|
898
|
+
*/
|
|
899
|
+
saveComponents: false,
|
|
900
|
+
|
|
901
|
+
/**
|
|
902
|
+
* Prefisso chiave del dizionario
|
|
903
|
+
*/
|
|
904
|
+
dictionaryKeyPrefix: "",
|
|
905
|
+
},
|
|
906
|
+
};
|
|
907
|
+
|
|
908
|
+
export default config;
|
|
909
|
+
```
|
|
910
|
+
|
|
911
|
+
<Tabs>
|
|
912
|
+
<Tab value="Comando di estrazione">
|
|
913
|
+
|
|
914
|
+
Esegui l'estrattore per trasformare i tuoi componenti ed estrarre il contenuto
|
|
915
|
+
|
|
916
|
+
```bash packageManager="npm"
|
|
917
|
+
npx intlayer extract
|
|
918
|
+
```
|
|
919
|
+
|
|
920
|
+
```bash packageManager="pnpm"
|
|
921
|
+
pnpm intlayer extract
|
|
922
|
+
```
|
|
923
|
+
|
|
924
|
+
```bash packageManager="yarn"
|
|
925
|
+
yarn intlayer extract
|
|
926
|
+
```
|
|
927
|
+
|
|
928
|
+
```bash packageManager="bun"
|
|
929
|
+
bun x intlayer extract
|
|
930
|
+
```
|
|
931
|
+
|
|
932
|
+
> Sposta successivamente i file di contenuto generati delle tue pagine fuori da `src/routes`, per il motivo spiegato al passaggio 5.
|
|
933
|
+
|
|
934
|
+
</Tab>
|
|
935
|
+
<Tab value="Compilatore Babel">
|
|
936
|
+
|
|
937
|
+
> Dalla v9, `intlayerCompiler` è incluso nel plugin `intlayer`. Quindi non è necessario aggiungerlo manualmente.
|
|
938
|
+
|
|
939
|
+
Aggiorna il tuo `vite.config.ts` per includere il plugin `intlayerCompiler`:
|
|
940
|
+
|
|
941
|
+
```ts fileName="vite.config.ts"
|
|
942
|
+
import { solidStart } from "@solidjs/start/config";
|
|
943
|
+
import { nitro } from "nitro/vite";
|
|
944
|
+
import { defineConfig } from "vite";
|
|
945
|
+
import { intlayer, intlayerCompiler } from "vite-intlayer";
|
|
946
|
+
|
|
947
|
+
export default defineConfig({
|
|
948
|
+
plugins: [
|
|
949
|
+
solidStart({ middleware: "src/middleware.ts" }),
|
|
950
|
+
nitro(),
|
|
951
|
+
intlayer(),
|
|
952
|
+
intlayerCompiler(), // Aggiunge il plugin del compilatore
|
|
953
|
+
],
|
|
954
|
+
});
|
|
955
|
+
```
|
|
956
|
+
|
|
957
|
+
```bash packageManager="npm"
|
|
958
|
+
npm run build # Oppure npm run dev
|
|
959
|
+
```
|
|
960
|
+
|
|
961
|
+
```bash packageManager="pnpm"
|
|
962
|
+
pnpm run build # Oppure pnpm run dev
|
|
963
|
+
```
|
|
964
|
+
|
|
965
|
+
```bash packageManager="yarn"
|
|
966
|
+
yarn build # Oppure yarn dev
|
|
967
|
+
```
|
|
968
|
+
|
|
969
|
+
```bash packageManager="bun"
|
|
970
|
+
bun run build # Oppure bun run dev
|
|
971
|
+
```
|
|
972
|
+
|
|
973
|
+
</Tab>
|
|
974
|
+
</Tabs>
|
|
975
|
+
|
|
976
|
+
</Step>
|
|
977
|
+
|
|
978
|
+
<Step number={16} title="Configura TypeScript">
|
|
979
|
+
|
|
980
|
+
Intlayer utilizza l'aumento dei moduli per sfruttare i vantaggi di TypeScript e rendere la tua codebase più solida.
|
|
981
|
+
|
|
982
|
+
Assicurati che la tua configurazione TypeScript includa i tipi generati automaticamente:
|
|
983
|
+
|
|
984
|
+
```json5 fileName="tsconfig.json"
|
|
985
|
+
{
|
|
986
|
+
compilerOptions: {
|
|
987
|
+
// ... le tue configurazioni esistenti
|
|
988
|
+
},
|
|
989
|
+
include: [
|
|
990
|
+
"src",
|
|
991
|
+
"*.ts",
|
|
992
|
+
".intlayer/**/*.ts", // Includi i tipi generati automaticamente
|
|
993
|
+
],
|
|
994
|
+
}
|
|
995
|
+
```
|
|
996
|
+
|
|
997
|
+
Le chiavi del dizionario e i percorsi del contenuto vengono ora controllati in fase di compilazione:
|
|
998
|
+
|
|
999
|
+
```tsx
|
|
1000
|
+
useIntlayer("home-page"); // ✅
|
|
1001
|
+
useIntlayer("hom-page"); // ❌ Argument of type '"hom-page"' is not assignable to parameter of type 'keyof __DictionaryRegistry'
|
|
1002
|
+
```
|
|
1003
|
+
|
|
1004
|
+
</Step>
|
|
1005
|
+
|
|
1006
|
+
</Steps>
|
|
1007
|
+
|
|
1008
|
+
---
|
|
1009
|
+
|
|
1010
|
+
## Verifica della configurazione
|
|
1011
|
+
|
|
1012
|
+
Compila e avvia il server, quindi verifica che queste richieste si comportino come previsto:
|
|
1013
|
+
|
|
1014
|
+
```bash
|
|
1015
|
+
npm run build
|
|
1016
|
+
node .output/server/index.mjs
|
|
1017
|
+
```
|
|
1018
|
+
|
|
1019
|
+
| Richiesta | Risposta prevista |
|
|
1020
|
+
| --------------------------------------- | -------------------------------------------- |
|
|
1021
|
+
| `GET /` | `200` — Inglese |
|
|
1022
|
+
| `GET /` con `Accept-Language: fr` | `302` → `/fr` |
|
|
1023
|
+
| `GET /` con cookie `INTLAYER_LOCALE=es` | `302` → `/es` |
|
|
1024
|
+
| `GET /fr` | `200` — Francese, `<html lang="fr">` |
|
|
1025
|
+
| `GET /fr/about` | `200` — Pagina informazioni in francese |
|
|
1026
|
+
| `GET /en/about` | `302` → `/about` (reindirizzamento canonico) |
|
|
1027
|
+
| `GET /xx` | `404` |
|
|
1028
|
+
| `GET /fr/nonexistent` | `404` in francese |
|
|
1029
|
+
| `GET /sitemap.xml` | `200` — Sitemap XML multilingue |
|
|
1030
|
+
|
|
1031
|
+
Le righe che renderizzano una pagina si comportano in modo identico sotto `vite dev`. Le tre righe di reindirizzamento si applicano solo a un server compilato a meno che tu non registri il gestore come middleware personalmente — vedi passaggio 3.
|
|
1032
|
+
|
|
1033
|
+
> Esegui il server dev su Node (`vite dev`) invece che su Bun (`bun --bun vite dev`): l'SSR di SolidStart al momento fallisce nel runtime Bun con `Expected a Response object, but received 'NodeResponse'`. Questo non ha alcuna relazione con Intlayer — si riproduce sul template di base — e riguarda solo il server dev, non `vite build`.
|
|
1034
|
+
|
|
1035
|
+
---
|
|
1036
|
+
|
|
1037
|
+
## Configurazione Git
|
|
1038
|
+
|
|
1039
|
+
Si consiglia di ignorare i file generati da Intlayer. Ciò consente di evitare di committarli nel repository Git.
|
|
1040
|
+
|
|
1041
|
+
A tale scopo, puoi aggiungere le seguenti istruzioni al tuo file `.gitignore`:
|
|
1042
|
+
|
|
1043
|
+
```plaintext fileName=".gitignore"
|
|
1044
|
+
# Ignora i file generati da Intlayer
|
|
1045
|
+
.intlayer
|
|
1046
|
+
```
|
|
1047
|
+
|
|
1048
|
+
---
|
|
1049
|
+
|
|
1050
|
+
## Estensione VS Code
|
|
1051
|
+
|
|
1052
|
+
Per migliorare la tua esperienza di sviluppo con Intlayer, puoi installare l'**estensione ufficiale Intlayer per VS Code**.
|
|
1053
|
+
|
|
1054
|
+
[Installa dal VS Code Marketplace](https://marketplace.visualstudio.com/items?itemName=intlayer.intlayer-vs-code-extension)
|
|
1055
|
+
|
|
1056
|
+
Questa estensione offre:
|
|
1057
|
+
|
|
1058
|
+
- **Autocompletamento** per le chiavi di traduzione.
|
|
1059
|
+
- **Rilevamento degli errori in tempo reale** per le traduzioni mancanti.
|
|
1060
|
+
- **Anteprime inline** del contenuto tradotto.
|
|
1061
|
+
- **Azioni rapide** per creare e aggiornare facilmente le traduzioni.
|
|
1062
|
+
|
|
1063
|
+
---
|
|
1064
|
+
|
|
1065
|
+
## Per andare oltre
|
|
1066
|
+
|
|
1067
|
+
Per andare oltre, puoi implementare l'[editor visuale](https://github.com/aymericzip/intlayer/blob/main/docs/docs/it/intlayer_visual_editor.md) o esternalizzare il tuo contenuto utilizzando il [CMS](https://github.com/aymericzip/intlayer/blob/main/docs/docs/it/intlayer_CMS.md).
|
|
1068
|
+
|
|
1069
|
+
---
|
|
1070
|
+
|
|
1071
|
+
## Riferimenti alla documentazione
|
|
1072
|
+
|
|
1073
|
+
- [Documentazione Intlayer](https://intlayer.org)
|
|
1074
|
+
- [Documentazione SolidStart](https://start.solidjs.com)
|
|
1075
|
+
- [Hook useIntlayer](https://github.com/aymericzip/intlayer/blob/main/docs/docs/it/packages/solid-intlayer/useIntlayer.md)
|
|
1076
|
+
- [Hook useLocale](https://github.com/aymericzip/intlayer/blob/main/docs/docs/it/packages/solid-intlayer/useLocale.md)
|
|
1077
|
+
- [Dichiarazione del contenuto](https://github.com/aymericzip/intlayer/blob/main/docs/docs/it/dictionary/content_file.md)
|
|
1078
|
+
- [Configurazione](https://github.com/aymericzip/intlayer/blob/main/docs/docs/it/configuration.md)
|