@intlayer/docs 7.0.7 → 7.0.8-canary.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.
Files changed (726) hide show
  1. package/blog/ar/i18n_using_next-i18next.md +1068 -0
  2. package/blog/ar/i18n_using_next-intl.md +768 -0
  3. package/blog/ar/intlayer_with_react-intl.md +0 -4
  4. package/blog/ar/next-i18next_vs_next-intl_vs_intlayer.md +5 -4
  5. package/blog/de/i18n_using_next-i18next.md +1107 -0
  6. package/blog/de/i18n_using_next-intl.md +760 -0
  7. package/blog/de/intlayer_with_react-intl.md +0 -4
  8. package/blog/de/next-i18next_vs_next-intl_vs_intlayer.md +2 -0
  9. package/blog/en/i18n_using_next-i18next.md +1073 -0
  10. package/blog/en/i18n_using_next-intl.md +757 -0
  11. package/blog/en/intlayer_with_i18next.md +71 -8
  12. package/blog/en/intlayer_with_next-i18next.md +71 -8
  13. package/blog/en/intlayer_with_next-intl.md +71 -8
  14. package/blog/en/intlayer_with_react-i18next.md +69 -8
  15. package/blog/en/intlayer_with_react-intl.md +68 -9
  16. package/blog/en/intlayer_with_vue-i18n.md +68 -7
  17. package/blog/en/react-i18next_vs_react-intl_vs_intlayer.md +2 -0
  18. package/blog/en/vue-i18n_vs_intlayer.md +2 -0
  19. package/blog/en-GB/i18n_using_next-i18next.md +1074 -0
  20. package/blog/en-GB/i18n_using_next-intl.md +757 -0
  21. package/blog/en-GB/intlayer_with_i18next.md +15 -6
  22. package/blog/en-GB/intlayer_with_next-i18next.md +16 -6
  23. package/blog/en-GB/intlayer_with_next-intl.md +16 -6
  24. package/blog/en-GB/intlayer_with_react-i18next.md +16 -7
  25. package/blog/en-GB/intlayer_with_react-intl.md +14 -9
  26. package/blog/en-GB/intlayer_with_vue-i18n.md +16 -7
  27. package/blog/en-GB/next-i18next_vs_next-intl_vs_intlayer.md +2 -0
  28. package/blog/en-GB/react-i18next_vs_react-intl_vs_intlayer.md +2 -0
  29. package/blog/en-GB/vue-i18n_vs_intlayer.md +2 -0
  30. package/blog/es/i18n_using_next-i18next.md +1066 -0
  31. package/blog/es/i18n_using_next-intl.md +757 -0
  32. package/blog/es/intlayer_with_react-intl.md +0 -4
  33. package/blog/es/next-i18next_vs_next-intl_vs_intlayer.md +2 -0
  34. package/blog/fr/i18n_using_next-i18next.md +1078 -0
  35. package/blog/fr/i18n_using_next-intl.md +759 -0
  36. package/blog/fr/intlayer_with_react-intl.md +0 -4
  37. package/blog/fr/next-i18next_vs_next-intl_vs_intlayer.md +2 -0
  38. package/blog/hi/i18n_using_next-i18next.md +1068 -0
  39. package/blog/hi/i18n_using_next-intl.md +758 -0
  40. package/blog/hi/intlayer_with_react-intl.md +0 -4
  41. package/blog/hi/next-i18next_vs_next-intl_vs_intlayer.md +2 -0
  42. package/blog/id/i18n_using_next-i18next.md +1078 -0
  43. package/blog/id/i18n_using_next-intl.md +757 -0
  44. package/blog/id/index.md +69 -0
  45. package/blog/id/internationalization_and_SEO.md +364 -0
  46. package/blog/id/intlayer_with_react-intl.md +0 -4
  47. package/blog/id/list_i18n_technologies/CMS/drupal.md +143 -0
  48. package/blog/id/list_i18n_technologies/CMS/wix.md +167 -0
  49. package/blog/id/list_i18n_technologies/CMS/wordpress.md +188 -0
  50. package/blog/id/list_i18n_technologies/frameworks/angular.md +125 -0
  51. package/blog/id/list_i18n_technologies/frameworks/flutter.md +150 -0
  52. package/blog/id/list_i18n_technologies/frameworks/react-native.md +217 -0
  53. package/blog/id/list_i18n_technologies/frameworks/react.md +155 -0
  54. package/blog/id/list_i18n_technologies/frameworks/svelte.md +131 -0
  55. package/blog/id/list_i18n_technologies/frameworks/vue.md +130 -0
  56. package/blog/id/next-i18next_vs_next-intl_vs_intlayer.md +1500 -0
  57. package/blog/id/nextjs-multilingual-seo-comparison.md +361 -0
  58. package/blog/id/rag_powered_documentation_assistant.md +288 -0
  59. package/blog/id/react-i18next_vs_react-intl_vs_intlayer.md +164 -0
  60. package/blog/id/vue-i18n_vs_intlayer.md +278 -0
  61. package/blog/id/what_is_internationalization.md +166 -0
  62. package/blog/it/i18n_using_next-i18next.md +1078 -0
  63. package/blog/it/i18n_using_next-intl.md +758 -0
  64. package/blog/it/intlayer_with_react-intl.md +0 -4
  65. package/blog/it/react-i18next_vs_react-intl_vs_intlayer.md +4 -0
  66. package/blog/it/vue-i18n_vs_intlayer.md +2 -0
  67. package/blog/ja/i18n_using_next-i18next.md +1078 -0
  68. package/blog/ja/i18n_using_next-intl.md +758 -0
  69. package/blog/ja/intlayer_with_react-intl.md +0 -4
  70. package/blog/ja/next-i18next_vs_next-intl_vs_intlayer.md +2 -0
  71. package/blog/ko/i18n_using_next-i18next.md +1075 -0
  72. package/blog/ko/i18n_using_next-intl.md +759 -0
  73. package/blog/ko/intlayer_with_react-intl.md +0 -4
  74. package/blog/ko/next-i18next_vs_next-intl_vs_intlayer.md +2 -0
  75. package/blog/pl/i18n_using_next-i18next.md +1078 -0
  76. package/blog/pl/i18n_using_next-intl.md +758 -0
  77. package/blog/pl/index.md +69 -0
  78. package/blog/pl/internationalization_and_SEO.md +363 -0
  79. package/blog/pl/intlayer_with_react-intl.md +0 -4
  80. package/blog/pl/list_i18n_technologies/CMS/drupal.md +143 -0
  81. package/blog/pl/list_i18n_technologies/CMS/wix.md +167 -0
  82. package/blog/pl/list_i18n_technologies/CMS/wordpress.md +196 -0
  83. package/blog/pl/list_i18n_technologies/frameworks/angular.md +125 -0
  84. package/blog/pl/list_i18n_technologies/frameworks/flutter.md +151 -0
  85. package/blog/pl/list_i18n_technologies/frameworks/react-native.md +217 -0
  86. package/blog/pl/list_i18n_technologies/frameworks/react.md +155 -0
  87. package/blog/pl/list_i18n_technologies/frameworks/svelte.md +131 -0
  88. package/blog/pl/list_i18n_technologies/frameworks/vue.md +130 -0
  89. package/blog/pl/next-i18next_vs_next-intl_vs_intlayer.md +1501 -0
  90. package/blog/pl/nextjs-multilingual-seo-comparison.md +362 -0
  91. package/blog/pl/rag_powered_documentation_assistant.md +288 -0
  92. package/blog/pl/react-i18next_vs_react-intl_vs_intlayer.md +164 -0
  93. package/blog/pl/vue-i18n_vs_intlayer.md +278 -0
  94. package/blog/pl/what_is_internationalization.md +167 -0
  95. package/blog/pt/i18n_using_next-i18next.md +1067 -0
  96. package/blog/pt/i18n_using_next-intl.md +760 -0
  97. package/blog/pt/next-i18next_vs_next-intl_vs_intlayer.md +2 -0
  98. package/blog/ru/i18n_using_next-i18next.md +1106 -0
  99. package/blog/ru/i18n_using_next-intl.md +759 -0
  100. package/blog/ru/intlayer_with_react-intl.md +0 -4
  101. package/blog/ru/next-i18next_vs_next-intl_vs_intlayer.md +2 -0
  102. package/blog/tr/i18n_using_next-i18next.md +1078 -0
  103. package/blog/tr/i18n_using_next-intl.md +760 -0
  104. package/blog/tr/intlayer_with_react-intl.md +0 -4
  105. package/blog/tr/next-i18next_vs_next-intl_vs_intlayer.md +2 -0
  106. package/blog/tr/react-i18next_vs_react-intl_vs_intlayer.md +2 -0
  107. package/blog/tr/vue-i18n_vs_intlayer.md +2 -0
  108. package/blog/vi/i18n_using_next-i18next.md +1080 -0
  109. package/blog/vi/i18n_using_next-intl.md +758 -0
  110. package/blog/vi/index.md +69 -0
  111. package/blog/vi/internationalization_and_SEO.md +363 -0
  112. package/blog/vi/intlayer_with_react-intl.md +0 -4
  113. package/blog/vi/list_i18n_technologies/CMS/drupal.md +143 -0
  114. package/blog/vi/list_i18n_technologies/CMS/wix.md +167 -0
  115. package/blog/vi/list_i18n_technologies/CMS/wordpress.md +188 -0
  116. package/blog/vi/list_i18n_technologies/frameworks/angular.md +125 -0
  117. package/blog/vi/list_i18n_technologies/frameworks/flutter.md +150 -0
  118. package/blog/vi/list_i18n_technologies/frameworks/react-native.md +217 -0
  119. package/blog/vi/list_i18n_technologies/frameworks/react.md +155 -0
  120. package/blog/vi/list_i18n_technologies/frameworks/svelte.md +131 -0
  121. package/blog/vi/list_i18n_technologies/frameworks/vue.md +130 -0
  122. package/blog/vi/next-i18next_vs_next-intl_vs_intlayer.md +1520 -0
  123. package/blog/vi/nextjs-multilingual-seo-comparison.md +362 -0
  124. package/blog/vi/rag_powered_documentation_assistant.md +288 -0
  125. package/blog/vi/react-i18next_vs_react-intl_vs_intlayer.md +164 -0
  126. package/blog/vi/vue-i18n_vs_intlayer.md +278 -0
  127. package/blog/vi/what_is_internationalization.md +168 -0
  128. package/blog/zh/i18n_using_next-i18next.md +1105 -0
  129. package/blog/zh/i18n_using_next-intl.md +758 -0
  130. package/blog/zh/intlayer_with_react-intl.md +0 -4
  131. package/blog/zh/next-i18next_vs_next-intl_vs_intlayer.md +2 -0
  132. package/blog/zh/react-i18next_vs_react-intl_vs_intlayer.md +2 -0
  133. package/dist/cjs/common.cjs +0 -4
  134. package/dist/cjs/common.cjs.map +1 -1
  135. package/dist/cjs/generated/blog.entry.cjs +38 -6
  136. package/dist/cjs/generated/blog.entry.cjs.map +1 -1
  137. package/dist/cjs/generated/docs.entry.cjs +0 -6
  138. package/dist/cjs/generated/docs.entry.cjs.map +1 -1
  139. package/dist/cjs/generated/frequentQuestions.entry.cjs +0 -6
  140. package/dist/cjs/generated/frequentQuestions.entry.cjs.map +1 -1
  141. package/dist/cjs/generated/legal.entry.cjs +0 -6
  142. package/dist/cjs/generated/legal.entry.cjs.map +1 -1
  143. package/dist/esm/generated/blog.entry.mjs +38 -0
  144. package/dist/esm/generated/blog.entry.mjs.map +1 -1
  145. package/dist/types/generated/blog.entry.d.ts +2 -0
  146. package/dist/types/generated/blog.entry.d.ts.map +1 -1
  147. package/docs/ar/component_i18n.md +1 -1
  148. package/docs/ar/configuration.md +6 -0
  149. package/docs/ar/intlayer_cli.md +8 -3
  150. package/docs/ar/intlayer_with_next-i18next.md +619 -0
  151. package/docs/ar/intlayer_with_next-intl.md +446 -0
  152. package/docs/ar/intlayer_with_nextjs_16.md +21 -0
  153. package/docs/ar/intlayer_with_tanstack.md +4 -0
  154. package/docs/ar/intlayer_with_vite+react.md +4 -0
  155. package/docs/de/component_i18n.md +1 -1
  156. package/docs/de/configuration.md +6 -0
  157. package/docs/de/intlayer_cli.md +8 -3
  158. package/docs/de/intlayer_with_next-i18next.md +627 -0
  159. package/docs/de/intlayer_with_next-intl.md +451 -0
  160. package/docs/de/intlayer_with_nextjs_16.md +21 -0
  161. package/docs/de/intlayer_with_tanstack.md +4 -0
  162. package/docs/de/intlayer_with_vite+react.md +4 -0
  163. package/docs/en/component_i18n.md +1 -1
  164. package/docs/en/intlayer_cli.md +8 -1
  165. package/docs/en/intlayer_with_astro.md +10 -2
  166. package/docs/en/intlayer_with_create_react_app.md +8 -0
  167. package/docs/en/intlayer_with_lynx+react.md +8 -0
  168. package/docs/en/intlayer_with_nestjs.md +10 -0
  169. package/docs/en/intlayer_with_nextjs_14.md +10 -2
  170. package/docs/en/intlayer_with_nextjs_15.md +21 -4
  171. package/docs/en/intlayer_with_nextjs_16.md +17 -0
  172. package/docs/en/intlayer_with_nuxt.md +8 -0
  173. package/docs/en/intlayer_with_react_native+expo.md +10 -2
  174. package/docs/en/intlayer_with_react_router_v7.md +8 -0
  175. package/docs/en/intlayer_with_tanstack.md +10 -0
  176. package/docs/en/intlayer_with_vite+preact.md +10 -2
  177. package/docs/en/intlayer_with_vite+react.md +21 -4
  178. package/docs/en/intlayer_with_vite+vue.md +10 -2
  179. package/docs/en-GB/component_i18n.md +1 -1
  180. package/docs/en-GB/configuration.md +6 -0
  181. package/docs/en-GB/intlayer_cli.md +8 -3
  182. package/docs/en-GB/intlayer_with_angular.md +4 -4
  183. package/docs/en-GB/intlayer_with_express.md +4 -4
  184. package/docs/en-GB/intlayer_with_lynx+react.md +12 -12
  185. package/{blog/en/_intlayer_with_next-i18next.md → docs/en-GB/intlayer_with_next-i18next.md} +241 -42
  186. package/{blog/en/_intlayer_with_next-intl.md → docs/en-GB/intlayer_with_next-intl.md} +144 -29
  187. package/docs/en-GB/intlayer_with_nextjs_16.md +21 -0
  188. package/docs/en-GB/intlayer_with_tanstack.md +5 -1
  189. package/docs/en-GB/intlayer_with_vite+react.md +4 -0
  190. package/docs/en-GB/packages/next-intlayer/t.md +2 -2
  191. package/docs/es/component_i18n.md +1 -1
  192. package/docs/es/configuration.md +6 -0
  193. package/docs/es/intlayer_cli.md +8 -3
  194. package/docs/es/intlayer_with_next-i18next.md +628 -0
  195. package/docs/es/intlayer_with_next-intl.md +446 -0
  196. package/docs/es/intlayer_with_nextjs_16.md +21 -0
  197. package/docs/es/intlayer_with_tanstack.md +4 -0
  198. package/docs/es/intlayer_with_vite+react.md +4 -0
  199. package/docs/fr/configuration.md +6 -0
  200. package/docs/fr/intlayer_cli.md +8 -3
  201. package/docs/fr/intlayer_with_next-i18next.md +628 -0
  202. package/docs/fr/intlayer_with_next-intl.md +446 -0
  203. package/docs/fr/intlayer_with_nextjs_16.md +23 -2
  204. package/docs/fr/intlayer_with_tanstack.md +4 -0
  205. package/docs/fr/intlayer_with_vite+react.md +4 -0
  206. package/docs/hi/component_i18n.md +1 -1
  207. package/docs/hi/configuration.md +6 -0
  208. package/docs/hi/intlayer_cli.md +8 -0
  209. package/docs/hi/intlayer_with_next-i18next.md +628 -0
  210. package/docs/hi/intlayer_with_next-intl.md +446 -0
  211. package/docs/hi/intlayer_with_nextjs_16.md +21 -0
  212. package/docs/hi/intlayer_with_tanstack.md +4 -0
  213. package/docs/hi/intlayer_with_vite+react.md +4 -0
  214. package/docs/id/CI_CD.md +198 -0
  215. package/docs/id/autoFill.md +284 -0
  216. package/docs/id/component_i18n.md +186 -0
  217. package/docs/id/configuration.md +710 -0
  218. package/docs/id/dictionary/condition.md +231 -0
  219. package/docs/id/dictionary/content_file.md +1092 -0
  220. package/docs/id/dictionary/enumeration.md +245 -0
  221. package/docs/id/dictionary/file.md +237 -0
  222. package/docs/id/dictionary/function_fetching.md +214 -0
  223. package/docs/id/dictionary/gender.md +273 -0
  224. package/docs/id/dictionary/insertion.md +192 -0
  225. package/docs/id/dictionary/markdown.md +381 -0
  226. package/docs/id/dictionary/nesting.md +273 -0
  227. package/docs/id/dictionary/translation.md +310 -0
  228. package/docs/id/formatters.md +596 -0
  229. package/docs/id/how_works_intlayer.md +256 -0
  230. package/docs/id/index.md +176 -0
  231. package/docs/id/interest_of_intlayer.md +293 -0
  232. package/docs/id/intlayer_CMS.md +549 -0
  233. package/docs/id/intlayer_cli.md +850 -0
  234. package/docs/id/intlayer_visual_editor.md +288 -0
  235. package/docs/id/intlayer_with_angular.md +694 -0
  236. package/docs/id/intlayer_with_astro.md +252 -0
  237. package/docs/id/intlayer_with_create_react_app.md +1233 -0
  238. package/docs/id/intlayer_with_express.md +411 -0
  239. package/docs/id/intlayer_with_lynx+react.md +518 -0
  240. package/docs/id/intlayer_with_nestjs.md +272 -0
  241. package/docs/id/intlayer_with_next-i18next.md +628 -0
  242. package/docs/id/intlayer_with_next-intl.md +446 -0
  243. package/docs/id/intlayer_with_nextjs_14.md +1617 -0
  244. package/docs/id/intlayer_with_nextjs_15.md +1698 -0
  245. package/docs/id/intlayer_with_nextjs_16.md +21 -0
  246. package/docs/id/intlayer_with_nextjs_page_router.md +1478 -0
  247. package/docs/id/intlayer_with_nuxt.md +808 -0
  248. package/docs/id/intlayer_with_react_native+expo.md +699 -0
  249. package/docs/id/intlayer_with_react_router_v7.md +496 -0
  250. package/docs/id/intlayer_with_tanstack.md +564 -0
  251. package/docs/id/intlayer_with_vite+preact.md +1737 -0
  252. package/docs/id/intlayer_with_vite+react.md +1413 -0
  253. package/docs/id/intlayer_with_vite+solid.md +289 -0
  254. package/docs/id/intlayer_with_vite+svelte.md +289 -0
  255. package/docs/id/intlayer_with_vite+vue.md +1088 -0
  256. package/docs/id/introduction.md +218 -0
  257. package/docs/id/locale_mapper.md +242 -0
  258. package/docs/id/mcp_server.md +211 -0
  259. package/docs/id/packages/express-intlayer/t.md +458 -0
  260. package/docs/id/packages/intlayer/getConfiguration.md +145 -0
  261. package/docs/id/packages/intlayer/getEnumeration.md +159 -0
  262. package/docs/id/packages/intlayer/getHTMLTextDir.md +122 -0
  263. package/docs/id/packages/intlayer/getLocaleLang.md +81 -0
  264. package/docs/id/packages/intlayer/getLocaleName.md +119 -0
  265. package/docs/id/packages/intlayer/getLocalizedUrl.md +309 -0
  266. package/docs/id/packages/intlayer/getMultilingualUrls.md +223 -0
  267. package/docs/id/packages/intlayer/getPathWithoutLocale.md +75 -0
  268. package/docs/id/packages/intlayer/getTranslation.md +190 -0
  269. package/docs/id/packages/intlayer/getTranslationContent.md +188 -0
  270. package/docs/id/packages/next-intlayer/t.md +352 -0
  271. package/docs/id/packages/next-intlayer/useDictionary.md +271 -0
  272. package/docs/id/packages/next-intlayer/useIntlayer.md +264 -0
  273. package/docs/id/packages/next-intlayer/useLocale.md +166 -0
  274. package/docs/id/packages/react-intlayer/t.md +303 -0
  275. package/docs/id/packages/react-intlayer/useDictionary.md +287 -0
  276. package/docs/id/packages/react-intlayer/useI18n.md +267 -0
  277. package/docs/id/packages/react-intlayer/useIntlayer.md +254 -0
  278. package/docs/id/packages/react-intlayer/useLocale.md +210 -0
  279. package/docs/id/per_locale_file.md +323 -0
  280. package/docs/id/readme.md +261 -0
  281. package/docs/id/releases/v6.md +305 -0
  282. package/docs/id/roadmap.md +362 -0
  283. package/docs/id/testing.md +202 -0
  284. package/docs/id/vs_code_extension.md +126 -0
  285. package/docs/it/component_i18n.md +1 -1
  286. package/docs/it/configuration.md +6 -0
  287. package/docs/it/intlayer_cli.md +8 -3
  288. package/docs/it/intlayer_with_next-i18next.md +628 -0
  289. package/docs/it/intlayer_with_next-intl.md +446 -0
  290. package/docs/it/intlayer_with_nextjs_16.md +21 -0
  291. package/docs/it/intlayer_with_tanstack.md +4 -0
  292. package/docs/it/intlayer_with_vite+react.md +4 -0
  293. package/docs/ja/component_i18n.md +1 -1
  294. package/docs/ja/configuration.md +6 -0
  295. package/docs/ja/intlayer_cli.md +8 -3
  296. package/docs/ja/intlayer_with_next-i18next.md +627 -0
  297. package/docs/ja/intlayer_with_next-intl.md +446 -0
  298. package/docs/ja/intlayer_with_nextjs_16.md +21 -0
  299. package/docs/ja/intlayer_with_tanstack.md +4 -0
  300. package/docs/ja/intlayer_with_vite+react.md +4 -0
  301. package/docs/ko/configuration.md +6 -0
  302. package/docs/ko/intlayer_cli.md +8 -3
  303. package/docs/ko/intlayer_with_next-i18next.md +627 -0
  304. package/docs/ko/intlayer_with_next-intl.md +446 -0
  305. package/docs/ko/intlayer_with_nextjs_16.md +21 -0
  306. package/docs/ko/intlayer_with_tanstack.md +4 -0
  307. package/docs/ko/intlayer_with_vite+react.md +4 -0
  308. package/docs/pl/CI_CD.md +198 -0
  309. package/docs/pl/autoFill.md +284 -0
  310. package/docs/pl/component_i18n.md +186 -0
  311. package/docs/pl/configuration.md +710 -0
  312. package/docs/pl/dictionary/condition.md +232 -0
  313. package/docs/pl/dictionary/content_file.md +1130 -0
  314. package/docs/pl/dictionary/enumeration.md +245 -0
  315. package/docs/pl/dictionary/file.md +234 -0
  316. package/docs/pl/dictionary/function_fetching.md +214 -0
  317. package/docs/pl/dictionary/gender.md +276 -0
  318. package/docs/pl/dictionary/insertion.md +188 -0
  319. package/docs/pl/dictionary/markdown.md +408 -0
  320. package/docs/pl/dictionary/nesting.md +273 -0
  321. package/docs/pl/dictionary/translation.md +310 -0
  322. package/docs/pl/formatters.md +596 -0
  323. package/docs/pl/how_works_intlayer.md +256 -0
  324. package/docs/pl/index.md +176 -0
  325. package/docs/pl/interest_of_intlayer.md +291 -0
  326. package/docs/pl/intlayer_CMS.md +549 -0
  327. package/docs/pl/intlayer_cli.md +857 -0
  328. package/docs/pl/intlayer_visual_editor.md +288 -0
  329. package/docs/pl/intlayer_with_angular.md +690 -0
  330. package/docs/pl/intlayer_with_astro.md +280 -0
  331. package/docs/pl/intlayer_with_create_react_app.md +1235 -0
  332. package/docs/pl/intlayer_with_express.md +411 -0
  333. package/docs/pl/intlayer_with_lynx+react.md +518 -0
  334. package/docs/pl/intlayer_with_nestjs.md +272 -0
  335. package/docs/pl/intlayer_with_next-i18next.md +628 -0
  336. package/docs/pl/intlayer_with_next-intl.md +446 -0
  337. package/docs/pl/intlayer_with_nextjs_14.md +1594 -0
  338. package/docs/pl/intlayer_with_nextjs_15.md +1701 -0
  339. package/docs/pl/intlayer_with_nextjs_16.md +21 -0
  340. package/docs/pl/intlayer_with_nextjs_page_router.md +1513 -0
  341. package/docs/pl/intlayer_with_nuxt.md +885 -0
  342. package/docs/pl/intlayer_with_react_native+expo.md +698 -0
  343. package/docs/pl/intlayer_with_react_router_v7.md +503 -0
  344. package/docs/pl/intlayer_with_tanstack.md +562 -0
  345. package/docs/pl/intlayer_with_vite+preact.md +1736 -0
  346. package/docs/pl/intlayer_with_vite+react.md +1438 -0
  347. package/docs/pl/intlayer_with_vite+solid.md +290 -0
  348. package/docs/pl/intlayer_with_vite+svelte.md +289 -0
  349. package/docs/pl/intlayer_with_vite+vue.md +1116 -0
  350. package/docs/pl/introduction.md +209 -0
  351. package/docs/pl/locale_mapper.md +242 -0
  352. package/docs/pl/mcp_server.md +211 -0
  353. package/docs/pl/packages/express-intlayer/t.md +458 -0
  354. package/docs/pl/packages/intlayer/getConfiguration.md +146 -0
  355. package/docs/pl/packages/intlayer/getEnumeration.md +160 -0
  356. package/docs/pl/packages/intlayer/getHTMLTextDir.md +121 -0
  357. package/docs/pl/packages/intlayer/getLocaleLang.md +81 -0
  358. package/docs/pl/packages/intlayer/getLocaleName.md +118 -0
  359. package/docs/pl/packages/intlayer/getLocalizedUrl.md +300 -0
  360. package/docs/pl/packages/intlayer/getMultilingualUrls.md +221 -0
  361. package/docs/pl/packages/intlayer/getPathWithoutLocale.md +75 -0
  362. package/docs/pl/packages/intlayer/getTranslation.md +190 -0
  363. package/docs/pl/packages/intlayer/getTranslationContent.md +189 -0
  364. package/docs/pl/packages/next-intlayer/t.md +353 -0
  365. package/docs/pl/packages/next-intlayer/useDictionary.md +270 -0
  366. package/docs/pl/packages/next-intlayer/useIntlayer.md +263 -0
  367. package/docs/pl/packages/next-intlayer/useLocale.md +166 -0
  368. package/docs/pl/packages/react-intlayer/t.md +303 -0
  369. package/docs/pl/packages/react-intlayer/useDictionary.md +289 -0
  370. package/docs/pl/packages/react-intlayer/useI18n.md +249 -0
  371. package/docs/pl/packages/react-intlayer/useIntlayer.md +256 -0
  372. package/docs/pl/packages/react-intlayer/useLocale.md +210 -0
  373. package/docs/pl/per_locale_file.md +321 -0
  374. package/docs/pl/readme.md +261 -0
  375. package/docs/pl/releases/v6.md +305 -0
  376. package/docs/pl/roadmap.md +362 -0
  377. package/docs/pl/testing.md +202 -0
  378. package/docs/pl/vs_code_extension.md +126 -0
  379. package/docs/pt/component_i18n.md +1 -1
  380. package/docs/pt/configuration.md +6 -0
  381. package/docs/pt/intlayer_cli.md +8 -3
  382. package/docs/pt/intlayer_with_next-i18next.md +627 -0
  383. package/docs/pt/intlayer_with_next-intl.md +446 -0
  384. package/docs/pt/intlayer_with_nextjs_16.md +21 -0
  385. package/docs/pt/intlayer_with_tanstack.md +4 -0
  386. package/docs/pt/intlayer_with_vite+react.md +4 -0
  387. package/docs/ru/component_i18n.md +1 -1
  388. package/docs/ru/configuration.md +6 -0
  389. package/docs/ru/intlayer_cli.md +301 -22
  390. package/docs/ru/intlayer_with_next-i18next.md +629 -0
  391. package/docs/ru/intlayer_with_next-intl.md +448 -0
  392. package/docs/ru/intlayer_with_nextjs_16.md +21 -0
  393. package/docs/ru/intlayer_with_tanstack.md +4 -0
  394. package/docs/ru/intlayer_with_vite+react.md +4 -0
  395. package/docs/tr/component_i18n.md +1 -1
  396. package/docs/tr/configuration.md +6 -0
  397. package/docs/tr/intlayer_cli.md +8 -0
  398. package/docs/tr/intlayer_with_next-i18next.md +627 -0
  399. package/docs/tr/intlayer_with_next-intl.md +446 -0
  400. package/docs/tr/intlayer_with_nextjs_16.md +21 -0
  401. package/docs/tr/intlayer_with_tanstack.md +4 -0
  402. package/docs/tr/intlayer_with_vite+react.md +4 -0
  403. package/docs/vi/CI_CD.md +198 -0
  404. package/docs/vi/autoFill.md +284 -0
  405. package/docs/vi/component_i18n.md +186 -0
  406. package/docs/vi/configuration.md +710 -0
  407. package/docs/vi/dictionary/condition.md +237 -0
  408. package/docs/vi/dictionary/content_file.md +1115 -0
  409. package/docs/vi/dictionary/enumeration.md +255 -0
  410. package/docs/vi/dictionary/file.md +234 -0
  411. package/docs/vi/dictionary/function_fetching.md +212 -0
  412. package/docs/vi/dictionary/gender.md +275 -0
  413. package/docs/vi/dictionary/insertion.md +191 -0
  414. package/docs/vi/dictionary/markdown.md +381 -0
  415. package/docs/vi/dictionary/nesting.md +273 -0
  416. package/docs/vi/dictionary/translation.md +309 -0
  417. package/docs/vi/formatters.md +595 -0
  418. package/docs/vi/how_works_intlayer.md +256 -0
  419. package/docs/vi/index.md +174 -0
  420. package/docs/vi/interest_of_intlayer.md +292 -0
  421. package/docs/vi/intlayer_CMS.md +549 -0
  422. package/docs/vi/intlayer_cli.md +850 -0
  423. package/docs/vi/intlayer_visual_editor.md +288 -0
  424. package/docs/vi/intlayer_with_angular.md +692 -0
  425. package/docs/vi/intlayer_with_astro.md +252 -0
  426. package/docs/vi/intlayer_with_create_react_app.md +1230 -0
  427. package/docs/vi/intlayer_with_express.md +409 -0
  428. package/docs/vi/intlayer_with_lynx+react.md +520 -0
  429. package/docs/vi/intlayer_with_nestjs.md +272 -0
  430. package/docs/vi/intlayer_with_next-i18next.md +628 -0
  431. package/docs/vi/intlayer_with_next-intl.md +446 -0
  432. package/docs/vi/intlayer_with_nextjs_14.md +1584 -0
  433. package/docs/vi/intlayer_with_nextjs_15.md +1738 -0
  434. package/docs/vi/intlayer_with_nextjs_16.md +21 -0
  435. package/docs/vi/intlayer_with_nextjs_page_router.md +1504 -0
  436. package/docs/vi/intlayer_with_nuxt.md +821 -0
  437. package/docs/vi/intlayer_with_react_native+expo.md +700 -0
  438. package/docs/vi/intlayer_with_react_router_v7.md +498 -0
  439. package/docs/vi/intlayer_with_tanstack.md +562 -0
  440. package/docs/vi/intlayer_with_vite+preact.md +1722 -0
  441. package/docs/vi/intlayer_with_vite+react.md +1407 -0
  442. package/docs/vi/intlayer_with_vite+solid.md +287 -0
  443. package/docs/vi/intlayer_with_vite+svelte.md +289 -0
  444. package/docs/vi/intlayer_with_vite+vue.md +1071 -0
  445. package/docs/vi/introduction.md +215 -0
  446. package/docs/vi/locale_mapper.md +242 -0
  447. package/docs/vi/mcp_server.md +211 -0
  448. package/docs/vi/packages/express-intlayer/t.md +457 -0
  449. package/docs/vi/packages/intlayer/getConfiguration.md +145 -0
  450. package/docs/vi/packages/intlayer/getEnumeration.md +162 -0
  451. package/docs/vi/packages/intlayer/getHTMLTextDir.md +121 -0
  452. package/docs/vi/packages/intlayer/getLocaleLang.md +81 -0
  453. package/docs/vi/packages/intlayer/getLocaleName.md +129 -0
  454. package/docs/vi/packages/intlayer/getLocalizedUrl.md +309 -0
  455. package/docs/vi/packages/intlayer/getMultilingualUrls.md +221 -0
  456. package/docs/vi/packages/intlayer/getPathWithoutLocale.md +75 -0
  457. package/docs/vi/packages/intlayer/getTranslation.md +201 -0
  458. package/docs/vi/packages/intlayer/getTranslationContent.md +188 -0
  459. package/docs/vi/packages/next-intlayer/t.md +352 -0
  460. package/docs/vi/packages/next-intlayer/useDictionary.md +273 -0
  461. package/docs/vi/packages/next-intlayer/useIntlayer.md +264 -0
  462. package/docs/vi/packages/next-intlayer/useLocale.md +166 -0
  463. package/docs/vi/packages/react-intlayer/t.md +304 -0
  464. package/docs/vi/packages/react-intlayer/useDictionary.md +288 -0
  465. package/docs/vi/packages/react-intlayer/useI18n.md +295 -0
  466. package/docs/vi/packages/react-intlayer/useIntlayer.md +256 -0
  467. package/docs/vi/packages/react-intlayer/useLocale.md +210 -0
  468. package/docs/vi/per_locale_file.md +326 -0
  469. package/docs/vi/readme.md +261 -0
  470. package/docs/vi/releases/v6.md +305 -0
  471. package/docs/vi/roadmap.md +346 -0
  472. package/docs/vi/testing.md +202 -0
  473. package/docs/vi/vs_code_extension.md +126 -0
  474. package/docs/zh/configuration.md +6 -0
  475. package/docs/zh/intlayer_cli.md +8 -3
  476. package/docs/zh/intlayer_with_next-i18next.md +628 -0
  477. package/docs/zh/intlayer_with_next-intl.md +448 -0
  478. package/docs/zh/intlayer_with_nextjs_16.md +21 -0
  479. package/docs/zh/intlayer_with_tanstack.md +4 -0
  480. package/docs/zh/intlayer_with_vite+react.md +4 -0
  481. package/frequent_questions/ar/SSR_Next_no_[locale].md +1 -2
  482. package/frequent_questions/ar/array_as_content_declaration.md +1 -2
  483. package/frequent_questions/ar/build_dictionaries.md +1 -2
  484. package/frequent_questions/ar/build_error_CI_CD.md +1 -2
  485. package/frequent_questions/ar/bun_set_up.md +1 -2
  486. package/frequent_questions/ar/customized_locale_list.md +1 -2
  487. package/frequent_questions/ar/domain_routing.md +1 -2
  488. package/frequent_questions/ar/esbuild_error.md +1 -2
  489. package/frequent_questions/ar/get_locale_cookie.md +1 -2
  490. package/frequent_questions/ar/intlayer_command_undefined.md +1 -2
  491. package/frequent_questions/ar/locale_incorect_in_url.md +1 -2
  492. package/frequent_questions/ar/static_rendering.md +1 -3
  493. package/frequent_questions/ar/translated_path_url.md +1 -2
  494. package/frequent_questions/ar/unknown_command.md +1 -2
  495. package/frequent_questions/de/SSR_Next_no_[locale].md +1 -2
  496. package/frequent_questions/de/array_as_content_declaration.md +1 -2
  497. package/frequent_questions/de/build_dictionaries.md +1 -2
  498. package/frequent_questions/de/build_error_CI_CD.md +1 -2
  499. package/frequent_questions/de/bun_set_up.md +1 -2
  500. package/frequent_questions/de/customized_locale_list.md +1 -2
  501. package/frequent_questions/de/domain_routing.md +1 -2
  502. package/frequent_questions/de/esbuild_error.md +1 -2
  503. package/frequent_questions/de/get_locale_cookie.md +1 -2
  504. package/frequent_questions/de/intlayer_command_undefined.md +1 -2
  505. package/frequent_questions/de/locale_incorect_in_url.md +1 -2
  506. package/frequent_questions/de/static_rendering.md +1 -3
  507. package/frequent_questions/de/translated_path_url.md +1 -2
  508. package/frequent_questions/de/unknown_command.md +1 -2
  509. package/frequent_questions/en/SSR_Next_no_[locale].md +1 -2
  510. package/frequent_questions/en/array_as_content_declaration.md +1 -2
  511. package/frequent_questions/en/build_dictionaries.md +1 -2
  512. package/frequent_questions/en/build_error_CI_CD.md +1 -2
  513. package/frequent_questions/en/bun_set_up.md +1 -2
  514. package/frequent_questions/en/customized_locale_list.md +1 -2
  515. package/frequent_questions/en/domain_routing.md +1 -2
  516. package/frequent_questions/en/esbuild_error.md +1 -2
  517. package/frequent_questions/en/get_locale_cookie.md +1 -2
  518. package/frequent_questions/en/intlayer_command_undefined.md +1 -2
  519. package/frequent_questions/en/locale_incorect_in_url.md +1 -2
  520. package/frequent_questions/en/static_rendering.md +1 -3
  521. package/frequent_questions/en/translated_path_url.md +1 -2
  522. package/frequent_questions/en/unknown_command.md +1 -2
  523. package/frequent_questions/en-GB/SSR_Next_no_[locale].md +1 -2
  524. package/frequent_questions/en-GB/array_as_content_declaration.md +1 -2
  525. package/frequent_questions/en-GB/build_dictionaries.md +1 -2
  526. package/frequent_questions/en-GB/build_error_CI_CD.md +1 -2
  527. package/frequent_questions/en-GB/bun_set_up.md +1 -2
  528. package/frequent_questions/en-GB/customized_locale_list.md +1 -2
  529. package/frequent_questions/en-GB/domain_routing.md +1 -2
  530. package/frequent_questions/en-GB/esbuild_error.md +1 -2
  531. package/frequent_questions/en-GB/get_locale_cookie.md +1 -2
  532. package/frequent_questions/en-GB/intlayer_command_undefined.md +1 -2
  533. package/frequent_questions/en-GB/locale_incorect_in_url.md +1 -2
  534. package/frequent_questions/en-GB/static_rendering.md +1 -3
  535. package/frequent_questions/en-GB/translated_path_url.md +1 -2
  536. package/frequent_questions/en-GB/unknown_command.md +1 -2
  537. package/frequent_questions/es/SSR_Next_no_[locale].md +1 -2
  538. package/frequent_questions/es/array_as_content_declaration.md +1 -2
  539. package/frequent_questions/es/build_dictionaries.md +1 -2
  540. package/frequent_questions/es/build_error_CI_CD.md +1 -2
  541. package/frequent_questions/es/bun_set_up.md +1 -2
  542. package/frequent_questions/es/customized_locale_list.md +1 -2
  543. package/frequent_questions/es/domain_routing.md +1 -2
  544. package/frequent_questions/es/esbuild_error.md +1 -2
  545. package/frequent_questions/es/get_locale_cookie.md +1 -2
  546. package/frequent_questions/es/intlayer_command_undefined.md +1 -2
  547. package/frequent_questions/es/locale_incorect_in_url.md +1 -2
  548. package/frequent_questions/es/static_rendering.md +1 -3
  549. package/frequent_questions/es/translated_path_url.md +1 -2
  550. package/frequent_questions/es/unknown_command.md +1 -2
  551. package/frequent_questions/fr/SSR_Next_no_[locale].md +1 -2
  552. package/frequent_questions/fr/array_as_content_declaration.md +1 -2
  553. package/frequent_questions/fr/build_dictionaries.md +1 -2
  554. package/frequent_questions/fr/build_error_CI_CD.md +1 -2
  555. package/frequent_questions/fr/bun_set_up.md +1 -2
  556. package/frequent_questions/fr/customized_locale_list.md +1 -2
  557. package/frequent_questions/fr/domain_routing.md +1 -2
  558. package/frequent_questions/fr/esbuild_error.md +1 -2
  559. package/frequent_questions/fr/get_locale_cookie.md +1 -2
  560. package/frequent_questions/fr/intlayer_command_undefined.md +1 -2
  561. package/frequent_questions/fr/locale_incorect_in_url.md +1 -2
  562. package/frequent_questions/fr/static_rendering.md +1 -3
  563. package/frequent_questions/fr/translated_path_url.md +1 -2
  564. package/frequent_questions/fr/unknown_command.md +1 -2
  565. package/frequent_questions/hi/SSR_Next_no_[locale].md +1 -2
  566. package/frequent_questions/hi/array_as_content_declaration.md +1 -2
  567. package/frequent_questions/hi/build_dictionaries.md +1 -2
  568. package/frequent_questions/hi/build_error_CI_CD.md +1 -2
  569. package/frequent_questions/hi/bun_set_up.md +1 -2
  570. package/frequent_questions/hi/customized_locale_list.md +1 -2
  571. package/frequent_questions/hi/domain_routing.md +1 -2
  572. package/frequent_questions/hi/esbuild_error.md +1 -2
  573. package/frequent_questions/hi/get_locale_cookie.md +1 -2
  574. package/frequent_questions/hi/intlayer_command_undefined.md +1 -2
  575. package/frequent_questions/hi/locale_incorect_in_url.md +1 -2
  576. package/frequent_questions/hi/static_rendering.md +1 -3
  577. package/frequent_questions/hi/translated_path_url.md +1 -2
  578. package/frequent_questions/hi/unknown_command.md +1 -2
  579. package/frequent_questions/id/SSR_Next_no_[locale].md +104 -0
  580. package/frequent_questions/id/array_as_content_declaration.md +71 -0
  581. package/frequent_questions/id/build_dictionaries.md +58 -0
  582. package/frequent_questions/id/build_error_CI_CD.md +74 -0
  583. package/frequent_questions/id/bun_set_up.md +53 -0
  584. package/frequent_questions/id/customized_locale_list.md +64 -0
  585. package/frequent_questions/id/domain_routing.md +113 -0
  586. package/frequent_questions/id/esbuild_error.md +29 -0
  587. package/frequent_questions/id/get_locale_cookie.md +142 -0
  588. package/frequent_questions/id/intlayer_command_undefined.md +155 -0
  589. package/frequent_questions/id/locale_incorect_in_url.md +73 -0
  590. package/frequent_questions/id/static_rendering.md +44 -0
  591. package/frequent_questions/id/translated_path_url.md +55 -0
  592. package/frequent_questions/id/unknown_command.md +97 -0
  593. package/frequent_questions/it/SSR_Next_no_[locale].md +1 -2
  594. package/frequent_questions/it/array_as_content_declaration.md +1 -2
  595. package/frequent_questions/it/build_dictionaries.md +1 -2
  596. package/frequent_questions/it/build_error_CI_CD.md +1 -2
  597. package/frequent_questions/it/bun_set_up.md +1 -2
  598. package/frequent_questions/it/customized_locale_list.md +1 -2
  599. package/frequent_questions/it/domain_routing.md +1 -2
  600. package/frequent_questions/it/esbuild_error.md +1 -2
  601. package/frequent_questions/it/get_locale_cookie.md +1 -2
  602. package/frequent_questions/it/intlayer_command_undefined.md +1 -2
  603. package/frequent_questions/it/locale_incorect_in_url.md +1 -2
  604. package/frequent_questions/it/static_rendering.md +1 -3
  605. package/frequent_questions/it/translated_path_url.md +1 -2
  606. package/frequent_questions/it/unknown_command.md +1 -2
  607. package/frequent_questions/ja/SSR_Next_no_[locale].md +1 -2
  608. package/frequent_questions/ja/array_as_content_declaration.md +1 -2
  609. package/frequent_questions/ja/build_dictionaries.md +1 -2
  610. package/frequent_questions/ja/build_error_CI_CD.md +1 -2
  611. package/frequent_questions/ja/bun_set_up.md +1 -2
  612. package/frequent_questions/ja/customized_locale_list.md +1 -2
  613. package/frequent_questions/ja/domain_routing.md +1 -2
  614. package/frequent_questions/ja/esbuild_error.md +1 -2
  615. package/frequent_questions/ja/get_locale_cookie.md +1 -2
  616. package/frequent_questions/ja/intlayer_command_undefined.md +1 -2
  617. package/frequent_questions/ja/locale_incorect_in_url.md +1 -2
  618. package/frequent_questions/ja/static_rendering.md +1 -3
  619. package/frequent_questions/ja/translated_path_url.md +1 -2
  620. package/frequent_questions/ja/unknown_command.md +1 -2
  621. package/frequent_questions/ko/SSR_Next_no_[locale].md +1 -2
  622. package/frequent_questions/ko/array_as_content_declaration.md +1 -2
  623. package/frequent_questions/ko/build_dictionaries.md +1 -2
  624. package/frequent_questions/ko/build_error_CI_CD.md +1 -2
  625. package/frequent_questions/ko/bun_set_up.md +1 -2
  626. package/frequent_questions/ko/customized_locale_list.md +1 -2
  627. package/frequent_questions/ko/domain_routing.md +1 -2
  628. package/frequent_questions/ko/esbuild_error.md +1 -2
  629. package/frequent_questions/ko/get_locale_cookie.md +1 -2
  630. package/frequent_questions/ko/intlayer_command_undefined.md +1 -2
  631. package/frequent_questions/ko/locale_incorect_in_url.md +1 -2
  632. package/frequent_questions/ko/static_rendering.md +1 -3
  633. package/frequent_questions/ko/translated_path_url.md +1 -2
  634. package/frequent_questions/ko/unknown_command.md +1 -2
  635. package/frequent_questions/pl/SSR_Next_no_[locale].md +104 -0
  636. package/frequent_questions/pl/array_as_content_declaration.md +71 -0
  637. package/frequent_questions/pl/build_dictionaries.md +58 -0
  638. package/frequent_questions/pl/build_error_CI_CD.md +74 -0
  639. package/frequent_questions/pl/bun_set_up.md +54 -0
  640. package/frequent_questions/pl/customized_locale_list.md +64 -0
  641. package/frequent_questions/pl/domain_routing.md +113 -0
  642. package/frequent_questions/pl/esbuild_error.md +29 -0
  643. package/frequent_questions/pl/get_locale_cookie.md +142 -0
  644. package/frequent_questions/pl/intlayer_command_undefined.md +155 -0
  645. package/frequent_questions/pl/locale_incorect_in_url.md +73 -0
  646. package/frequent_questions/pl/static_rendering.md +44 -0
  647. package/frequent_questions/pl/translated_path_url.md +55 -0
  648. package/frequent_questions/pl/unknown_command.md +97 -0
  649. package/frequent_questions/pt/SSR_Next_no_[locale].md +1 -2
  650. package/frequent_questions/pt/array_as_content_declaration.md +1 -2
  651. package/frequent_questions/pt/build_dictionaries.md +1 -2
  652. package/frequent_questions/pt/build_error_CI_CD.md +1 -2
  653. package/frequent_questions/pt/bun_set_up.md +1 -2
  654. package/frequent_questions/pt/customized_locale_list.md +1 -2
  655. package/frequent_questions/pt/domain_routing.md +1 -2
  656. package/frequent_questions/pt/esbuild_error.md +1 -2
  657. package/frequent_questions/pt/get_locale_cookie.md +1 -2
  658. package/frequent_questions/pt/intlayer_command_undefined.md +1 -2
  659. package/frequent_questions/pt/locale_incorect_in_url.md +1 -2
  660. package/frequent_questions/pt/static_rendering.md +1 -3
  661. package/frequent_questions/pt/translated_path_url.md +1 -2
  662. package/frequent_questions/pt/unknown_command.md +1 -2
  663. package/frequent_questions/ru/SSR_Next_no_[locale].md +1 -2
  664. package/frequent_questions/ru/array_as_content_declaration.md +1 -2
  665. package/frequent_questions/ru/build_dictionaries.md +1 -2
  666. package/frequent_questions/ru/build_error_CI_CD.md +1 -2
  667. package/frequent_questions/ru/bun_set_up.md +1 -2
  668. package/frequent_questions/ru/customized_locale_list.md +1 -2
  669. package/frequent_questions/ru/domain_routing.md +1 -2
  670. package/frequent_questions/ru/esbuild_error.md +1 -2
  671. package/frequent_questions/ru/get_locale_cookie.md +1 -2
  672. package/frequent_questions/ru/intlayer_command_undefined.md +1 -2
  673. package/frequent_questions/ru/locale_incorect_in_url.md +1 -2
  674. package/frequent_questions/ru/static_rendering.md +1 -2
  675. package/frequent_questions/ru/translated_path_url.md +1 -2
  676. package/frequent_questions/ru/unknown_command.md +1 -2
  677. package/frequent_questions/tr/SSR_Next_no_[locale].md +1 -2
  678. package/frequent_questions/tr/array_as_content_declaration.md +1 -2
  679. package/frequent_questions/tr/build_dictionaries.md +1 -2
  680. package/frequent_questions/tr/build_error_CI_CD.md +1 -2
  681. package/frequent_questions/tr/bun_set_up.md +1 -2
  682. package/frequent_questions/tr/customized_locale_list.md +1 -2
  683. package/frequent_questions/tr/domain_routing.md +1 -2
  684. package/frequent_questions/tr/esbuild_error.md +1 -2
  685. package/frequent_questions/tr/get_locale_cookie.md +1 -2
  686. package/frequent_questions/tr/intlayer_command_undefined.md +1 -2
  687. package/frequent_questions/tr/locale_incorect_in_url.md +1 -2
  688. package/frequent_questions/tr/static_rendering.md +1 -2
  689. package/frequent_questions/tr/translated_path_url.md +1 -2
  690. package/frequent_questions/tr/unknown_command.md +1 -2
  691. package/frequent_questions/vi/SSR_Next_no_[locale].md +106 -0
  692. package/frequent_questions/vi/array_as_content_declaration.md +71 -0
  693. package/frequent_questions/vi/build_dictionaries.md +58 -0
  694. package/frequent_questions/vi/build_error_CI_CD.md +74 -0
  695. package/frequent_questions/vi/bun_set_up.md +53 -0
  696. package/frequent_questions/vi/customized_locale_list.md +64 -0
  697. package/frequent_questions/vi/domain_routing.md +113 -0
  698. package/frequent_questions/vi/esbuild_error.md +29 -0
  699. package/frequent_questions/vi/get_locale_cookie.md +142 -0
  700. package/frequent_questions/vi/intlayer_command_undefined.md +155 -0
  701. package/frequent_questions/vi/locale_incorect_in_url.md +73 -0
  702. package/frequent_questions/vi/static_rendering.md +44 -0
  703. package/frequent_questions/vi/translated_path_url.md +55 -0
  704. package/frequent_questions/vi/unknown_command.md +97 -0
  705. package/frequent_questions/zh/SSR_Next_no_[locale].md +1 -2
  706. package/frequent_questions/zh/array_as_content_declaration.md +1 -2
  707. package/frequent_questions/zh/build_dictionaries.md +1 -2
  708. package/frequent_questions/zh/build_error_CI_CD.md +1 -2
  709. package/frequent_questions/zh/bun_set_up.md +1 -2
  710. package/frequent_questions/zh/customized_locale_list.md +1 -2
  711. package/frequent_questions/zh/domain_routing.md +1 -2
  712. package/frequent_questions/zh/esbuild_error.md +1 -2
  713. package/frequent_questions/zh/get_locale_cookie.md +1 -2
  714. package/frequent_questions/zh/intlayer_command_undefined.md +1 -2
  715. package/frequent_questions/zh/locale_incorect_in_url.md +1 -2
  716. package/frequent_questions/zh/static_rendering.md +1 -3
  717. package/frequent_questions/zh/translated_path_url.md +1 -2
  718. package/frequent_questions/zh/unknown_command.md +1 -2
  719. package/legal/id/privacy_notice.md +83 -0
  720. package/legal/id/terms_of_service.md +55 -0
  721. package/legal/pl/privacy_notice.md +83 -0
  722. package/legal/pl/terms_of_service.md +55 -0
  723. package/legal/vi/privacy_notice.md +83 -0
  724. package/legal/vi/terms_of_service.md +55 -0
  725. package/package.json +19 -18
  726. package/src/generated/blog.entry.ts +38 -0
