@intlayer/docs 7.1.0-canary.2 → 7.1.1-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 (176) hide show
  1. package/blog/ar/internationalization_and_SEO.md +0 -4
  2. package/blog/ar/next-i18next_vs_next-intl_vs_intlayer.md +2 -2
  3. package/blog/de/internationalization_and_SEO.md +0 -2
  4. package/blog/en/internationalization_and_SEO.md +0 -2
  5. package/blog/en/next-i18next_vs_next-intl_vs_intlayer.md +2 -2
  6. package/blog/en-GB/internationalization_and_SEO.md +0 -2
  7. package/blog/es/internationalization_and_SEO.md +0 -4
  8. package/blog/fr/internationalization_and_SEO.md +0 -2
  9. package/blog/hi/internationalization_and_SEO.md +0 -2
  10. package/blog/id/next-i18next_vs_next-intl_vs_intlayer.md +2 -2
  11. package/blog/it/internationalization_and_SEO.md +0 -2
  12. package/blog/ja/internationalization_and_SEO.md +0 -2
  13. package/blog/ko/internationalization_and_SEO.md +0 -2
  14. package/blog/pl/next-i18next_vs_next-intl_vs_intlayer.md +2 -2
  15. package/blog/pt/internationalization_and_SEO.md +0 -4
  16. package/blog/ru/internationalization_and_SEO.md +0 -4
  17. package/blog/vi/next-i18next_vs_next-intl_vs_intlayer.md +2 -2
  18. package/blog/zh/internationalization_and_SEO.md +0 -4
  19. package/docs/ar/intlayer_with_nextjs_14.md +9 -9
  20. package/docs/ar/intlayer_with_nextjs_15.md +9 -8
  21. package/docs/ar/intlayer_with_nextjs_16.md +2 -56
  22. package/docs/ar/intlayer_with_nextjs_page_router.md +7 -10
  23. package/docs/ar/intlayer_with_react_router_v7.md +6 -6
  24. package/docs/ar/intlayer_with_tanstack.md +46 -31
  25. package/docs/ar/intlayer_with_vite+preact.md +7 -7
  26. package/docs/ar/intlayer_with_vite+react.md +7 -7
  27. package/docs/ar/intlayer_with_vite+vue.md +9 -9
  28. package/docs/de/intlayer_with_nextjs_14.md +9 -9
  29. package/docs/de/intlayer_with_nextjs_15.md +9 -8
  30. package/docs/de/intlayer_with_nextjs_page_router.md +7 -10
  31. package/docs/de/intlayer_with_react_router_v7.md +6 -6
  32. package/docs/de/intlayer_with_tanstack.md +46 -31
  33. package/docs/de/intlayer_with_vite+preact.md +7 -7
  34. package/docs/de/intlayer_with_vite+react.md +7 -7
  35. package/docs/de/intlayer_with_vite+vue.md +9 -9
  36. package/docs/en/interest_of_intlayer.md +1 -1
  37. package/docs/en/intlayer_with_nextjs_page_router.md +7 -10
  38. package/docs/en/intlayer_with_react_router_v7.md +6 -6
  39. package/docs/en/intlayer_with_tanstack.md +57 -33
  40. package/docs/en/intlayer_with_vite+preact.md +8 -8
  41. package/docs/en/intlayer_with_vite+react.md +8 -8
  42. package/docs/en/intlayer_with_vite+vue.md +8 -8
  43. package/docs/en/releases/v6.md +1 -1
  44. package/docs/en-GB/intlayer_with_nextjs_14.md +9 -9
  45. package/docs/en-GB/intlayer_with_nextjs_15.md +9 -8
  46. package/docs/en-GB/intlayer_with_nextjs_page_router.md +7 -10
  47. package/docs/en-GB/intlayer_with_react_router_v7.md +6 -6
  48. package/docs/en-GB/intlayer_with_tanstack.md +46 -31
  49. package/docs/en-GB/intlayer_with_vite+preact.md +7 -7
  50. package/docs/en-GB/intlayer_with_vite+react.md +7 -7
  51. package/docs/en-GB/intlayer_with_vite+vue.md +9 -9
  52. package/docs/es/intlayer_with_nextjs_14.md +9 -9
  53. package/docs/es/intlayer_with_nextjs_15.md +9 -8
  54. package/docs/es/intlayer_with_nextjs_page_router.md +7 -10
  55. package/docs/es/intlayer_with_react_router_v7.md +6 -6
  56. package/docs/es/intlayer_with_tanstack.md +15 -10
  57. package/docs/es/intlayer_with_vite+preact.md +7 -7
  58. package/docs/es/intlayer_with_vite+react.md +7 -7
  59. package/docs/es/intlayer_with_vite+vue.md +9 -9
  60. package/docs/fr/intlayer_with_nextjs_14.md +9 -9
  61. package/docs/fr/intlayer_with_nextjs_15.md +9 -8
  62. package/docs/fr/intlayer_with_nextjs_page_router.md +7 -10
  63. package/docs/fr/intlayer_with_react_router_v7.md +6 -6
  64. package/docs/fr/intlayer_with_tanstack.md +46 -31
  65. package/docs/fr/intlayer_with_vite+preact.md +7 -7
  66. package/docs/fr/intlayer_with_vite+react.md +7 -7
  67. package/docs/fr/intlayer_with_vite+vue.md +9 -9
  68. package/docs/hi/intlayer_with_nextjs_14.md +9 -9
  69. package/docs/hi/intlayer_with_nextjs_15.md +9 -8
  70. package/docs/hi/intlayer_with_nextjs_page_router.md +7 -10
  71. package/docs/hi/intlayer_with_react_router_v7.md +6 -6
  72. package/docs/hi/intlayer_with_tanstack.md +15 -10
  73. package/docs/hi/intlayer_with_vite+preact.md +7 -7
  74. package/docs/hi/intlayer_with_vite+react.md +7 -7
  75. package/docs/hi/intlayer_with_vite+vue.md +9 -9
  76. package/docs/id/interest_of_intlayer.md +1 -1
  77. package/docs/id/intlayer_with_nextjs_page_router.md +7 -10
  78. package/docs/id/intlayer_with_react_router_v7.md +6 -6
  79. package/docs/id/intlayer_with_tanstack.md +15 -10
  80. package/docs/id/intlayer_with_vite+preact.md +9 -9
  81. package/docs/id/intlayer_with_vite+react.md +8 -8
  82. package/docs/id/intlayer_with_vite+vue.md +8 -8
  83. package/docs/id/releases/v6.md +1 -1
  84. package/docs/it/intlayer_with_nextjs_14.md +9 -9
  85. package/docs/it/intlayer_with_nextjs_15.md +9 -8
  86. package/docs/it/intlayer_with_nextjs_page_router.md +7 -10
  87. package/docs/it/intlayer_with_react_router_v7.md +6 -6
  88. package/docs/it/intlayer_with_tanstack.md +46 -31
  89. package/docs/it/intlayer_with_vite+preact.md +7 -7
  90. package/docs/it/intlayer_with_vite+react.md +7 -7
  91. package/docs/it/intlayer_with_vite+vue.md +9 -9
  92. package/docs/ja/intlayer_with_nextjs_14.md +9 -9
  93. package/docs/ja/intlayer_with_nextjs_15.md +9 -8
  94. package/docs/ja/intlayer_with_nextjs_page_router.md +7 -10
  95. package/docs/ja/intlayer_with_react_router_v7.md +6 -6
  96. package/docs/ja/intlayer_with_tanstack.md +16 -10
  97. package/docs/ja/intlayer_with_vite+preact.md +7 -7
  98. package/docs/ja/intlayer_with_vite+react.md +7 -7
  99. package/docs/ja/intlayer_with_vite+vue.md +9 -9
  100. package/docs/ko/intlayer_with_nextjs_14.md +9 -9
  101. package/docs/ko/intlayer_with_nextjs_15.md +9 -8
  102. package/docs/ko/intlayer_with_nextjs_page_router.md +7 -10
  103. package/docs/ko/intlayer_with_react_router_v7.md +6 -6
  104. package/docs/ko/intlayer_with_tanstack.md +46 -31
  105. package/docs/ko/intlayer_with_vite+preact.md +7 -7
  106. package/docs/ko/intlayer_with_vite+react.md +7 -7
  107. package/docs/ko/intlayer_with_vite+vue.md +9 -9
  108. package/docs/pl/interest_of_intlayer.md +1 -1
  109. package/docs/pl/intlayer_with_nextjs_page_router.md +7 -10
  110. package/docs/pl/intlayer_with_react_router_v7.md +6 -6
  111. package/docs/pl/intlayer_with_tanstack.md +15 -10
  112. package/docs/pl/intlayer_with_vite+preact.md +10 -10
  113. package/docs/pl/intlayer_with_vite+react.md +8 -8
  114. package/docs/pl/intlayer_with_vite+vue.md +8 -8
  115. package/docs/pl/releases/v6.md +1 -1
  116. package/docs/pt/intlayer_with_nextjs_14.md +9 -9
  117. package/docs/pt/intlayer_with_nextjs_15.md +9 -8
  118. package/docs/pt/intlayer_with_nextjs_page_router.md +7 -10
  119. package/docs/pt/intlayer_with_react_router_v7.md +2 -2
  120. package/docs/pt/intlayer_with_tanstack.md +46 -31
  121. package/docs/pt/intlayer_with_vite+preact.md +7 -7
  122. package/docs/pt/intlayer_with_vite+react.md +7 -7
  123. package/docs/pt/intlayer_with_vite+vue.md +9 -9
  124. package/docs/ru/intlayer_with_nextjs_14.md +9 -9
  125. package/docs/ru/intlayer_with_nextjs_15.md +9 -8
  126. package/docs/ru/intlayer_with_nextjs_page_router.md +7 -10
  127. package/docs/ru/intlayer_with_react_router_v7.md +6 -6
  128. package/docs/ru/intlayer_with_tanstack.md +15 -10
  129. package/docs/ru/intlayer_with_vite+preact.md +7 -7
  130. package/docs/ru/intlayer_with_vite+react.md +7 -7
  131. package/docs/ru/intlayer_with_vite+vue.md +9 -9
  132. package/docs/tr/interest_of_intlayer.md +1 -1
  133. package/docs/tr/intlayer_with_nextjs_15.md +9 -8
  134. package/docs/tr/intlayer_with_nextjs_page_router.md +7 -10
  135. package/docs/tr/intlayer_with_react_router_v7.md +6 -6
  136. package/docs/tr/intlayer_with_tanstack.md +46 -31
  137. package/docs/tr/intlayer_with_vite+preact.md +8 -8
  138. package/docs/tr/intlayer_with_vite+react.md +8 -8
  139. package/docs/tr/intlayer_with_vite+vue.md +8 -8
  140. package/docs/vi/interest_of_intlayer.md +1 -1
  141. package/docs/vi/intlayer_with_nextjs_15.md +1 -0
  142. package/docs/vi/intlayer_with_nextjs_page_router.md +7 -10
  143. package/docs/vi/intlayer_with_react_router_v7.md +6 -6
  144. package/docs/vi/intlayer_with_tanstack.md +46 -31
  145. package/docs/vi/intlayer_with_vite+preact.md +9 -9
  146. package/docs/vi/intlayer_with_vite+react.md +8 -8
  147. package/docs/vi/intlayer_with_vite+vue.md +8 -8
  148. package/docs/vi/releases/v6.md +1 -1
  149. package/docs/zh/intlayer_with_nextjs_14.md +9 -9
  150. package/docs/zh/intlayer_with_nextjs_15.md +9 -8
  151. package/docs/zh/intlayer_with_nextjs_page_router.md +7 -10
  152. package/docs/zh/intlayer_with_react_router_v7.md +6 -6
  153. package/docs/zh/intlayer_with_tanstack.md +14 -8
  154. package/docs/zh/intlayer_with_vite+preact.md +7 -7
  155. package/docs/zh/intlayer_with_vite+react.md +7 -7
  156. package/docs/zh/intlayer_with_vite+vue.md +7 -7
  157. package/frequent_questions/ar/domain_routing.md +1 -1
  158. package/frequent_questions/de/domain_routing.md +1 -1
  159. package/frequent_questions/en/domain_routing.md +1 -1
  160. package/frequent_questions/en/package_version_error.md +29 -1
  161. package/frequent_questions/en-GB/domain_routing.md +1 -1
  162. package/frequent_questions/es/domain_routing.md +1 -1
  163. package/frequent_questions/fr/domain_routing.md +1 -1
  164. package/frequent_questions/hi/domain_routing.md +1 -1
  165. package/frequent_questions/id/domain_routing.md +1 -1
  166. package/frequent_questions/it/domain_routing.md +1 -1
  167. package/frequent_questions/it/package_version_error.md +4 -4
  168. package/frequent_questions/ja/domain_routing.md +1 -1
  169. package/frequent_questions/ko/domain_routing.md +1 -1
  170. package/frequent_questions/pl/domain_routing.md +1 -1
  171. package/frequent_questions/pt/domain_routing.md +1 -1
  172. package/frequent_questions/ru/domain_routing.md +1 -1
  173. package/frequent_questions/tr/domain_routing.md +1 -1
  174. package/frequent_questions/vi/domain_routing.md +1 -1
  175. package/frequent_questions/zh/domain_routing.md +1 -1
  176. package/package.json +7 -14
@@ -1073,40 +1073,40 @@ const App = () => (
1073
1073
  module.exports = App;
1074
1074
  ```
1075
1075
 
1076
- In parallel, you can also use the `intlayerMiddleware` to add server-side routing to your application. This plugin will automatically detect the current locale based on the URL and set the appropriate locale cookie. If no locale is specified, the plugin will determine the most appropriate locale based on the user's browser language preferences. If no locale is detected, it will redirect to the default locale.
1076
+ In parallel, you can also use the `intlayerProxy` to add server-side routing to your application. This plugin will automatically detect the current locale based on the URL and set the appropriate locale cookie. If no locale is specified, the plugin will determine the most appropriate locale based on the user's browser language preferences. If no locale is detected, it will redirect to the default locale.
1077
1077
 
1078
- > Note that to use the `intlayerMiddleware` in production, you need to switch the `vite-intlayer` package from `devDependencies` to `dependencies`.
1078
+ > Note that to use the `intlayerProxy` in production, you need to switch the `vite-intlayer` package from `devDependencies` to `dependencies`.
1079
1079
 
1080
1080
  ```typescript {3,7} fileName="vite.config.ts" codeFormat="typescript"
1081
1081
  import { defineConfig } from "vite";
1082
1082
  import preact from "@preact/preset-vite";
1083
- import { intlayer, intlayerMiddleware } from "vite-intlayer";
1083
+ import { intlayer, intlayerProxy } from "vite-intlayer";
1084
1084
 
1085
1085
  // https://vitejs.dev/config/
1086
1086
  export default defineConfig({
1087
- plugins: [preact(), intlayer(), intlayerMiddleware()],
1087
+ plugins: [preact(), intlayer(), intlayerProxy()],
1088
1088
  });
1089
1089
  ```
1090
1090
 
1091
1091
  ```javascript {3,7} fileName="vite.config.mjs" codeFormat="esm"
1092
1092
  import { defineConfig } from "vite";
1093
1093
  import preact from "@preact/preset-vite";
1094
- import { intlayer, intlayerMiddleware } from "vite-intlayer";
1094
+ import { intlayer, intlayerProxy } from "vite-intlayer";
1095
1095
 
1096
1096
  // https://vitejs.dev/config/
1097
1097
  export default defineConfig({
1098
- plugins: [preact(), intlayer(), intlayerMiddleware()],
1098
+ plugins: [preact(), intlayer(), intlayerProxy()],
1099
1099
  });
1100
1100
  ```
1101
1101
 
1102
1102
  ```javascript {3,7} fileName="vite.config.cjs" codeFormat="commonjs"
1103
1103
  const { defineConfig } = require("vite");
1104
1104
  const preact = require("@preact/preset-vite");
1105
- const { intlayer, intlayerMiddleware } = require("vite-intlayer");
1105
+ const { intlayer, intlayerProxy } = require("vite-intlayer");
1106
1106
 
1107
1107
  // https://vitejs.dev/config/
1108
1108
  module.exports = defineConfig({
1109
- plugins: [preact(), intlayer(), intlayerMiddleware()],
1109
+ plugins: [preact(), intlayer(), intlayerProxy()],
1110
1110
  });
1111
1111
  ```
1112
1112
 
@@ -782,40 +782,40 @@ const App = () => (
782
782
  );
783
783
  ```
784
784
 
785
- In parallel, you can also use the `intlayerMiddleware` to add server-side routing to your application. This plugin will automatically detect the current locale based on the URL and set the appropriate locale cookie. If no locale is specified, the plugin will determine the most appropriate locale based on the user's browser language preferences. If no locale is detected, it will redirect to the default locale.
785
+ In parallel, you can also use the `intlayerProxy` to add server-side routing to your application. This plugin will automatically detect the current locale based on the URL and set the appropriate locale cookie. If no locale is specified, the plugin will determine the most appropriate locale based on the user's browser language preferences. If no locale is detected, it will redirect to the default locale.
786
786
 
787
- > Note that to use the `intlayerMiddleware` in production, you need to switch the `vite-intlayer` package from `devDependencies` to `dependencies`.
787
+ > Note that to use the `intlayerProxy` in production, you need to switch the `vite-intlayer` package from `devDependencies` to `dependencies`.
788
788
 
789
789
  ```typescript {3,7} fileName="vite.config.ts" codeFormat="typescript"
790
790
  import { defineConfig } from "vite";
791
791
  import react from "@vitejs/plugin-react-swc";
792
- import { intlayer, intlayerMiddleware } from "vite-intlayer";
792
+ import { intlayer, intlayerProxy } from "vite-intlayer";
793
793
 
794
794
  // https://vitejs.dev/config/
795
795
  export default defineConfig({
796
- plugins: [react(), intlayer(), intlayerMiddleware()],
796
+ plugins: [react(), intlayer(), intlayerProxy()],
797
797
  });
798
798
  ```
799
799
 
800
800
  ```javascript {3,7} fileName="vite.config.mjs" codeFormat="esm"
801
801
  import { defineConfig } from "vite";
802
802
  import react from "@vitejs/plugin-react-swc";
803
- import { intlayer, intlayerMiddleware } from "vite-intlayer";
803
+ import { intlayer, intlayerProxy } from "vite-intlayer";
804
804
 
805
805
  // https://vitejs.dev/config/
806
806
  export default defineConfig({
807
- plugins: [react(), intlayer(), intlayerMiddleware()],
807
+ plugins: [react(), intlayer(), intlayerProxy()],
808
808
  });
809
809
  ```
810
810
 
811
811
  ```javascript {3,7} fileName="vite.config.cjs" codeFormat="commonjs"
812
812
  const { defineConfig } = require("vite");
813
813
  const react = require("@vitejs/plugin-react-swc");
814
- const { intlayer, intlayerMiddleware } = require("vite-intlayer");
814
+ const { intlayer, intlayerProxy } = require("vite-intlayer");
815
815
 
816
816
  // https://vitejs.dev/config/
817
817
  module.exports = defineConfig({
818
- plugins: [react(), intlayer(), intlayerMiddleware()],
818
+ plugins: [react(), intlayer(), intlayerProxy()],
819
819
  });
820
820
  ```
821
821
 
@@ -661,40 +661,40 @@ import LocaleSwitcher from "@components/LocaleSwitcher.vue";
661
661
  </template>
662
662
  ```
663
663
 
664
- In parallel, you can also use the `intlayerMiddleware` to add server-side routing to your application. This plugin will automatically detect the current locale based on the URL and set the appropriate locale cookie. If no locale is specified, the plugin will determine the most appropriate locale based on the user's browser language preferences. If no locale is detected, it will redirect to the default locale.
664
+ In parallel, you can also use the `intlayerProxy` to add server-side routing to your application. This plugin will automatically detect the current locale based on the URL and set the appropriate locale cookie. If no locale is specified, the plugin will determine the most appropriate locale based on the user's browser language preferences. If no locale is detected, it will redirect to the default locale.
665
665
 
666
- > Note that to use the `intlayerMiddleware` in production, you need to switch the `vite-intlayer` package from `devDependencies` to `dependencies`.
666
+ > Note that to use the `intlayerProxy` in production, you need to switch the `vite-intlayer` package from `devDependencies` to `dependencies`.
667
667
 
668
668
  ```typescript {3,7} fileName="vite.config.ts" codeFormat="typescript"
669
669
  import { defineConfig } from "vite";
670
670
  import vue from "@vitejs/plugin-vue";
671
- import { intlayer, intlayerMiddleware } from "vite-intlayer";
671
+ import { intlayer, intlayerProxy } from "vite-intlayer";
672
672
 
673
673
  // https://vitejs.dev/config/
674
674
  export default defineConfig({
675
- plugins: [vue(), intlayer(), intlayerMiddleware()],
675
+ plugins: [vue(), intlayer(), intlayerProxy()],
676
676
  });
677
677
  ```
678
678
 
679
679
  ```javascript {3,7} fileName="vite.config.mjs" codeFormat="esm"
680
680
  import { defineConfig } from "vite";
681
681
  import vue from "@vitejs/plugin-vue";
682
- import { intlayer, intlayerMiddleware } from "vite-intlayer";
682
+ import { intlayer, intlayerProxy } from "vite-intlayer";
683
683
 
684
684
  // https://vitejs.dev/config/
685
685
  export default defineConfig({
686
- plugins: [vue(), intlayer(), intlayerMiddleware()],
686
+ plugins: [vue(), intlayer(), intlayerProxy()],
687
687
  });
688
688
  ```
689
689
 
690
690
  ```javascript {3,7} fileName="vite.config.cjs" codeFormat="commonjs"
691
691
  const { defineConfig } = require("vite");
692
692
  const vue = require("@vitejs/plugin-vue");
693
- const { intlayer, intlayerMiddleware } = require("vite-intlayer");
693
+ const { intlayer, intlayerProxy } = require("vite-intlayer");
694
694
 
695
695
  // https://vitejs.dev/config/
696
696
  module.exports = defineConfig({
697
- plugins: [vue(), intlayer(), intlayerMiddleware()],
697
+ plugins: [vue(), intlayer(), intlayerProxy()],
698
698
  });
699
699
  ```
700
700
 
@@ -277,7 +277,7 @@ To work around this, we dropped the `intlayer watch` command, using the `--with`
277
277
  - Prefer the new global `content.autoFill` option to generate missing translations at scale.
278
278
  - Use `npx intlayer content test` to gate PRs on missing translations.
279
279
  - For verbose diagnostics, set `log.mode = 'verbose'`.
280
- - Use `intlayer` instead of `intlayerPlugin` and `intlayerMiddleware` instead of `intlayerMiddlewarePlugin` in your Vite configuration.
280
+ - Use `intlayer` instead of `intlayerPlugin` and `intlayerProxy` instead of `intlayerProxyPlugin` in your Vite configuration.
281
281
 
282
282
  ---
283
283
 
@@ -1069,8 +1069,8 @@ import { type FC } from "react";
1069
1069
  import Link from "next/link";
1070
1070
 
1071
1071
  const LocaleSwitcher: FC = () => {
1072
- const { locale, pathWithoutLocale, availableLocales } = useLocale();
1073
- const { setLocaleCookie } = useLocaleCookie();
1072
+ const { locale, pathWithoutLocale, availableLocales, setLocale } =
1073
+ useLocale();
1074
1074
 
1075
1075
  return (
1076
1076
  <div>
@@ -1082,7 +1082,7 @@ const LocaleSwitcher: FC = () => {
1082
1082
  hrefLang={localeItem}
1083
1083
  key={localeItem}
1084
1084
  aria-current={locale === localeItem ? "page" : undefined}
1085
- onClick={() => setLocaleCookie(localeItem)}
1085
+ onClick={() => setLocale(localeItem)}
1086
1086
  >
1087
1087
  <span>
1088
1088
  {/* Locale - e.g. FR */}
@@ -1121,8 +1121,8 @@ import { useLocale } from "next-intlayer";
1121
1121
  import Link from "next/link";
1122
1122
 
1123
1123
  const LocaleSwitcher = () => {
1124
- const { locale, pathWithoutLocale, availableLocales } = useLocale();
1125
- const { setLocaleCookie } = useLocaleCookie();
1124
+ const { locale, pathWithoutLocale, availableLocales, setLocale } =
1125
+ useLocale();
1126
1126
 
1127
1127
  return (
1128
1128
  <div>
@@ -1134,7 +1134,7 @@ const LocaleSwitcher = () => {
1134
1134
  hrefLang={localeItem}
1135
1135
  key={localeItem}
1136
1136
  aria-current={locale === localeItem ? "page" : undefined}
1137
- onClick={() => setLocaleCookie(localeItem)}
1137
+ onClick={() => setLocale(localeItem)}
1138
1138
  >
1139
1139
  <span>
1140
1140
  {/* Locale - e.g. FR */}
@@ -1173,8 +1173,8 @@ const { useLocale } = require("next-intlayer");
1173
1173
  const Link = require("next/link");
1174
1174
 
1175
1175
  const LocaleSwitcher = () => {
1176
- const { locale, pathWithoutLocale, availableLocales } = useLocale();
1177
- const { setLocaleCookie } = useLocaleCookie();
1176
+ const { locale, pathWithoutLocale, availableLocales, setLocale } =
1177
+ useLocale();
1178
1178
 
1179
1179
  return (
1180
1180
  <div>
@@ -1186,7 +1186,7 @@ const LocaleSwitcher = () => {
1186
1186
  hrefLang={localeItem}
1187
1187
  key={localeItem}
1188
1188
  aria-current={locale === localeItem ? "page" : undefined}
1189
- onClick={() => setLocaleCookie(localeItem)}
1189
+ onClick={() => setLocale(localeItem)}
1190
1190
  >
1191
1191
  <span>
1192
1192
  {/* Locale - e.g. FR */}
@@ -1178,8 +1178,8 @@ import { useLocale } from "next-intlayer";
1178
1178
  import Link from "next/link";
1179
1179
 
1180
1180
  export const LocaleSwitcher: FC = () => {
1181
- const { locale, pathWithoutLocale, availableLocales } = useLocale();
1182
- const { setLocaleCookie } = useLocaleCookie();
1181
+ const { locale, pathWithoutLocale, availableLocales, setLocale } =
1182
+ useLocale();
1183
1183
 
1184
1184
  return (
1185
1185
  <div>
@@ -1191,7 +1191,7 @@ export const LocaleSwitcher: FC = () => {
1191
1191
  hrefLang={localeItem}
1192
1192
  key={localeItem}
1193
1193
  aria-current={locale === localeItem ? "page" : undefined}
1194
- onClick={() => setLocaleCookie(localeItem)}
1194
+ onClick={() => setLocale(localeItem)}
1195
1195
  >
1196
1196
  <span>
1197
1197
  {/* Locale - e.g. FR */}
@@ -1230,8 +1230,8 @@ import { useLocale } from "next-intlayer";
1230
1230
  import Link from "next/link";
1231
1231
 
1232
1232
  export const LocaleSwitcher = () => {
1233
- const { locale, pathWithoutLocale, availableLocales } = useLocale();
1234
- const { setLocaleCookie } = useLocaleCookie();
1233
+ const { locale, pathWithoutLocale, availableLocales, setLocale } =
1234
+ useLocale();
1235
1235
 
1236
1236
  return (
1237
1237
  <div>
@@ -1243,7 +1243,7 @@ export const LocaleSwitcher = () => {
1243
1243
  hrefLang={localeItem}
1244
1244
  key={localeItem}
1245
1245
  aria-current={locale === localeItem ? "page" : undefined}
1246
- onClick={() => setLocaleCookie(localeItem)}
1246
+ onClick={() => setLocale(localeItem)}
1247
1247
  >
1248
1248
  <span>
1249
1249
  {/* Locale - e.g. FR */}
@@ -1282,7 +1282,8 @@ const { useLocale } = require("next-intlayer");
1282
1282
  const Link = require("next/link");
1283
1283
 
1284
1284
  export const LocaleSwitcher = () => {
1285
- const { locale, pathWithoutLocale, availableLocales } = useLocale();
1285
+ const { locale, pathWithoutLocale, availableLocales, setLocale } =
1286
+ useLocale();
1286
1287
 
1287
1288
  return (
1288
1289
  <div>
@@ -1294,7 +1295,7 @@ export const LocaleSwitcher = () => {
1294
1295
  hrefLang={localeItem}
1295
1296
  key={localeItem}
1296
1297
  aria-current={locale === localeItem ? "page" : undefined}
1297
- onClick={() => setLocaleCookie(localeItem)}
1298
+ onClick={() => setLocale(localeItem)}
1298
1299
  >
1299
1300
  <span>
1300
1301
  {/* Locale - e.g. FR */}
@@ -151,7 +151,7 @@ export default withIntlayer(nextConfig);
151
151
  Set up middleware to automatically detect and handle the user's preferred locale:
152
152
 
153
153
  ```typescript fileName="src/middleware.ts" codeFormat="typescript"
154
- export { intlayerMiddleware as middleware } from "next-intlayer/middleware";
154
+ export { intlayerProxy as middleware } from "next-intlayer/middleware";
155
155
 
156
156
  export const config = {
157
157
  matcher:
@@ -160,7 +160,7 @@ export const config = {
160
160
  ```
161
161
 
162
162
  ```javascript fileName="src/middleware.mjs" codeFormat="esm"
163
- export { intlayerMiddleware as middleware } from "next-intlayer/middleware";
163
+ export { intlayerProxy as middleware } from "next-intlayer/middleware";
164
164
 
165
165
  export const config = {
166
166
  matcher:
@@ -169,14 +169,14 @@ export const config = {
169
169
  ```
170
170
 
171
171
  ```javascript fileName="src/middleware.cjs" codeFormat="commonjs"
172
- const { intlayerMiddleware } = require("next-intlayer/middleware");
172
+ const { intlayerProxy } = require("next-intlayer/middleware");
173
173
 
174
174
  const config = {
175
175
  matcher:
176
176
  "/((?!api|static|assets|robots|sitemap|sw|service-worker|manifest|.*\\..*|_next).*)",
177
177
  };
178
178
 
179
- module.exports = { middleware: intlayerMiddleware, config };
179
+ module.exports = { middleware: intlayerProxy, config };
180
180
  ```
181
181
 
182
182
  > Adapt the `matcher` parameter to match the routes of your application. For more details, refer to the [Next.js documentation on configuring the matcher](https://nextjs.org/docs/app/building-your-application/routing/middleware).
@@ -1098,7 +1098,6 @@ import Link from "next/link";
1098
1098
 
1099
1099
  const LocaleSwitcher: FC = () => {
1100
1100
  const { locale, pathWithoutLocale, availableLocales } = useLocalePageRouter();
1101
- const { setLocaleCookie } = useLocaleCookie();
1102
1101
 
1103
1102
  return (
1104
1103
  <div>
@@ -1110,7 +1109,7 @@ const LocaleSwitcher: FC = () => {
1110
1109
  hrefLang={localeItem}
1111
1110
  key={localeItem}
1112
1111
  aria-current={locale === localeItem ? "page" : undefined}
1113
- onClick={() => setLocaleCookie(localeItem)}
1112
+ onClick={() => setLocale(localeItem)}
1114
1113
  >
1115
1114
  <span>
1116
1115
  {/* Locale - e.g. FR */}
@@ -1148,7 +1147,6 @@ import Link from "next/link";
1148
1147
 
1149
1148
  const LocaleSwitcher = () => {
1150
1149
  const { locale, pathWithoutLocale, availableLocales } = useLocalePageRouter();
1151
- const { setLocaleCookie } = useLocaleCookie();
1152
1150
 
1153
1151
  return (
1154
1152
  <div>
@@ -1160,7 +1158,7 @@ const LocaleSwitcher = () => {
1160
1158
  hrefLang={localeItem}
1161
1159
  key={localeItem}
1162
1160
  aria-current={locale === localeItem ? "page" : undefined}
1163
- onClick={() => setLocaleCookie(localeItem)}
1161
+ onClick={() => setLocale(localeItem)}
1164
1162
  >
1165
1163
  <span>
1166
1164
  {/* Locale - e.g. FR */}
@@ -1198,7 +1196,6 @@ const Link = require("next/link");
1198
1196
 
1199
1197
  const LocaleSwitcher = () => {
1200
1198
  const { locale, pathWithoutLocale, availableLocales } = useLocalePageRouter();
1201
- const { setLocaleCookie } = useLocaleCookie();
1202
1199
 
1203
1200
  return (
1204
1201
  <select>
@@ -1208,7 +1205,7 @@ const LocaleSwitcher = () => {
1208
1205
  href={getLocalizedUrl(pathWithoutLocale, localeItem)}
1209
1206
  hrefLang={localeItem}
1210
1207
  aria-current={locale === localeItem ? "page" : undefined}
1211
- onClick={() => setLocaleCookie(localeItem)}
1208
+ onClick={() => setLocale(localeItem)}
1212
1209
  >
1213
1210
  <span>
1214
1211
  {/* Locale - e.g. FR */}
@@ -314,7 +314,7 @@ import {
314
314
  getLocalizedUrl,
315
315
  getPathWithoutLocale,
316
316
  } from "intlayer";
317
- import { setLocaleCookie, useIntlayer, useLocale } from "react-intlayer";
317
+ import { setLocaleInStorage, useIntlayer, useLocale } from "react-intlayer";
318
318
  import { Link, useLocation } from "react-router";
319
319
 
320
320
  export const LocaleSwitcher: FC = () => {
@@ -332,7 +332,7 @@ export const LocaleSwitcher: FC = () => {
332
332
  <Link
333
333
  aria-current={localeItem === locale ? "page" : undefined}
334
334
  aria-label={`${localeSwitcherLabel.value} ${getLocaleName(localeItem)}`}
335
- onClick={() => setLocaleCookie(localeItem)}
335
+ onClick={() => setLocale(localeItem)}
336
336
  to={getLocalizedUrl(pathWithoutLocale, localeItem)}
337
337
  >
338
338
  <span>
@@ -401,18 +401,18 @@ export default function RootLayout() {
401
401
 
402
402
  ### Step 11: Add middleware (Optional)
403
403
 
404
- You can also use the `intlayerMiddleware` to add server-side routing to your application. This plugin will automatically detect the current locale based on the URL and set the appropriate locale cookie. If no locale is specified, the plugin will determine the most appropriate locale based on the user's browser language preferences. If no locale is detected, it will redirect to the default locale.
404
+ You can also use the `intlayerProxy` to add server-side routing to your application. This plugin will automatically detect the current locale based on the URL and set the appropriate locale cookie. If no locale is specified, the plugin will determine the most appropriate locale based on the user's browser language preferences. If no locale is detected, it will redirect to the default locale.
405
405
 
406
- > Note that to use the `intlayerMiddleware` in production, you need to switch the `vite-intlayer` package from `devDependencies` to `dependencies`.
406
+ > Note that to use the `intlayerProxy` in production, you need to switch the `vite-intlayer` package from `devDependencies` to `dependencies`.
407
407
 
408
408
  ```typescript {3,7} fileName="vite.config.ts"
409
409
  import { defineConfig } from "vite";
410
410
  import react from "@vitejs/plugin-react-swc";
411
- import { intlayer, intlayerMiddleware } from "vite-intlayer";
411
+ import { intlayer, intlayerProxy } from "vite-intlayer";
412
412
 
413
413
  // https://vitejs.dev/config/
414
414
  export default defineConfig({
415
- plugins: [react(), intlayer(), intlayerMiddleware()],
415
+ plugins: [react(), intlayer(), intlayerProxy()],
416
416
  });
417
417
  ```
418
418
 
@@ -203,6 +203,7 @@ import type { FC } from "react";
203
203
 
204
204
  import { Link, type LinkComponentProps } from "@tanstack/react-router";
205
205
  import { useLocale } from "react-intlayer";
206
+ import { getPrefix } from "intlayer";
206
207
 
207
208
  export const LOCALE_ROUTE = "{-$locale}" as const;
208
209
 
@@ -232,12 +233,13 @@ type RemoveLocaleFromString<S extends string> = CollapseDoubleSlashes<
232
233
 
233
234
  export const LocalizedLink: FC<LocalizedLinkProps> = (props) => {
234
235
  const { locale } = useLocale();
236
+ const { localePrefix } = getPrefix(locale);
235
237
 
236
238
  return (
237
239
  <Link
238
240
  {...props}
239
241
  params={{
240
- locale,
242
+ locale: localePrefix,
241
243
  ...(typeof props?.params === "object" ? props?.params : {}),
242
244
  }}
243
245
  to={`/${LOCALE_ROUTE}${props.to}` as LinkComponentProps["to"]}
@@ -254,43 +256,52 @@ This component has two purposes:
254
256
  Then we can create a `useLocalizedNavigate` hook for programmatic navigation:
255
257
 
256
258
  ```tsx fileName="src/hooks/useLocalizedNavigate.tsx"
257
- import { useLocale } from "react-intlayer";
258
259
  import { useNavigate } from "@tanstack/react-router";
260
+ import { getPrefix } from "intlayer";
261
+ import { useLocale } from "react-intlayer";
259
262
  import { LOCALE_ROUTE } from "@/components/localized-link";
260
263
  import type { FileRouteTypes } from "@/routeTree.gen";
261
264
 
265
+ type StripLocalePrefix<T extends string> = T extends
266
+ | `/${typeof LOCALE_ROUTE}`
267
+ | `/${typeof LOCALE_ROUTE}/`
268
+ ? "/"
269
+ : T extends `/${typeof LOCALE_ROUTE}/${infer Rest}`
270
+ ? `/${Rest}`
271
+ : never;
272
+
273
+ type LocalizedTo = StripLocalePrefix<FileRouteTypes["to"]>;
274
+
275
+ type LocalizedNavigate = {
276
+ (to: LocalizedTo): ReturnType<ReturnType<typeof useNavigate>>;
277
+ (
278
+ opts: { to: LocalizedTo } & Record<string, unknown>
279
+ ): ReturnType<ReturnType<typeof useNavigate>>;
280
+ };
281
+
262
282
  export const useLocalizedNavigate = () => {
263
283
  const navigate = useNavigate();
264
284
 
265
285
  const { locale } = useLocale();
266
286
 
267
- type StripLocalePrefix<T extends string> = T extends
268
- | `/${typeof LOCALE_ROUTE}`
269
- | `/${typeof LOCALE_ROUTE}/`
270
- ? "/"
271
- : T extends `/${typeof LOCALE_ROUTE}/${infer Rest}`
272
- ? `/${Rest}`
273
- : never;
274
-
275
- type LocalizedTo = StripLocalePrefix<FileRouteTypes["to"]>;
276
-
277
- interface LocalizedNavigate {
278
- (to: LocalizedTo): ReturnType<typeof navigate>;
279
- (
280
- opts: { to: LocalizedTo } & Record<string, unknown>
281
- ): ReturnType<typeof navigate>;
282
- }
283
-
284
287
  const localizedNavigate: LocalizedNavigate = (args: any) => {
288
+ const { localePrefix } = getPrefix(locale);
289
+
285
290
  if (typeof args === "string") {
286
- return navigate({ to: `/${LOCALE_ROUTE}${args}`, params: { locale } });
291
+ return navigate({
292
+ to: `/${LOCALE_ROUTE}${args}`,
293
+ params: { locale: localePrefix },
294
+ });
287
295
  }
288
296
 
289
297
  const { to, ...rest } = args;
290
298
 
291
- const localedTo = `/${LOCALE_ROUTE}${to}` as any;
299
+ const localizedTo = `/${LOCALE_ROUTE}${to}` as any;
292
300
 
293
- return navigate({ to: localedTo, params: { locale, ...rest } as any });
301
+ return navigate({
302
+ to: localizedTo,
303
+ params: { locale: localePrefix, ...rest } as any,
304
+ });
294
305
  };
295
306
 
296
307
  return localizedNavigate;
@@ -364,8 +375,13 @@ Create a component to allow users to change languages:
364
375
  import type { FC } from "react";
365
376
 
366
377
  import { useLocation } from "@tanstack/react-router";
367
- import { getHTMLTextDir, getLocaleName, getPathWithoutLocale } from "intlayer";
368
- import { setLocaleCookie, useIntlayer, useLocale } from "react-intlayer";
378
+ import {
379
+ getHTMLTextDir,
380
+ getLocaleName,
381
+ getPathWithoutLocale,
382
+ getPrefix,
383
+ } from "intlayer";
384
+ import { setLocaleInStorage, useIntlayer, useLocale } from "react-intlayer";
369
385
 
370
386
  import { LocalizedLink, To } from "./localized-link";
371
387
 
@@ -384,9 +400,8 @@ export const LocaleSwitcher: FC = () => {
384
400
  <LocalizedLink
385
401
  aria-current={localeEl === locale ? "page" : undefined}
386
402
  aria-label={`${localeSwitcherLabel.value} ${getLocaleName(localeEl)}`}
387
- onClick={() => setLocaleCookie(localeEl)}
388
- params={{ locale: localeEl }}
389
- to={pathWithoutLocale as To}
403
+ onClick={() => setLocaleInStorage(localeEl)}
404
+ params={{ locale: getPrefix(localeEl).localePrefix }}
390
405
  >
391
406
  <span>
392
407
  {/* Locale - e.g. FR */}
@@ -464,15 +479,15 @@ function LayoutComponent() {
464
479
 
465
480
  ### Step 11: Add middleware (Optional)
466
481
 
467
- You can also use the `intlayerMiddleware` to add server-side routing to your application. This plugin will automatically detect the current locale based on the URL and set the appropriate locale cookie. If no locale is specified, the plugin will determine the most appropriate locale based on the user's browser language preferences. If no locale is detected, it will redirect to the default locale.
482
+ You can also use the `intlayerProxy` to add server-side routing to your application. This plugin will automatically detect the current locale based on the URL and set the appropriate locale cookie. If no locale is specified, the plugin will determine the most appropriate locale based on the user's browser language preferences. If no locale is detected, it will redirect to the default locale.
468
483
 
469
- > Note that to use the `intlayerMiddleware` in production, you need to switch the `vite-intlayer` package from `devDependencies` to `dependencies`.
484
+ > Note that to use the `intlayerProxy` in production, you need to switch the `vite-intlayer` package from `devDependencies` to `dependencies`.
470
485
 
471
486
  ```typescript {3,7} fileName="vite.config.ts"
472
487
  import { reactRouter } from "@react-router/dev/vite";
473
488
  import tailwindcss from "@tailwindcss/vite";
474
489
  import { defineConfig } from "vite";
475
- import { intlayer, intlayerMiddleware } from "vite-intlayer";
490
+ import { intlayer, intlayerProxy } from "vite-intlayer";
476
491
  import tsconfigPaths from "vite-tsconfig-paths";
477
492
 
478
493
  export default defineConfig({
@@ -481,7 +496,7 @@ export default defineConfig({
481
496
  reactRouter(),
482
497
  tsconfigPaths(),
483
498
  intlayer(),
484
- intlayerMiddleware(),
499
+ intlayerProxy(),
485
500
  ],
486
501
  });
487
502
  ```
@@ -1052,38 +1052,38 @@ const App = () => (
1052
1052
  module.exports = App;
1053
1053
  ```
1054
1054
 
1055
- In parallel, you can also use the `intlayerMiddleware` to add server-side routing to your application. This plugin will automatically detect the current locale based on the URL and set the appropriate locale cookie. If no locale is specified, the plugin will determine the most appropriate locale based on the user's browser language preferences. If no locale is detected, it will redirect to the default locale.
1055
+ In parallel, you can also use the `intlayerProxy` to add server-side routing to your application. This plugin will automatically detect the current locale based on the URL and set the appropriate locale cookie. If no locale is specified, the plugin will determine the most appropriate locale based on the user's browser language preferences. If no locale is detected, it will redirect to the default locale.
1056
1056
 
1057
1057
  ```typescript {3,7} fileName="vite.config.ts" codeFormat="typescript"
1058
1058
  import { defineConfig } from "vite";
1059
1059
  import preact from "@preact/preset-vite";
1060
- import { intlayer, intlayerMiddleware } from "vite-intlayer";
1060
+ import { intlayer, intlayerProxy } from "vite-intlayer";
1061
1061
 
1062
1062
  // https://vitejs.dev/config/
1063
1063
  export default defineConfig({
1064
- plugins: [preact(), intlayer(), intlayerMiddleware()],
1064
+ plugins: [preact(), intlayer(), intlayerProxy()],
1065
1065
  });
1066
1066
  ```
1067
1067
 
1068
1068
  ```javascript {3,7} fileName="vite.config.mjs" codeFormat="esm"
1069
1069
  import { defineConfig } from "vite";
1070
1070
  import preact from "@preact/preset-vite";
1071
- import { intlayer, intlayerMiddleware } from "vite-intlayer";
1071
+ import { intlayer, intlayerProxy } from "vite-intlayer";
1072
1072
 
1073
1073
  // https://vitejs.dev/config/
1074
1074
  export default defineConfig({
1075
- plugins: [preact(), intlayer(), intlayerMiddleware()],
1075
+ plugins: [preact(), intlayer(), intlayerProxy()],
1076
1076
  });
1077
1077
  ```
1078
1078
 
1079
1079
  ```javascript {3,7} fileName="vite.config.cjs" codeFormat="commonjs"
1080
1080
  const { defineConfig } = require("vite");
1081
1081
  const preact = require("@preact/preset-vite");
1082
- const { intlayer, intlayerMiddleware } = require("vite-intlayer");
1082
+ const { intlayer, intlayerProxy } = require("vite-intlayer");
1083
1083
 
1084
1084
  // https://vitejs.dev/config/
1085
1085
  module.exports = defineConfig({
1086
- plugins: [preact(), intlayer(), intlayerMiddleware()],
1086
+ plugins: [preact(), intlayer(), intlayerProxy()],
1087
1087
  });
1088
1088
  ```
1089
1089
 
@@ -1046,38 +1046,38 @@ const App = () => (
1046
1046
  );
1047
1047
  ```
1048
1048
 
1049
- In parallel, you can also use the `intlayerMiddleware` to add server-side routing to your application. This plugin will automatically detect the current locale based on the URL and set the appropriate locale cookie. If no locale is specified, the plugin will determine the most appropriate locale based on the user's browser language preferences. If no locale is detected, it will redirect to the default locale.
1049
+ In parallel, you can also use the `intlayerProxy` to add server-side routing to your application. This plugin will automatically detect the current locale based on the URL and set the appropriate locale cookie. If no locale is specified, the plugin will determine the most appropriate locale based on the user's browser language preferences. If no locale is detected, it will redirect to the default locale.
1050
1050
 
1051
1051
  ```typescript {3,7} fileName="vite.config.ts" codeFormat="typescript"
1052
1052
  import { defineConfig } from "vite";
1053
1053
  import react from "@vitejs/plugin-react-swc";
1054
- import { intlayer, intlayerMiddleware } from "vite-intlayer";
1054
+ import { intlayer, intlayerProxy } from "vite-intlayer";
1055
1055
 
1056
1056
  // https://vitejs.dev/config/
1057
1057
  export default defineConfig({
1058
- plugins: [react(), intlayer(), intlayerMiddleware()],
1058
+ plugins: [react(), intlayer(), intlayerProxy()],
1059
1059
  });
1060
1060
  ```
1061
1061
 
1062
1062
  ```javascript {3,7} fileName="vite.config.mjs" codeFormat="esm"
1063
1063
  import { defineConfig } from "vite";
1064
1064
  import react from "@vitejs/plugin-react-swc";
1065
- import { intlayer, intlayerMiddleware } from "vite-intlayer";
1065
+ import { intlayer, intlayerProxy } from "vite-intlayer";
1066
1066
 
1067
1067
  // https://vitejs.dev/config/
1068
1068
  export default defineConfig({
1069
- plugins: [react(), intlayer(), intlayerMiddleware()],
1069
+ plugins: [react(), intlayer(), intlayerProxy()],
1070
1070
  });
1071
1071
  ```
1072
1072
 
1073
1073
  ```javascript {3,7} fileName="vite.config.cjs" codeFormat="commonjs"
1074
1074
  const { defineConfig } = require("vite");
1075
1075
  const react = require("@vitejs/plugin-react-swc");
1076
- const { intlayer, intlayerMiddleware } = require("vite-intlayer");
1076
+ const { intlayer, intlayerProxy } = require("vite-intlayer");
1077
1077
 
1078
1078
  // https://vitejs.dev/config/
1079
1079
  module.exports = defineConfig({
1080
- plugins: [react(), intlayer(), intlayerMiddleware()],
1080
+ plugins: [react(), intlayer(), intlayerProxy()],
1081
1081
  });
1082
1082
  ```
1083
1083