package/blog/de/i18n_using_next-i18next.md ADDED
@@ -0,0 +1,1107 @@
1
+ ---
2
+ createdAt: 2025-11-01
3
+ updatedAt: 2025-11-01
4
+ title: Wie Sie Ihre Next.js-Anwendung mit next-i18next internationalisieren
5
+ description: Richten Sie i18n mit next-i18next ein: Best Practices und SEO-Tipps für mehrsprachige Next.js-Apps, einschließlich Internationalisierung, Inhaltsorganisation und technischer Einrichtung.
6
+ slugs:
7
+ - blog
8
+ - nextjs-internationalization-using-next-i18next
9
+ applicationTemplate: https://github.com/aymericzip/next-i18next-template
10
+ history:
11
+ - version: 7.0.6
12
+ date: 2025-11-01
13
+ changes: Erste Version
14
+ ---
15
+
16
+ # Wie Sie Ihre Next.js-Anwendung mit next-i18next im Jahr 2025 internationalisieren
17
+
18
+ ## Inhaltsverzeichnis
19
+
20
+ <TOC/>
21
+
22
+ ## Was ist next-i18next?
23
+
24
+ **next-i18next** ist eine beliebte Internationalisierungslösung (i18n) für Next.js-Anwendungen. Während das ursprüngliche `next-i18next`-Paket für den Pages Router entwickelt wurde, zeigt Ihnen diese Anleitung, wie Sie i18next mit dem modernen **App Router** direkt mit `i18next` und `react-i18next` implementieren.
25
+
26
+ Mit diesem Ansatz können Sie:
27
+
28
+ - **Übersetzungen organisieren** durch die Verwendung von Namespaces (z. B. `common.json`, `about.json`) für eine bessere Inhaltsverwaltung.
29
+ - **Übersetzungen effizient laden**, indem nur die für jede Seite benötigten Namespaces geladen werden, was die Bundle-Größe reduziert.
30
+ - **Sowohl Server- als auch Client-Komponenten unterstützen** mit korrektem SSR- und Hydrations-Handling.
31
+ - **TypeScript-Unterstützung sicherstellen** mit typsicherer Konfiguration der Locale und der Übersetzungsschlüssel.
32
+ - **Für SEO optimieren** mit korrekten Metadaten, Sitemap und Internationalisierung von robots.txt.
33
+
34
+ > Als Alternative können Sie auch die [next-intl Anleitung](https://github.com/aymericzip/intlayer/blob/main/docs/blog/de/i18n_using_next-intl.md) oder direkt [Intlayer](https://github.com/aymericzip/intlayer/blob/main/docs/docs/de/intlayer_with_nextjs_16.md) verwenden.
35
+
36
+ > Siehe den Vergleich in [next-i18next vs next-intl vs Intlayer](https://github.com/aymericzip/intlayer/blob/main/docs/blog/de/next-i18next_vs_next-intl_vs_intlayer.md).
37
+
38
+ ## Praktiken, die Sie befolgen sollten
39
+
40
+ Bevor wir in die Implementierung einsteigen, hier einige Praktiken, die Sie befolgen sollten:
41
+
42
+ - **HTML-Attribute `lang` und `dir` setzen**
43
+ - **Setzen Sie die HTML-Attribute `lang` und `dir`**
44
+ Berechnen Sie in Ihrem Layout `dir` mit `getLocaleDirection(locale)` und setzen Sie `<html lang={locale} dir={dir}>` für eine korrekte Barrierefreiheit und SEO.
45
+ - **Nach Namespace Nachrichten aufteilen**
46
+ Organisieren Sie JSON-Dateien pro Locale und Namespace (z. B. `common.json`, `about.json`), um nur das zu laden, was Sie benötigen.
47
+ - **Client-Payload minimieren**
48
+ Senden Sie auf Seiten nur die benötigten Namespaces an `NextIntlClientProvider` (z. B. `pick(messages, ['common', 'about'])`).
49
+ - **Bevorzugen Sie statische Seiten**
50
+ Verwenden Sie statische Seiten so oft wie möglich für bessere Leistung und SEO.
51
+ - **I18n in Server-Komponenten**
52
+ Server-Komponenten, wie Seiten oder alle Komponenten, die nicht als `client` markiert sind, sind statisch und können zur Build-Zeit vorgerendert werden. Daher müssen wir die Übersetzungsfunktionen als Props an sie übergeben.
53
+ - **TypeScript-Typen einrichten**
54
+ - **TypeScript-Typen einrichten**
55
+ Für Ihre Locales, um Typensicherheit in Ihrer gesamten Anwendung zu gewährleisten.
56
+ - **Proxy für Weiterleitungen**
57
+ Verwenden Sie einen Proxy, um die Locale-Erkennung und das Routing zu handhaben und den Benutzer zur entsprechenden URL mit Locale-Präfix weiterzuleiten.
58
+ - **Internationalisierung Ihrer Metadaten, Sitemap, robots.txt**
59
+ Internationalisieren Sie Ihre Metadaten, Sitemap und robots.txt mit der von Next.js bereitgestellten Funktion `generateMetadata`, um eine bessere Auffindbarkeit durch Suchmaschinen in allen Locales sicherzustellen.
60
+ - **Links lokalisieren**
61
+ Lokalisieren Sie Links mit der `Link`-Komponente, um den Benutzer zur entsprechenden URL mit Locale-Präfix weiterzuleiten. Dies ist wichtig, um die Auffindbarkeit Ihrer Seiten in allen Locales zu gewährleisten.
62
+ - **Automatisieren Sie Tests und Übersetzungen**
63
+ Automatisierte Tests und Übersetzungen helfen, Zeit bei der Pflege Ihrer mehrsprachigen Anwendung zu sparen.
64
+
65
+ > Siehe unsere Dokumentation, die alles auflistet, was Sie über Internationalisierung und SEO wissen müssen: [Internationalisierung (i18n) mit next-intl](https://github.com/aymericzip/intlayer/blob/main/docs/blog/de/internationalization_and_SEO.md).
66
+
67
+ ---
68
+
69
+ ## Schritt-für-Schritt-Anleitung zur Einrichtung von i18next in einer Next.js-Anwendung
70
+
71
+ <iframe
72
+ src="https://stackblitz.com/github/aymericzip/next-i18next-template?embed=1&ctl=1&file=src/app/i18n.ts"
73
+ className="m-auto overflow-hidden rounded-lg border-0 max-md:size-full max-md:h-[700px] md:aspect-16/9 md:w-full"
74
+ title="Demo CodeSandbox - Wie Sie Ihre Anwendung mit Intlayer internationalisieren"
75
+ sandbox="allow-forms allow-modals allow-popups allow-presentation allow-same-origin allow-scripts"
76
+ loading="lazy"
77
+
78
+ > Siehe [Application Template](https://github.com/aymericzip/next-i18next-template) auf GitHub.
79
+
80
+ Hier ist die Projektstruktur, die wir erstellen werden:
81
+
82
+ ```bash
83
+ .
84
+ ├── i18n.config.ts
85
+ └── src # Src ist optional
86
+ ├── locales
87
+ │ ├── en
88
+ │ │ ├── common.json
89
+ │ │ └── about.json
90
+ │ └── fr
91
+ │ ├── common.json
92
+ │ └── about.json
93
+ ├── types
94
+ │ └── i18next.d.ts
95
+ ├── app
96
+ │ ├── proxy.ts
97
+ │ ├── i18n
98
+ │ │ └── server.ts
99
+ │ └── [locale]
100
+ │ ├── layout.tsx
101
+ │ ├── (home) # / (Route-Gruppe, um nicht alle Seiten mit Home-Nachrichten zu überladen)
102
+ │ │ ├── layout.tsx
103
+ │ │ └── page.tsx
104
+ │ └── about # /about
105
+ │ ├── layout.tsx
106
+ │ └── page.tsx
107
+ └── components
108
+ ├── I18nProvider.tsx
109
+ ├── ClientComponent.tsx
110
+ └── ServerComponent.tsx
111
+ ```
112
+
113
+ ### Schritt 1: Abhängigkeiten installieren
114
+
115
+ Installieren Sie die notwendigen Pakete mit npm:
116
+
117
+ ```bash packageManager="npm"
118
+ npm install i18next react-i18next i18next-resources-to-backend
119
+ ```
120
+
121
+ ```bash packageManager="pnpm"
122
+ pnpm add i18next react-i18next i18next-resources-to-backend
123
+ ```
124
+
125
+ ```bash packageManager="yarn"
126
+ yarn add i18next react-i18next i18next-resources-to-backend
127
+ ```
128
+
129
+ - **i18next**: Das zentrale Internationalisierungs-Framework, das das Laden und Verwalten von Übersetzungen übernimmt.
130
+ - **react-i18next**: React-Bindings für i18next, die Hooks wie `useTranslation` für Client-Komponenten bereitstellen.
131
+ - **i18next-resources-to-backend**: Ein Plugin, das das dynamische Laden von Übersetzungsdateien ermöglicht, sodass Sie nur die benötigten Namespaces laden können.
132
+
133
+ ### Schritt 2: Konfigurieren Sie Ihr Projekt
134
+
135
+ Erstellen Sie eine Konfigurationsdatei, um Ihre unterstützten Sprachen, die Standardsprache und Hilfsfunktionen für die URL-Lokalisierung zu definieren. Diese Datei dient als einzige Quelle der Wahrheit für Ihre i18n-Einrichtung und gewährleistet Typensicherheit in Ihrer gesamten Anwendung.
136
+
137
+ Die Zentralisierung Ihrer Sprachkonfiguration verhindert Inkonsistenzen und erleichtert das Hinzufügen oder Entfernen von Sprachen in der Zukunft. Die Hilfsfunktionen sorgen für eine konsistente URL-Generierung für SEO und Routing.
138
+
139
+ ```ts fileName="i18n.config.ts"
140
+ // Definieren Sie unterstützte Sprachen als const-Array für Typensicherheit
141
+ // Die 'as const'-Assertion bewirkt, dass TypeScript Literaltypen anstelle von string[] ableitet
142
+ export const locales = ["en", "fr"] as const;
143
+
144
+ // Extrahieren Sie den Locale-Typ aus dem locales-Array
145
+ // Dies erzeugt einen Union-Typ: "en" | "fr"
146
+ export type Locale = (typeof locales)[number];
147
+
148
+ // Standardmäßige Locale, die verwendet wird, wenn keine Locale angegeben ist
149
+ export const defaultLocale: Locale = "en";
150
+
151
+ // Rechts-nach-links-Sprachen, die eine spezielle Textausrichtung benötigen
152
+ export const rtlLocales = ["ar", "he", "fa", "ur"] as const;
153
+
154
+ // Prüfen, ob eine Locale eine RTL-Textausrichtung benötigt
155
+ // Wird für Sprachen wie Arabisch, Hebräisch, Persisch und Urdu verwendet
156
+ export const isRtl = (locale: string) =>
157
+ (rtlLocales as readonly string[]).includes(locale);
158
+
159
+ // Generiert einen lokalisierten Pfad für eine gegebene Locale und einen Pfad
160
+ // Pfade der Standard-Locale haben kein Präfix (z.B. "/about" statt "/en/about")
161
+ // Andere Locales werden mit Präfix versehen (z.B. "/fr/about")
162
+ export function localizedPath(locale: string, path: string) {
163
+ return locale === defaultLocale ? path : `/${locale}${path}`;
164
+ }
165
+
166
+ // Basis-URL für absolute URLs (verwendet in Sitemaps, Metadaten usw.)
167
+ const ORIGIN = "https://example.com";
168
+
169
+ // Erzeuge eine absolute URL mit Locale-Präfix
170
+ // Verwendet für SEO-Metadaten, Sitemaps und kanonische URLs
171
+ export function absoluteUrl(locale: string, path: string) {
172
+ return `${ORIGIN}${localizedPath(locale, path)}`;
173
+ }
174
+
175
+ // Wird verwendet, um das Locale-Cookie im Browser zu setzen
176
+ export function getCookie(locale: Locale) {
177
+ return [
178
+ `NEXT_LOCALE=${locale}`,
179
+ "Path=/",
180
+ `Max-Age=${60 * 60 * 24 * 365}`, // 1 Jahr
181
+ "SameSite=Lax",
182
+ ].join("; ");
183
+ }
184
+ ```
185
+
186
+ ### Schritt 3: Übersetzungs-Namespaces zentralisieren
187
+
188
+ Erstellen Sie eine einzige Quelle der Wahrheit für jeden Namespace, den Ihre Anwendung bereitstellt. Die Wiederverwendung dieser Liste hält Server-, Client- und Tooling-Code synchron und ermöglicht eine starke Typisierung für Übersetzungshilfen.
189
+
190
+ ```ts fileName="src/i18n.namespaces.ts"
191
+ export const namespaces = ["common", "about"] as const;
192
+
193
+ export type Namespace = (typeof namespaces)[number];
194
+ ```
195
+
196
+ ### Schritt 4: Starke Typisierung der Übersetzungsschlüssel mit TypeScript
197
+
198
+ Erweitern Sie `i18next`, um auf Ihre kanonischen Sprachdateien (normalerweise Englisch) zu verweisen. TypeScript leitet dann gültige Schlüssel pro Namespace ab, sodass Aufrufe von `t()` durchgängig überprüft werden.
199
+
200
+ ```ts fileName="src/types/i18next.d.ts"
201
+ import "i18next";
202
+
203
+ declare module "i18next" {
204
+ interface CustomTypeOptions {
205
+ defaultNS: "common";
206
+ resources: {
207
+ common: typeof import("@/locales/en/common.json");
208
+ about: typeof import("@/locales/en/about.json");
209
+ };
210
+ }
211
+ }
212
+ ```
213
+
214
+ > Tipp: Speichere diese Deklaration unter `src/types` (erstelle den Ordner, falls er nicht existiert). Next.js inkludiert `src` bereits in der `tsconfig.json`, sodass die Erweiterung automatisch erkannt wird. Falls nicht, füge Folgendes zu deiner `tsconfig.json` Datei hinzu:
215
+
216
+ ```json5 fileName="tsconfig.json"
217
+ {
218
+ "include": ["src/types/**/*.ts"],
219
+ }
220
+ ```
221
+
222
+ Damit kannst du dich auf Autovervollständigung und Kompilierzeitprüfungen verlassen:
223
+
224
+ ```tsx
225
+ import { useTranslation, type TFunction } from "react-i18next";
226
+
227
+ const { t } = useTranslation("about");
228
+
229
+ // OK, typisiert: t("counter.increment")
230
+ // FEHLER, Kompilierfehler: t("doesNotExist")
231
+ export type AboutTranslator = TFunction<"about">;
232
+ ```
233
+
234
+ ### Schritt 5: Serverseitige i18n-Initialisierung einrichten
235
+
236
+ Erstellen Sie eine serverseitige Initialisierungsfunktion, die Übersetzungen für Server-Komponenten lädt. Diese Funktion erstellt eine separate i18next-Instanz für das serverseitige Rendering und stellt sicher, dass die Übersetzungen vor dem Rendern geladen werden.
237
+
238
+ Server-Komponenten benötigen ihre eigene i18next-Instanz, da sie in einem anderen Kontext als Client-Komponenten ausgeführt werden. Das Vorladen von Übersetzungen auf dem Server verhindert das Aufblitzen nicht übersetzter Inhalte und verbessert die SEO, indem sichergestellt wird, dass Suchmaschinen übersetzte Inhalte sehen.
239
+
240
+ ```ts fileName="src/app/i18n/server.ts"
241
+ import { createInstance } from "i18next";
242
+ import { initReactI18next } from "react-i18next/initReactI18next";
243
+ import resourcesToBackend from "i18next-resources-to-backend";
244
+ import { defaultLocale } from "@/i18n.config";
245
+ import { namespaces, type Namespace } from "@/i18n.namespaces";
246
+
247
+ // Konfigurieren des dynamischen Ressourcenladens für i18next
248
+ // Diese Funktion importiert dynamisch Übersetzungs-JSON-Dateien basierend auf Locale und Namespace
249
+ // Beispiel: locale="fr", namespace="about" -> importiert "@/locales/fr/about.json"
250
+ const backend = resourcesToBackend(
251
+ (locale: string, namespace: string) =>
252
+ import(`@/locales/${locale}/${namespace}.json`)
253
+ );
254
+
255
+ const DEFAULT_NAMESPACES = [
256
+ namespaces[0],
257
+ ] as const satisfies readonly Namespace[];
258
+
259
+ /**
260
+ * Initialisiert eine i18next-Instanz für das serverseitige Rendering
261
+ *
262
+ * @returns Initialisierte i18next-Instanz, bereit für die serverseitige Nutzung
263
+ */
264
+ export async function initI18next(
265
+ locale: string,
266
+ ns: readonly Namespace[] = DEFAULT_NAMESPACES
267
+ ) {
268
+ // Erstelle eine neue i18next-Instanz (getrennt von der Client-seitigen Instanz)
269
+ const i18n = createInstance();
270
+
271
+ // Initialisiere mit React-Integration und Backend-Lader
272
+ await i18n
273
+ .use(initReactI18next) // Ermöglicht React-Hooks-Unterstützung
274
+ .use(backend) // Ermöglicht dynamisches Laden von Ressourcen
275
+ .init({
276
+ lng: locale,
277
+ fallbackLng: defaultLocale,
278
+ ns, // Lade nur angegebene Namespaces für bessere Performance
279
+ defaultNS: "common", // Standard-Namespace, wenn keiner angegeben ist
280
+ interpolation: { escapeValue: false }, // HTML nicht escapen (React schützt vor XSS)
281
+ react: { useSuspense: false }, // Deaktiviere Suspense für SSR-Kompatibilität
282
+ returnNull: false, // Gib leeren String statt null für fehlende Schlüssel zurück
283
+ initImmediate: false, // Initialisierung verzögern, bis Ressourcen geladen sind (schnelleres SSR)
284
+ });
285
+ return i18n;
286
+ }
287
+ ```
288
+
289
+ ### Schritt 6: Erstellen des Client-seitigen i18n Providers
290
+
291
+ Erstellen Sie einen Client-Komponenten-Provider, der Ihre Anwendung mit dem i18next-Kontext umschließt. Dieser Provider erhält vorab geladene Übersetzungen vom Server, um ein Aufblitzen nicht übersetzter Inhalte (FOUC) zu verhindern und doppelte Abrufe zu vermeiden.
292
+
293
+ Client-Komponenten benötigen ihre eigene i18next-Instanz, die im Browser läuft. Durch die Annahme vorab geladener Ressourcen vom Server gewährleisten wir eine nahtlose Hydrierung und verhindern das Aufblitzen von Inhalten. Der Provider verwaltet außerdem dynamisch Sprachwechsel und das Laden von Namespaces.
294
+
295
+ ```tsx fileName="src/components/I18nProvider.tsx"
296
+ "use client";
297
+
298
+ import { useEffect, useState } from "react";
299
+ import { I18nextProvider } from "react-i18next";
300
+ import { createInstance, type ResourceLanguage } from "i18next";
301
+ import { initReactI18next } from "react-i18next/initReactI18next";
302
+ import resourcesToBackend from "i18next-resources-to-backend";
303
+ import { defaultLocale } from "@/i18n.config";
304
+ import { namespaces as allNamespaces, type Namespace } from "@/i18n.namespaces";
305
+
306
+ // Konfigurieren der dynamischen Ressourcenladung für die Client-Seite
307
+ // Gleiches Muster wie auf der Server-Seite, aber diese Instanz läuft im Browser
308
+ const backend = resourcesToBackend(
309
+ (locale: string, namespace: string) =>
310
+ import(`@/locales/${locale}/${namespace}.json`)
311
+ );
312
+
313
+ type Props = {
314
+ locale: string;
315
+ namespaces?: readonly Namespace[];
316
+ // Vom Server vorab geladene Ressourcen (verhindert FOUC - Flash of Untranslated Content)
317
+ // Format: { namespace: translationBundle }
318
+ resources?: Record<Namespace, ResourceLanguage>;
319
+ children: React.ReactNode;
320
+ };
321
+
322
+ /**
323
+ * Client-seitiger i18n-Provider, der die App mit dem i18next-Kontext umschließt
324
+ * Empfängt vorab geladene Ressourcen vom Server, um erneutes Laden der Übersetzungen zu vermeiden
325
+ */
326
+ export default function I18nProvider({
327
+ locale,
328
+ namespaces = [allNamespaces[0]] as const,
329
+ resources,
330
+ children,
331
+ }: Props) {
332
+ // Erstelle i18n-Instanz einmalig mit useState Lazy Initializer
333
+ // Dies stellt sicher, dass die Instanz nur einmal erstellt wird, nicht bei jedem Rendern
334
+ const [i18n] = useState(() => {
335
+ const i18nInstance = createInstance();
336
+
337
+ i18nInstance
338
+ .use(initReactI18next)
339
+ .use(backend)
340
+ .init({
341
+ lng: locale,
342
+ fallbackLng: defaultLocale,
343
+ ns: namespaces,
344
+ // Wenn Ressourcen (vom Server) bereitgestellt werden, verwende sie, um clientseitiges Nachladen zu vermeiden
345
+ // Dies verhindert FOUC und verbessert die anfängliche Ladeleistung
346
+ resources: resources ? { [locale]: resources } : undefined,
347
+ defaultNS: "common",
348
+ interpolation: { escapeValue: false },
349
+ react: { useSuspense: false },
350
+ returnNull: false, // Verhindert, dass undefinierte Werte zurückgegeben werden
351
+ });
352
+
353
+ return i18nInstance;
354
+ });
355
+
356
+ // Aktualisiere die Sprache, wenn sich die locale-Eigenschaft ändert
357
+ useEffect(() => {
358
+ i18n.changeLanguage(locale);
359
+ }, [locale, i18n]);
360
+
361
+ // Stelle sicher, dass alle erforderlichen Namespaces clientseitig geladen sind
362
+ // Verwendung von join("|") als Abhängigkeit, um Arrays korrekt zu vergleichen
363
+ useEffect(() => {
364
+ i18n.loadNamespaces(namespaces);
365
+ }, [namespaces.join("|"), i18n]);
366
+
367
+ // Stelle die i18n-Instanz allen untergeordneten Komponenten über den React-Kontext zur Verfügung
368
+ return <I18nextProvider i18n={i18n}>{children}</I18nextProvider>;
369
+ }
370
+ ```
371
+
372
+ ### Schritt 7: Definieren dynamischer Locale-Routen
373
+
374
+ Richte dynamisches Routing für Locales ein, indem du im App-Ordner ein Verzeichnis `[locale]` erstellst. Dadurch kann Next.js locale-basiertes Routing handhaben, bei dem jede Locale ein URL-Segment wird (z. B. `/en/about`, `/fr/about`).
375
+
376
+ Die Verwendung dynamischer Routen ermöglicht es Next.js, statische Seiten für alle Locales zur Build-Zeit zu generieren, was die Leistung und SEO verbessert. Die Layout-Komponente setzt die HTML-Attribute `lang` und `dir` basierend auf der Locale, was für Barrierefreiheit und Suchmaschinenverständnis entscheidend ist.
377
+
378
+ ```tsx fileName="src/app/[locale]/layout.tsx"
379
+ import type { ReactNode } from "react";
380
+ import { locales, defaultLocale, isRtl, type Locale } from "@/i18n.config";
381
+
382
+ // Deaktivieren dynamischer Parameter - alle Sprachen müssen zur Build-Zeit bekannt sein
383
+ // Dies gewährleistet die statische Generierung für alle Sprachrouten
384
+ export const dynamicParams = false;
385
+
386
+ /**
387
+ * Generiert statische Parameter für alle Sprachen zur Build-Zeit
388
+ * Next.js wird Seiten für jede hier zurückgegebene Sprache vorab rendern
389
+ * Beispiel: [{ locale: "en" }, { locale: "fr" }]
390
+ */
391
+ export function generateStaticParams() {
392
+ return locales.map((locale) => ({ locale }));
393
+ }
394
+
395
+ /**
396
+ * Root-Layout-Komponente, die sprachspezifische HTML-Attribute behandelt
397
+ * Setzt das lang-Attribut und die Schreibrichtung (ltr/rtl) basierend auf der Sprache
398
+ */
399
+ export default function LocaleLayout({
400
+ children,
401
+ params,
402
+ }: {
403
+ children: ReactNode;
404
+ params: { locale: string };
405
+ }) {
406
+ // Überprüfen Sie die Locale aus den URL-Parametern
407
+ // Wenn eine ungültige Locale angegeben wird, wird auf die Standard-Locale zurückgegriffen
408
+ const locale: Locale = (locales as readonly string[]).includes(params.locale)
409
+ ? (params.locale as any)
410
+ : defaultLocale;
411
+
412
+ // Bestimmen Sie die Schreibrichtung basierend auf der Locale
413
+ // RTL-Sprachen wie Arabisch benötigen dir="rtl" für die korrekte Textdarstellung
414
+ const dir = isRtl(locale) ? "rtl" : "ltr";
415
+
416
+ return (
417
+ <html lang={locale} dir={dir}>
418
+ <body>{children}</body>
419
+ </html>
420
+ );
421
+ }
422
+ ```
423
+
424
+ ### Schritt 8: Erstellen Sie Ihre Übersetzungsdateien
425
+
426
+ Erstellen Sie JSON-Dateien für jede Locale und jeden Namespace. Diese Struktur ermöglicht es Ihnen, Übersetzungen logisch zu organisieren und nur das zu laden, was Sie für jede Seite benötigen.
427
+
428
+ Die Organisation der Übersetzungen nach Namespace (z. B. `common.json`, `about.json`) ermöglicht Code-Splitting und reduziert die Bundle-Größe. So werden nur die Übersetzungen geladen, die für jede Seite benötigt werden, was die Performance verbessert.
429
+
430
+ ```json fileName="src/locales/en/common.json"
431
+ {
432
+ "appTitle": "Next.js i18n App",
433
+ "appDescription": "Example Next.js application with internationalization using i18next"
434
+ }
435
+ ```
436
+
437
+ ```json fileName="src/locales/fr/common.json"
438
+ {
439
+ "appTitle": "Application Next.js i18n",
440
+ "appDescription": "Exemple d'application Next.js avec internationalisation utilisant i18next"
441
+ }
442
+ ```
443
+
444
+ ```json fileName="src/locales/en/home.json"
445
+ {
446
+ "title": "Home",
447
+ "description": "Home page description",
448
+ "welcome": "Welcome",
449
+ "greeting": "Hello, world!",
450
+ "aboutPage": "About Page",
451
+ "documentation": "Documentation"
452
+ }
453
+ ```
454
+
455
+ Organisieren von Übersetzungen nach Namespace (z. B. `common.json`, `about.json`) ermöglicht Code-Splitting und reduziert die Bundle-Größe. Sie laden nur die Übersetzungen, die für jede Seite benötigt werden, was die Leistung verbessert.
456
+
457
+ ```json fileName="src/locales/en/common.json"
458
+ {
459
+ "appTitle": "Next.js i18n App",
460
+ "appDescription": "Beispiel einer Next.js-Anwendung mit Internationalisierung unter Verwendung von i18next"
461
+ }
462
+ ```
463
+
464
+ ```json fileName="src/locales/de/common.json"
465
+ {
466
+ "appTitle": "Next.js i18n App",
467
+ "appDescription": "Beispiel einer Next.js-Anwendung mit Internationalisierung unter Verwendung von i18next"
468
+ }
469
+ ```
470
+
471
+ ```json fileName="src/locales/en/home.json"
472
+ {
473
+ "title": "Home",
474
+ "description": "Home page description",
475
+ "welcome": "Welcome",
476
+ "greeting": "Hello, world!",
477
+ "aboutPage": "About Page",
478
+ "documentation": "Documentation"
479
+ }
480
+ ```
481
+
482
+ ```json fileName="src/locales/de/home.json"
483
+ {
484
+ "title": "Startseite",
485
+ "description": "Beschreibung der Startseite",
486
+ "welcome": "Willkommen",
487
+ "greeting": "Hallo, Welt!",
488
+ "aboutPage": "Über Seite",
489
+ "documentation": "Dokumentation"
490
+ }
491
+ ```
492
+
493
+ ```json fileName="src/locales/en/about.json"
494
+ {
495
+ "title": "About",
496
+ "description": "About page description",
497
+ "counter": {
498
+ "label": "Counter",
499
+ "increment": "Increment",
500
+ "description": "Click the button to increase the counter"
501
+ }
502
+ }
503
+ ```
504
+
505
+ ```json fileName="src/locales/de/about.json"
506
+ {
507
+ "title": "Über",
508
+ "description": "Beschreibung der Über-Seite",
509
+ "counter": {
510
+ "label": "Zähler",
511
+ "increment": "Erhöhen",
512
+ "description": "Klicken Sie auf die Schaltfläche, um den Zähler zu erhöhen"
513
+ }
514
+ }
515
+ ```
516
+
517
+ ### Schritt 9: Übersetzungen in Ihren Seiten verwenden
518
+
519
+ Erstellen Sie eine Seitenkomponente, die i18next auf dem Server initialisiert und Übersetzungen sowohl an Server- als auch an Client-Komponenten übergibt. Dies stellt sicher, dass Übersetzungen vor dem Rendern geladen werden und verhindert das Aufblitzen von Inhalten.
520
+
521
+ Die serverseitige Initialisierung lädt Übersetzungen, bevor die Seite gerendert wird, verbessert SEO und verhindert FOUC (Flash of Unstyled Content). Durch das Übergeben der vorab geladenen Ressourcen an den Client-Provider vermeiden wir doppelte Abfragen und gewährleisten eine reibungslose Hydrierung.
522
+
523
+ ```tsx fileName="src/app/[locale]/about/index.tsx"
524
+ import I18nProvider from "@/components/I18nProvider";
525
+ import { initI18next } from "@/app/i18n/server";
526
+ import type { Locale } from "@/i18n.config";
527
+ import { namespaces as allNamespaces, type Namespace } from "@/i18n.namespaces";
528
+ import type { ResourceLanguage } from "i18next";
529
+ import ClientComponent from "@/components/ClientComponent";
530
+ import ServerComponent from "@/components/ServerComponent";
531
+
532
+ /**
533
+ * Server-Komponenten-Seite, die die i18n-Initialisierung übernimmt
534
+ * Lädt Übersetzungen auf dem Server vor und übergibt sie an Client-Komponenten
535
+ */
536
+ export default async function AboutPage({
537
+ params: { locale },
538
+ }: {
539
+ params: { locale: Locale };
540
+ }) {
541
+ // Definiert, welche Übersetzungs-Namespaces diese Seite benötigt
542
+ // Wiederverwendung der zentralen Liste für Typsicherheit und Autovervollständigung
543
+ const pageNamespaces = allNamespaces;
544
+
545
+ // Initialisiert i18next auf dem Server mit den benötigten Namespaces
546
+ // Lädt Übersetzungs-JSON-Dateien serverseitig
547
+ const i18n = await initI18next(locale, pageNamespaces);
548
+
549
+ // Eine feste Übersetzungsfunktion für den Namespace "about" erhalten
550
+ // getFixedT sperrt den Namespace, sodass t("title") statt t("about:title") verwendet wird
551
+ const tAbout = i18n.getFixedT(locale, "about");
552
+
553
+ // Übersetzungs-Bundles aus der i18n-Instanz extrahieren
554
+ // Diese Daten werden an den I18nProvider übergeben, um das clientseitige i18n zu hydratisieren
555
+ // Verhindert FOUC (Flash of Untranslated Content) und vermeidet doppelte Abfragen
556
+ const resources = Object.fromEntries(
557
+ pageNamespaces.map((ns) => [ns, i18n.getResourceBundle(locale, ns)])
558
+ ) satisfies Record<Namespace, ResourceLanguage>;
559
+
560
+ return (
561
+ <I18nProvider
562
+ locale={locale}
563
+ namespaces={pageNamespaces}
564
+ resources={resources}
565
+ >
566
+ <main>
567
+ <h1>{tAbout("title")}</h1>
568
+
569
+ <ClientComponent />
570
+ <ServerComponent t={tAbout} locale={locale} count={0} />
571
+ </main>
572
+ </I18nProvider>
573
+ );
574
+ }
575
+ ```
576
+
577
+ ### Schritt 10: Übersetzungen in Client-Komponenten verwenden
578
+
579
+ Client-Komponenten können den `useTranslation` Hook verwenden, um auf Übersetzungen zuzugreifen. Dieser Hook bietet Zugriff auf die Übersetzungsfunktion und die i18n-Instanz, wodurch Sie Inhalte übersetzen und auf Locale-Informationen zugreifen können.
580
+
581
+ Client-Komponenten benötigen React-Hooks, um Übersetzungen zu nutzen. Der `useTranslation` Hook integriert sich nahtlos mit i18next und bietet reaktive Updates, wenn sich die Locale ändert.
582
+
583
+ > Stellen Sie sicher, dass die Seite/der Provider nur die benötigten Namespaces enthält (z. B. `about`).
584
+ > Wenn Sie React < 19 verwenden, memoizieren Sie schwere Formatter wie `Intl.NumberFormat`.
585
+
586
+ ```tsx fileName="src/components/ClientComponent.tsx"
587
+ "use client";
588
+
589
+ import { useState } from "react";
590
+ import { useTranslation } from "react-i18next";
591
+
592
+ /**
593
+ * Beispiel für eine Client-Komponente, die React-Hooks für Übersetzungen verwendet
594
+ * Kann Hooks wie useState, useEffect und useTranslation verwenden
595
+ */
596
+ const ClientComponent = () => {
597
+ // useTranslation-Hook bietet Zugriff auf die Übersetzungsfunktion und die i18n-Instanz
598
+ // Namespace angeben, um nur Übersetzungen für den Namespace "about" zu laden
599
+ const { t, i18n } = useTranslation("about");
600
+ const [count, setCount] = useState(0);
601
+
602
+ // Erstelle einen lokalisierungsspezifischen Zahlenformatierer
603
+ // i18n.language liefert die aktuelle Locale (z.B. "en", "fr")
604
+ // Intl.NumberFormat formatiert Zahlen entsprechend den lokalen Konventionen
605
+ const numberFormat = new Intl.NumberFormat(i18n.language);
606
+
607
+ return (
608
+ <div className="flex flex-col items-center gap-4">
609
+ {/* Nummer mit lokalisierungsspezifischem Format formatieren */}
610
+ <p className="text-5xl font-bold text-white m-0">
611
+ {numberFormat.format(count)}
612
+ </p>
613
+ <button
614
+ type="button"
615
+ className="flex h-12 w-full items-center justify-center gap-2 rounded-full bg-foreground px-5 text-background transition-colors hover:bg-[#383838] dark:hover:bg-[#ccc] md:w-[158px]"
616
+ aria-label={t("counter.label")}
617
+ onClick={() => setCount((c) => c + 1)}
618
+ >
619
+ {t("counter.increment")}
620
+ </button>
621
+ </div>
622
+ );
623
+ };
624
+
625
+ export default ClientComponent;
626
+ ```
627
+
628
+ ### Schritt 11: Übersetzungen in Server-Komponenten verwenden
629
+
630
+ Server-Komponenten können keine React-Hooks verwenden, daher erhalten sie Übersetzungen über Props von ihren übergeordneten Komponenten. Dieser Ansatz hält Server-Komponenten synchron und ermöglicht es, sie innerhalb von Client-Komponenten zu verschachteln.
631
+
632
+ Server-Komponenten, die möglicherweise unter Client-Grenzen verschachtelt sind, müssen synchron sein. Durch das Übergeben von übersetzten Strings und Locale-Informationen als Props vermeiden wir asynchrone Operationen und gewährleisten eine korrekte Darstellung.
633
+
634
+ ```tsx fileName="src/components/ServerComponent.tsx"
635
+ import type { TFunction } from "i18next";
636
+
637
+ type ServerComponentProps = {
638
+ // Übersetzungsfunktion, die von der übergeordneten Server-Komponente übergeben wird
639
+ // Server-Komponenten können keine Hooks verwenden, daher kommen Übersetzungen über Props
640
+ t: TFunction<"about">;
641
+ locale: string;
642
+ count: number;
643
+ };
644
+
645
+ /**
646
+ * Beispiel für eine Server-Komponente – erhält Übersetzungen als Props
647
+ * Kann innerhalb von Client-Komponenten (asynchrone Server-Komponenten) verschachtelt werden
648
+ * Kann keine React-Hooks verwenden, daher müssen alle Daten über Props oder asynchrone Operationen kommen
649
+ */
650
+ const ServerComponent = ({ t, locale, count }: ServerComponentProps) => {
651
+ // Zahl serverseitig mit Locale formatieren
652
+ // Dies läuft auf dem Server während SSR und verbessert die initiale Seitenladezeit
653
+ const formatted = new Intl.NumberFormat(locale).format(count);
654
+
655
+ return (
656
+ <div className="flex flex-col items-center gap-4">
657
+ <p className="text-5xl font-bold text-white m-0">{formatted}</p>
658
+ {/* Übersetzungsfunktion verwenden, die als Prop übergeben wurde */}
659
+ <div className="flex flex-col items-center gap-2">
660
+ <span className="text-xl font-semibold text-white">
661
+ {t("counter.label")}
662
+ </span>
663
+ <span className="text-sm opacity-80 italic">
664
+ {t("counter.description")}
665
+ </span>
666
+ </div>
667
+ </div>
668
+ );
669
+ };
670
+
671
+ export default ServerComponent;
672
+ ```
673
+
674
+ ---
675
+
676
+ ### (Optional) Schritt 12: Ändern Sie die Sprache Ihres Inhalts
677
+
678
+ Um die Sprache Ihres Inhalts in Next.js zu ändern, wird empfohlen, URLs mit Sprachpräfix und Next.js-Links zu verwenden. Das folgende Beispiel liest die aktuelle Sprache aus der Route aus, entfernt sie aus dem Pfadnamen und rendert einen Link pro verfügbarer Sprache.
679
+
680
+ ```tsx fileName="src/components/LocaleSwitcher.tsx"
681
+ "use client";
682
+
683
+ import Link from "next/link";
684
+ import { useParams, usePathname } from "next/navigation";
685
+ import { useMemo } from "react";
686
+ import { defaultLocale, getCookie, type Locale, locales } from "@/i18n.config";
687
+
688
+ export default function LocaleSwitcher() {
689
+ const params = useParams();
690
+ const pathname = usePathname();
691
+
692
+ const activeLocale = (params?.locale as Locale | undefined) ?? defaultLocale;
693
+
694
+ const getLocaleLabel = (locale: Locale): string => {
695
+ try {
696
+ const displayNames = new Intl.DisplayNames([locale], {
697
+ type: "language",
698
+ });
699
+ return displayNames.of(locale) ?? locale.toUpperCase();
700
+ } catch {
701
+ return locale.toUpperCase();
702
+ }
703
+ };
704
+
705
+ const basePath = useMemo(() => {
706
+ if (!pathname) return "/";
707
+
708
+ const segments = pathname.split("/").filter(Boolean);
709
+
710
+ if (segments.length === 0) return "/";
711
+
712
+ const maybeLocale = segments[0] as Locale;
713
+
714
+ if ((locales as readonly string[]).includes(maybeLocale)) {
715
+ const rest = segments.slice(1).join("/");
716
+ return rest ? `/${rest}` : "/";
717
+ }
718
+
719
+ return pathname;
720
+ }, [pathname]);
721
+
722
+ return (
723
+ <nav aria-label="Sprachauswahl">
724
+ {(locales as readonly Locale[]).map((locale) => {
725
+ const isActive = locale === activeLocale;
726
+
727
+ const href =
728
+ locale === defaultLocale ? basePath : `/${locale}${basePath}`;
729
+
730
+ return (
731
+ <Link
732
+ key={locale}
733
+ href={href}
734
+ aria-current={isActive ? "page" : undefined}
735
+ onClick={() => {
736
+ document.cookie = getCookie(locale);
737
+ }}
738
+ >
739
+ {getLocaleLabel(locale)}
740
+ </Link>
741
+ );
742
+ })}
743
+ </nav>
744
+ );
745
+ }
746
+ ```
747
+
748
+ ### (Optional) Schritt 13: Erstellen einer lokalisierten Link-Komponente
749
+
750
+ Die Wiederverwendung lokalisierter URLs in Ihrer App sorgt für eine konsistente Navigation und ist SEO-freundlich. Verpacken Sie `next/link` in einem kleinen Helfer, der interne Routen mit der aktiven Locale voranstellt, während externe URLs unverändert bleiben.
751
+
752
+ ```tsx fileName="src/components/LocalizedLink.tsx"
753
+ "use client";
754
+
755
+ import NextLink, { type LinkProps } from "next/link";
756
+ import { useParams } from "next/navigation";
757
+ import type { ComponentProps, PropsWithChildren } from "react";
758
+ import {
759
+ defaultLocale,
760
+ type Locale,
761
+ locales,
762
+ localizedPath,
763
+ } from "@/i18n.config";
764
+
765
+ const isExternal = (href: string) => /^https?:\/\//.test(href);
766
+
767
+ type LocalizedLinkProps = PropsWithChildren<
768
+ Omit<LinkProps, "href"> &
769
+ Omit<ComponentProps<"a">, "href"> & { href: string; locale?: Locale }
770
+ >;
771
+
772
+ export default function LocalizedLink({
773
+ href,
774
+ locale,
775
+ children,
776
+ ...props
777
+ }: LocalizedLinkProps) {
778
+ const params = useParams();
779
+ const fallback = (params?.locale as Locale | undefined) ?? defaultLocale;
780
+ const normalizedLocale = (locales as readonly string[]).includes(fallback)
781
+ ? ((locale ?? fallback) as Locale)
782
+ : defaultLocale;
783
+
784
+ const normalizedPath = href.startsWith("/") ? href : `/${href}`;
785
+ const localizedHref = isExternal(href)
786
+ ? href
787
+ : localizedPath(normalizedLocale, normalizedPath);
788
+
789
+ return (
790
+ <NextLink href={localizedHref} {...props}>
791
+ {children}
792
+ </NextLink>
793
+ );
794
+ }
795
+ ```
796
+
797
+ > Tipp: Da `LocalizedLink` ein Drop-in-Ersatz ist, migrieren Sie schrittweise, indem Sie Importe austauschen und die Komponente die sprachspezifischen URLs verwalten lassen.
798
+
799
+ ### (Optional) Schritt 14: Zugriff auf die aktive Locale innerhalb von Server Actions
800
+
801
+ Server Actions benötigen oft die aktuelle Locale für E-Mails, Protokollierung oder Integrationen von Drittanbietern. Kombinieren Sie das von Ihrem Proxy gesetzte Locale-Cookie mit dem `Accept-Language`-Header als Fallback.
802
+
803
+ ```ts fileName="src/app/actions/get-current-locale.ts"
804
+ "use server";
805
+
806
+ import { cookies, headers } from "next/headers";
807
+ import { defaultLocale, locales, type Locale } from "@/i18n.config";
808
+
809
+ const KNOWN_LOCALES = new Set(locales as readonly string[]);
810
+
811
+ const normalize = (value: string | undefined): Locale | undefined => {
812
+ if (!value) return undefined;
813
+ const base = value.toLowerCase().split("-")[0];
814
+ return KNOWN_LOCALES.has(base) ? (base as Locale) : undefined;
815
+ };
816
+
817
+ export async function getCurrentLocale(): Promise<Locale> {
818
+ const cookieLocale = normalize(cookies().get("NEXT_LOCALE")?.value);
819
+
820
+ if (cookieLocale) return cookieLocale;
821
+
822
+ const headerLocale = normalize(headers().get("accept-language"));
823
+ return headerLocale ?? defaultLocale;
824
+ }
825
+
826
+ // Beispiel für eine Server-Action, die die aktuelle Locale verwendet
827
+ export async function stuffFromServer(formData: FormData) {
828
+ const locale = await getCurrentLocale();
829
+
830
+ // Verwenden Sie die Locale für lokalisierte Nebeneffekte (E-Mails, CRM usw.)
831
+ console.log(`Daten vom Server mit Locale ${locale}`);
832
+ }
833
+ ```
834
+
835
+ > Da der Helfer auf Next.js-Cookies und -Headern basiert, funktioniert er in Route Handlers, Server Actions und anderen serverseitigen Kontexten.
836
+
837
+ ### (Optional) Schritt 15: Internationalisieren Sie Ihre Metadaten
838
+
839
+ Die Übersetzung von Inhalten ist wichtig, aber das Hauptziel der Internationalisierung ist es, Ihre Website für die Welt sichtbarer zu machen. I18n ist ein unglaublicher Hebel, um die Sichtbarkeit Ihrer Website durch richtiges SEO zu verbessern.
840
+
841
+ Richtig internationalisierte Metadaten helfen Suchmaschinen zu verstehen, welche Sprachen auf Ihren Seiten verfügbar sind. Dazu gehört das Setzen von hreflang-Meta-Tags, das Übersetzen von Titeln und Beschreibungen sowie die korrekte Festlegung von kanonischen URLs für jede Locale.
842
+
843
+ Hier ist eine Liste bewährter Praktiken im Hinblick auf mehrsprachiges SEO:
844
+
845
+ - Setzen Sie hreflang-Meta-Tags im `<head>`-Tag, um Suchmaschinen zu helfen, die verfügbaren Sprachen auf der Seite zu verstehen.
846
+ - Listen Sie alle Seitenübersetzungen in der sitemap.xml unter Verwendung des `http://www.w3.org/1999/xhtml` XML-Schemas auf.
847
+ - Vergessen Sie nicht, vorangestellte Seiten in der robots.txt auszuschließen (z. B. `/dashboard`, `/fr/dashboard`, `/es/dashboard`).
848
+ - Verwenden Sie eine benutzerdefinierte Link-Komponente, um auf die am besten lokalisierte Seite weiterzuleiten (z. B. auf Französisch `<a href="/fr/about">À propos</a>`).
849
+
850
+ Entwickler vergessen oft, ihre Seiten über verschiedene Sprachen hinweg korrekt zu referenzieren. Lassen Sie uns das beheben:
851
+
852
+ ```tsx fileName="src/app/[locale]/about/layout.tsx"
853
+ import type { Metadata } from "next";
854
+ import {
855
+ locales,
856
+ defaultLocale,
857
+ localizedPath,
858
+ absoluteUrl,
859
+ } from "@/i18n.config";
860
+
861
+ /**
862
+ * Generiert SEO-Metadaten für jede Sprachversion der Seite
863
+ * Diese Funktion wird für jede Locale zur Build-Zeit ausgeführt
864
+ */
865
+ export async function generateMetadata({
866
+ params,
867
+ }: {
868
+ params: { locale: string };
869
+ }): Promise<Metadata> {
870
+ const { locale } = params;
871
+
872
+ // Dynamisch die Übersetzungsdatei für diese Locale importieren
873
+ // Wird verwendet, um den übersetzten Titel und die Beschreibung für die Metadaten zu erhalten
874
+ const messages = (await import(`@/locales/${locale}/about.json`)).default;
875
+
876
+ // Erstelle eine hreflang-Zuordnung für alle Locales
877
+ // Hilft Suchmaschinen, Sprachalternativen zu verstehen
878
+ // Format: { "en": "/about", "fr": "/fr/about" }
879
+ const languages = Object.fromEntries(
880
+ locales.map((locale) => [locale, localizedPath(locale, "/about")])
881
+ );
882
+
883
+ return {
884
+ title: messages.title,
885
+ description: messages.description,
886
+ alternates: {
887
+ // Kanonische URL für diese Lokalisierungsversion
888
+ canonical: absoluteUrl(locale, "/about"),
889
+ // Sprachalternativen für SEO (hreflang-Tags)
890
+ // "x-default" gibt die Standard-Lokalisierungsversion an
891
+ languages: {
892
+ ...languages,
893
+ "x-default": absoluteUrl(defaultLocale, "/about"),
894
+ },
895
+ },
896
+ };
897
+ }
898
+
899
+ export default async function AboutPage() {
900
+ return <h1>Über</h1>;
901
+ }
902
+ ```
903
+
904
+ ### (Optional) Schritt 16: Internationalisieren Sie Ihre Sitemap
905
+
906
+ Erstellen Sie eine Sitemap, die alle Lokalisierungsversionen Ihrer Seiten enthält. Dies hilft Suchmaschinen, alle Sprachversionen Ihrer Inhalte zu entdecken und zu indexieren.
907
+
908
+ Eine korrekt internationalisierte Sitemap stellt sicher, dass Suchmaschinen alle Sprachversionen Ihrer Seiten finden und indexieren können. Dies verbessert die Sichtbarkeit in internationalen Suchergebnissen.
909
+
910
+ ```ts fileName="src/app/sitemap.ts"
911
+ import type { MetadataRoute } from "next";
912
+ import { defaultLocale, locales } from "@/i18n";
913
+
914
+ const origin = "https://example.com";
915
+
916
+ const formatterLocalizedPath = (locale: string, path: string) =>
917
+ locale === defaultLocale ? `${origin}${path}` : `${origin}/${locale}${path}`;
918
+
919
+ /**
920
+ * Gibt eine Map aller Locales und ihrer lokalisierten Pfade zurück
921
+ *
922
+ * Beispielausgabe:
923
+ * {
924
+ * "en": "https://example.com",
925
+ * "fr": "https://example.com/fr",
926
+ * "es": "https://example.com/es",
927
+ * "x-default": "https://example.com"
928
+ * }
929
+ */
930
+ const getLocalizedMap = (path: string) =>
931
+ Object.fromEntries([
932
+ ...locales.map((locale) => [locale, formatterLocalizedPath(locale, path)]),
933
+ ["x-default", formatterLocalizedPath(defaultLocale, path)],
934
+ ]);
935
+
936
+ // Sitemap mit allen Sprachvarianten für bessere SEO generieren
937
+ // Das Feld "alternates" informiert Suchmaschinen über Sprachversionen
938
+ export default function sitemap(): MetadataRoute.Sitemap {
939
+ return [
940
+ {
941
+ url: formatterLocalizedPath(defaultLocale, "/"),
942
+ lastModified: new Date(),
943
+ changeFrequency: "monatlich",
944
+ priority: 1.0,
945
+ alternates: { languages: getLocalizedMap("/") },
946
+ },
947
+ {
948
+ url: formatterLocalizedPath(defaultLocale, "/about"),
949
+ lastModified: new Date(),
950
+ changeFrequency: "monatlich",
951
+ priority: 0.7,
952
+ alternates: { languages: getLocalizedMap("/about") },
953
+ },
954
+ ];
955
+ }
956
+ ```
957
+
958
+ ### (Optional) Schritt 17: Internationalisieren Sie Ihre robots.txt
959
+
960
+ Erstellen Sie eine robots.txt-Datei, die alle Sprachversionen Ihrer geschützten Routen korrekt behandelt. Dies stellt sicher, dass Suchmaschinen keine Admin- oder Dashboard-Seiten in irgendeiner Sprache indexieren.
961
+
962
+ Die korrekte Konfiguration der robots.txt für alle Sprachen verhindert, dass Suchmaschinen sensible Seiten in irgendeiner Sprache indexieren. Dies ist entscheidend für Sicherheit und Datenschutz.
963
+
964
+ ```ts fileName="src/app/robots.ts"
965
+ import type { MetadataRoute } from "next";
966
+ import { defaultLocale, locales } from "@/i18n";
967
+
968
+ const origin = "https://example.com";
969
+
970
+ // Generiert Pfade für alle Sprachen (z.B. /admin, /fr/admin, /es/admin)
971
+ const withAllLocales = (path: string) => [
972
+ path,
973
+ ...locales
974
+ .filter((locale) => locale !== defaultLocale)
975
+ .map((locale) => `/${locale}${path}`),
976
+ ];
977
+
978
+ const disallow = [...withAllLocales("/dashboard"), ...withAllLocales("/admin")];
979
+
980
+ export default function robots(): MetadataRoute.Robots {
981
+ return {
982
+ rules: { userAgent: "*", allow: ["/"], disallow },
983
+ host: origin,
984
+ sitemap: `${origin}/sitemap.xml`,
985
+ };
986
+ }
987
+ ```
988
+
989
+ ### (Optional) Schritt 18: Middleware für Locale Routing einrichten
990
+
991
+ Erstellen Sie einen Proxy, der automatisch die bevorzugte Sprache des Benutzers erkennt und ihn zur entsprechenden URL mit Sprachpräfix weiterleitet. Dies verbessert die Benutzererfahrung, indem Inhalte in der bevorzugten Sprache angezeigt werden.
992
+
993
+ Die Middleware sorgt dafür, dass Benutzer beim Besuch Ihrer Seite automatisch auf ihre bevorzugte Sprache weitergeleitet werden. Außerdem wird die Präferenz des Benutzers in einem Cookie für zukünftige Besuche gespeichert.
994
+
995
+ ```ts fileName="src/proxy.ts"
996
+ import { NextResponse, type NextRequest } from "next/server";
997
+ import { defaultLocale, locales } from "@/i18n.config";
998
+
999
+ // Regex zum Abgleich von Dateien mit Erweiterungen (z.B. .js, .css, .png)
1000
+ // Wird verwendet, um statische Assets vom Locale-Routing auszuschließen
1001
+ const PUBLIC_FILE = /\.[^/]+$/;
1002
+
1003
+ /**
1004
+ * Extrahiert die Locale aus dem Accept-Language Header
1005
+ * Unterstützt Formate wie "fr-CA", "en-US" usw.
1006
+ * Fällt auf die Standard-Locale zurück, wenn die Browsersprache nicht unterstützt wird
1007
+ */
1008
+ const pickLocale = (accept: string | null) => {
1009
+ // Erste Sprachpräferenz erhalten (z.B. "fr-CA" aus "fr-CA,en-US;q=0.9")
1010
+ const raw = accept?.split(",")[0] ?? defaultLocale;
1011
+ // Basis-Sprachcode extrahieren (z.B. "fr" aus "fr-CA")
1012
+ const base = raw.toLowerCase().split("-")[0];
1013
+ // Prüfen, ob diese Locale unterstützt wird, sonst Standard verwenden
1014
+ return (locales as readonly string[]).includes(base) ? base : defaultLocale;
1015
+ };
1016
+
1017
+ /**
1018
+ * Next.js Proxy für die Lokalerkennung und Routing
1019
+ * Wird bei jeder Anfrage vor dem Rendern der Seite ausgeführt
1020
+ * Leitet automatisch zu URLs mit Locale-Präfix weiter, wenn nötig
1021
+ */
1022
+ export function proxy(request: NextRequest) {
1023
+ const { pathname } = request.nextUrl;
1024
+
1025
+ // Proxy für Next.js-Interna, API-Routen und statische Dateien überspringen
1026
+ // Diese sollten kein Locale-Präfix haben
1027
+ if (
1028
+ pathname.startsWith("/_next") ||
1029
+ pathname.startsWith("/api") ||
1030
+ pathname.startsWith("/static") ||
1031
+ PUBLIC_FILE.test(pathname)
1032
+ ) {
1033
+ return;
1034
+ }
1035
+
1036
+ // Prüfen, ob die URL bereits ein Locale-Präfix hat
1037
+ // Beispiel: "/fr/about" oder "/en" würde true zurückgeben
1038
+ const hasLocale = (locales as readonly string[]).some(
1039
+ (locale) => pathname === `/${locale}` || pathname.startsWith(`/${locale}/`)
1040
+ );
1041
+
1042
+ // Wenn kein Locale-Präfix vorhanden ist, Locale erkennen und umleiten
1043
+ if (!hasLocale) {
1044
+ // Versuche zuerst, die Locale aus dem Cookie zu erhalten (Benutzereinstellung)
1045
+ const cookieLocale = request.cookies.get("NEXT_LOCALE")?.value;
1046
+
1047
+ // Verwende die Cookie-Locale, wenn gültig, andernfalls aus den Browser-Headern erkennen
1048
+ const locale =
1049
+ cookieLocale && (locales as readonly string[]).includes(cookieLocale)
1050
+ ? cookieLocale
1051
+ : pickLocale(request.headers.get("accept-language"));
1052
+
1053
+ // URL klonen, um den Pfadnamen zu ändern
1054
+ const url = request.nextUrl.clone();
1055
+ // Locale-Präfix zum Pfadnamen hinzufügen
1056
+ // Root-Pfad speziell behandeln, um doppelten Schrägstrich zu vermeiden
1057
+ url.pathname = `/${locale}${pathname === "/" ? "" : pathname}`;
1058
+
1059
+ // Erstelle eine Redirect-Antwort und setze das Locale-Cookie
1060
+ const res = NextResponse.redirect(url);
1061
+ res.cookies.set("NEXT_LOCALE", locale, { path: "/" });
1062
+ return res;
1063
+ }
1064
+ }
1065
+
1066
+ export const config = {
1067
+ matcher: [
1068
+ // Passe alle Pfade an, außer:
1069
+ // - API-Routen (/api/*)
1070
+ // - Next.js interne Pfade (/_next/*)
1071
+ // - Statische Dateien (/static/*)
1072
+ // - Dateien mit Erweiterungen (.*\\..*)
1073
+ "/((?!api|_next|static|.*\\..*).*)",
1074
+ ],
1075
+ };
1076
+ ```
1077
+
1078
+ ### (Optional) Schritt 19: Automatisieren Sie Ihre Übersetzungen mit Intlayer
1079
+
1080
+ Intlayer ist eine **kostenlose** und **Open-Source**-Bibliothek, die den Lokalisierungsprozess in Ihrer Anwendung unterstützt. Während i18next das Laden und Verwalten von Übersetzungen übernimmt, hilft Intlayer dabei, den Übersetzungsworkflow zu automatisieren.
1081
+
1082
+ Die manuelle Verwaltung von Übersetzungen kann zeitaufwändig und fehleranfällig sein. Intlayer automatisiert das Testen, Erstellen und Verwalten von Übersetzungen, spart Ihnen Zeit und sorgt für Konsistenz in Ihrer gesamten Anwendung.
1083
+
1084
+ Intlayer ermöglicht Ihnen:
1085
+
1086
+ - **Deklarieren Sie Ihre Inhalte dort, wo Sie möchten, in Ihrem Codebase**
1087
+ Intlayer erlaubt es, Ihre Inhalte dort zu deklarieren, wo Sie möchten, in Ihrer Codebase unter Verwendung von `.content.{ts|js|json}`-Dateien. Dies ermöglicht eine bessere Organisation Ihrer Inhalte und sorgt für eine bessere Lesbarkeit und Wartbarkeit Ihrer Codebase.
1088
+
1089
+ - **Testen fehlender Übersetzungen**
1090
+ Intlayer stellt Testfunktionen bereit, die in Ihre CI/CD-Pipeline oder in Ihre Unit-Tests integriert werden können. Erfahren Sie mehr über das [Testen Ihrer Übersetzungen](https://github.com/aymericzip/intlayer/blob/main/docs/docs/de/testing.md).
1091
+
1092
+ - **Automatisieren Sie Ihre Übersetzungen**
1093
+ Intlayer bietet eine CLI und eine VSCode-Erweiterung, um Ihre Übersetzungen zu automatisieren. Diese können in Ihre CI/CD-Pipeline integriert werden. Erfahren Sie mehr über das [Automatisieren Ihrer Übersetzungen](https://github.com/aymericzip/intlayer/blob/main/docs/docs/de/intlayer_cli.md).
1094
+ Sie können Ihren **eigenen API-Schlüssel und den KI-Anbieter Ihrer Wahl** verwenden. Es werden auch kontextbewusste Übersetzungen bereitgestellt, siehe [Inhalt automatisch ausfüllen](https://github.com/aymericzip/intlayer/blob/main/docs/docs/de/autoFill.md).
1095
+
1096
+ - **Externe Inhalte verbinden**
1097
+ - **Automatisieren Sie Ihre Übersetzungen**
1098
+ Intlayer bietet eine CLI und eine VSCode-Erweiterung, um Ihre Übersetzungen zu automatisieren. Diese können in Ihre CI/CD-Pipeline integriert werden. Erfahren Sie mehr über das [Automatisieren Ihrer Übersetzungen](https://github.com/aymericzip/intlayer/blob/main/docs/docs/de/intlayer_cli.md).
1099
+ Sie können Ihren **eigenen API-Schlüssel und den AI-Anbieter Ihrer Wahl** verwenden. Es werden auch kontextbewusste Übersetzungen angeboten, siehe [Inhalt automatisch ausfüllen](https://github.com/aymericzip/intlayer/blob/main/docs/docs/de/autoFill.md).
1100
+
1101
+ - **Externe Inhalte anbinden**
1102
+ Intlayer ermöglicht es Ihnen, Ihre Inhalte mit einem externen Content-Management-System (CMS) zu verbinden. Um diese auf optimierte Weise abzurufen und in Ihre JSON-Ressourcen einzufügen. Erfahren Sie mehr über das [Abrufen externer Inhalte](https://github.com/aymericzip/intlayer/blob/main/docs/docs/de/dictionary/function_fetching.md).
1103
+
1104
+ - **Visueller Editor**
1105
+ Intlayer bietet einen kostenlosen visuellen Editor, um Ihre Inhalte visuell zu bearbeiten. Erfahren Sie mehr über das [visuelle Bearbeiten Ihrer Übersetzungen](https://github.com/aymericzip/intlayer/blob/main/docs/docs/de/intlayer_visual_editor.md).
1106
+
1107
+ Und mehr. Um alle von Intlayer bereitgestellten Funktionen zu entdecken, lesen Sie bitte die [Interessen der Intlayer-Dokumentation](https://github.com/aymericzip/intlayer/blob/main/docs/docs/de/interest_of_intlayer.md).