@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.
- package/blog/ar/internationalization_and_SEO.md +0 -4
- package/blog/ar/next-i18next_vs_next-intl_vs_intlayer.md +2 -2
- package/blog/de/internationalization_and_SEO.md +0 -2
- package/blog/en/internationalization_and_SEO.md +0 -2
- package/blog/en/next-i18next_vs_next-intl_vs_intlayer.md +2 -2
- package/blog/en-GB/internationalization_and_SEO.md +0 -2
- package/blog/es/internationalization_and_SEO.md +0 -4
- package/blog/fr/internationalization_and_SEO.md +0 -2
- package/blog/hi/internationalization_and_SEO.md +0 -2
- package/blog/id/next-i18next_vs_next-intl_vs_intlayer.md +2 -2
- package/blog/it/internationalization_and_SEO.md +0 -2
- package/blog/ja/internationalization_and_SEO.md +0 -2
- package/blog/ko/internationalization_and_SEO.md +0 -2
- package/blog/pl/next-i18next_vs_next-intl_vs_intlayer.md +2 -2
- package/blog/pt/internationalization_and_SEO.md +0 -4
- package/blog/ru/internationalization_and_SEO.md +0 -4
- package/blog/vi/next-i18next_vs_next-intl_vs_intlayer.md +2 -2
- package/blog/zh/internationalization_and_SEO.md +0 -4
- package/docs/ar/intlayer_with_nextjs_14.md +9 -9
- package/docs/ar/intlayer_with_nextjs_15.md +9 -8
- package/docs/ar/intlayer_with_nextjs_16.md +2 -56
- package/docs/ar/intlayer_with_nextjs_page_router.md +7 -10
- package/docs/ar/intlayer_with_react_router_v7.md +6 -6
- package/docs/ar/intlayer_with_tanstack.md +46 -31
- package/docs/ar/intlayer_with_vite+preact.md +7 -7
- package/docs/ar/intlayer_with_vite+react.md +7 -7
- package/docs/ar/intlayer_with_vite+vue.md +9 -9
- package/docs/de/intlayer_with_nextjs_14.md +9 -9
- package/docs/de/intlayer_with_nextjs_15.md +9 -8
- package/docs/de/intlayer_with_nextjs_page_router.md +7 -10
- package/docs/de/intlayer_with_react_router_v7.md +6 -6
- package/docs/de/intlayer_with_tanstack.md +46 -31
- package/docs/de/intlayer_with_vite+preact.md +7 -7
- package/docs/de/intlayer_with_vite+react.md +7 -7
- package/docs/de/intlayer_with_vite+vue.md +9 -9
- package/docs/en/interest_of_intlayer.md +1 -1
- package/docs/en/intlayer_with_nextjs_page_router.md +7 -10
- package/docs/en/intlayer_with_react_router_v7.md +6 -6
- package/docs/en/intlayer_with_tanstack.md +57 -33
- package/docs/en/intlayer_with_vite+preact.md +8 -8
- package/docs/en/intlayer_with_vite+react.md +8 -8
- package/docs/en/intlayer_with_vite+vue.md +8 -8
- package/docs/en/releases/v6.md +1 -1
- package/docs/en-GB/intlayer_with_nextjs_14.md +9 -9
- package/docs/en-GB/intlayer_with_nextjs_15.md +9 -8
- package/docs/en-GB/intlayer_with_nextjs_page_router.md +7 -10
- package/docs/en-GB/intlayer_with_react_router_v7.md +6 -6
- package/docs/en-GB/intlayer_with_tanstack.md +46 -31
- package/docs/en-GB/intlayer_with_vite+preact.md +7 -7
- package/docs/en-GB/intlayer_with_vite+react.md +7 -7
- package/docs/en-GB/intlayer_with_vite+vue.md +9 -9
- package/docs/es/intlayer_with_nextjs_14.md +9 -9
- package/docs/es/intlayer_with_nextjs_15.md +9 -8
- package/docs/es/intlayer_with_nextjs_page_router.md +7 -10
- package/docs/es/intlayer_with_react_router_v7.md +6 -6
- package/docs/es/intlayer_with_tanstack.md +15 -10
- package/docs/es/intlayer_with_vite+preact.md +7 -7
- package/docs/es/intlayer_with_vite+react.md +7 -7
- package/docs/es/intlayer_with_vite+vue.md +9 -9
- package/docs/fr/intlayer_with_nextjs_14.md +9 -9
- package/docs/fr/intlayer_with_nextjs_15.md +9 -8
- package/docs/fr/intlayer_with_nextjs_page_router.md +7 -10
- package/docs/fr/intlayer_with_react_router_v7.md +6 -6
- package/docs/fr/intlayer_with_tanstack.md +46 -31
- package/docs/fr/intlayer_with_vite+preact.md +7 -7
- package/docs/fr/intlayer_with_vite+react.md +7 -7
- package/docs/fr/intlayer_with_vite+vue.md +9 -9
- package/docs/hi/intlayer_with_nextjs_14.md +9 -9
- package/docs/hi/intlayer_with_nextjs_15.md +9 -8
- package/docs/hi/intlayer_with_nextjs_page_router.md +7 -10
- package/docs/hi/intlayer_with_react_router_v7.md +6 -6
- package/docs/hi/intlayer_with_tanstack.md +15 -10
- package/docs/hi/intlayer_with_vite+preact.md +7 -7
- package/docs/hi/intlayer_with_vite+react.md +7 -7
- package/docs/hi/intlayer_with_vite+vue.md +9 -9
- package/docs/id/interest_of_intlayer.md +1 -1
- package/docs/id/intlayer_with_nextjs_page_router.md +7 -10
- package/docs/id/intlayer_with_react_router_v7.md +6 -6
- package/docs/id/intlayer_with_tanstack.md +15 -10
- package/docs/id/intlayer_with_vite+preact.md +9 -9
- package/docs/id/intlayer_with_vite+react.md +8 -8
- package/docs/id/intlayer_with_vite+vue.md +8 -8
- package/docs/id/releases/v6.md +1 -1
- package/docs/it/intlayer_with_nextjs_14.md +9 -9
- package/docs/it/intlayer_with_nextjs_15.md +9 -8
- package/docs/it/intlayer_with_nextjs_page_router.md +7 -10
- package/docs/it/intlayer_with_react_router_v7.md +6 -6
- package/docs/it/intlayer_with_tanstack.md +46 -31
- package/docs/it/intlayer_with_vite+preact.md +7 -7
- package/docs/it/intlayer_with_vite+react.md +7 -7
- package/docs/it/intlayer_with_vite+vue.md +9 -9
- package/docs/ja/intlayer_with_nextjs_14.md +9 -9
- package/docs/ja/intlayer_with_nextjs_15.md +9 -8
- package/docs/ja/intlayer_with_nextjs_page_router.md +7 -10
- package/docs/ja/intlayer_with_react_router_v7.md +6 -6
- package/docs/ja/intlayer_with_tanstack.md +16 -10
- package/docs/ja/intlayer_with_vite+preact.md +7 -7
- package/docs/ja/intlayer_with_vite+react.md +7 -7
- package/docs/ja/intlayer_with_vite+vue.md +9 -9
- package/docs/ko/intlayer_with_nextjs_14.md +9 -9
- package/docs/ko/intlayer_with_nextjs_15.md +9 -8
- package/docs/ko/intlayer_with_nextjs_page_router.md +7 -10
- package/docs/ko/intlayer_with_react_router_v7.md +6 -6
- package/docs/ko/intlayer_with_tanstack.md +46 -31
- package/docs/ko/intlayer_with_vite+preact.md +7 -7
- package/docs/ko/intlayer_with_vite+react.md +7 -7
- package/docs/ko/intlayer_with_vite+vue.md +9 -9
- package/docs/pl/interest_of_intlayer.md +1 -1
- package/docs/pl/intlayer_with_nextjs_page_router.md +7 -10
- package/docs/pl/intlayer_with_react_router_v7.md +6 -6
- package/docs/pl/intlayer_with_tanstack.md +15 -10
- package/docs/pl/intlayer_with_vite+preact.md +10 -10
- package/docs/pl/intlayer_with_vite+react.md +8 -8
- package/docs/pl/intlayer_with_vite+vue.md +8 -8
- package/docs/pl/releases/v6.md +1 -1
- package/docs/pt/intlayer_with_nextjs_14.md +9 -9
- package/docs/pt/intlayer_with_nextjs_15.md +9 -8
- package/docs/pt/intlayer_with_nextjs_page_router.md +7 -10
- package/docs/pt/intlayer_with_react_router_v7.md +2 -2
- package/docs/pt/intlayer_with_tanstack.md +46 -31
- package/docs/pt/intlayer_with_vite+preact.md +7 -7
- package/docs/pt/intlayer_with_vite+react.md +7 -7
- package/docs/pt/intlayer_with_vite+vue.md +9 -9
- package/docs/ru/intlayer_with_nextjs_14.md +9 -9
- package/docs/ru/intlayer_with_nextjs_15.md +9 -8
- package/docs/ru/intlayer_with_nextjs_page_router.md +7 -10
- package/docs/ru/intlayer_with_react_router_v7.md +6 -6
- package/docs/ru/intlayer_with_tanstack.md +15 -10
- package/docs/ru/intlayer_with_vite+preact.md +7 -7
- package/docs/ru/intlayer_with_vite+react.md +7 -7
- package/docs/ru/intlayer_with_vite+vue.md +9 -9
- package/docs/tr/interest_of_intlayer.md +1 -1
- package/docs/tr/intlayer_with_nextjs_15.md +9 -8
- package/docs/tr/intlayer_with_nextjs_page_router.md +7 -10
- package/docs/tr/intlayer_with_react_router_v7.md +6 -6
- package/docs/tr/intlayer_with_tanstack.md +46 -31
- package/docs/tr/intlayer_with_vite+preact.md +8 -8
- package/docs/tr/intlayer_with_vite+react.md +8 -8
- package/docs/tr/intlayer_with_vite+vue.md +8 -8
- package/docs/vi/interest_of_intlayer.md +1 -1
- package/docs/vi/intlayer_with_nextjs_15.md +1 -0
- package/docs/vi/intlayer_with_nextjs_page_router.md +7 -10
- package/docs/vi/intlayer_with_react_router_v7.md +6 -6
- package/docs/vi/intlayer_with_tanstack.md +46 -31
- package/docs/vi/intlayer_with_vite+preact.md +9 -9
- package/docs/vi/intlayer_with_vite+react.md +8 -8
- package/docs/vi/intlayer_with_vite+vue.md +8 -8
- package/docs/vi/releases/v6.md +1 -1
- package/docs/zh/intlayer_with_nextjs_14.md +9 -9
- package/docs/zh/intlayer_with_nextjs_15.md +9 -8
- package/docs/zh/intlayer_with_nextjs_page_router.md +7 -10
- package/docs/zh/intlayer_with_react_router_v7.md +6 -6
- package/docs/zh/intlayer_with_tanstack.md +14 -8
- package/docs/zh/intlayer_with_vite+preact.md +7 -7
- package/docs/zh/intlayer_with_vite+react.md +7 -7
- package/docs/zh/intlayer_with_vite+vue.md +7 -7
- package/frequent_questions/ar/domain_routing.md +1 -1
- package/frequent_questions/de/domain_routing.md +1 -1
- package/frequent_questions/en/domain_routing.md +1 -1
- package/frequent_questions/en/package_version_error.md +29 -1
- package/frequent_questions/en-GB/domain_routing.md +1 -1
- package/frequent_questions/es/domain_routing.md +1 -1
- package/frequent_questions/fr/domain_routing.md +1 -1
- package/frequent_questions/hi/domain_routing.md +1 -1
- package/frequent_questions/id/domain_routing.md +1 -1
- package/frequent_questions/it/domain_routing.md +1 -1
- package/frequent_questions/it/package_version_error.md +4 -4
- package/frequent_questions/ja/domain_routing.md +1 -1
- package/frequent_questions/ko/domain_routing.md +1 -1
- package/frequent_questions/pl/domain_routing.md +1 -1
- package/frequent_questions/pt/domain_routing.md +1 -1
- package/frequent_questions/ru/domain_routing.md +1 -1
- package/frequent_questions/tr/domain_routing.md +1 -1
- package/frequent_questions/vi/domain_routing.md +1 -1
- package/frequent_questions/zh/domain_routing.md +1 -1
- package/package.json +7 -14
|
@@ -1108,8 +1108,8 @@ import { type FC } from "react";
|
|
|
1108
1108
|
import Link from "next/link";
|
|
1109
1109
|
|
|
1110
1110
|
const LocaleSwitcher: FC = () => {
|
|
1111
|
-
const { locale, pathWithoutLocale, availableLocales } =
|
|
1112
|
-
|
|
1111
|
+
const { locale, pathWithoutLocale, availableLocales, setLocale } =
|
|
1112
|
+
useLocale();
|
|
1113
1113
|
|
|
1114
1114
|
return (
|
|
1115
1115
|
<div>
|
|
@@ -1121,7 +1121,7 @@ const LocaleSwitcher: FC = () => {
|
|
|
1121
1121
|
hrefLang={localeItem}
|
|
1122
1122
|
key={localeItem}
|
|
1123
1123
|
aria-current={locale === localeItem ? "page" : undefined}
|
|
1124
|
-
onClick={() =>
|
|
1124
|
+
onClick={() => setLocale(localeItem)}
|
|
1125
1125
|
>
|
|
1126
1126
|
<span>
|
|
1127
1127
|
{/* ロケール - 例: FR */}
|
|
@@ -1160,8 +1160,8 @@ import { useLocale } from "next-intlayer";
|
|
|
1160
1160
|
import Link from "next/link";
|
|
1161
1161
|
|
|
1162
1162
|
const LocaleSwitcher = () => {
|
|
1163
|
-
const { locale, pathWithoutLocale, availableLocales } =
|
|
1164
|
-
|
|
1163
|
+
const { locale, pathWithoutLocale, availableLocales, setLocale } =
|
|
1164
|
+
useLocale();
|
|
1165
1165
|
|
|
1166
1166
|
return (
|
|
1167
1167
|
<div>
|
|
@@ -1173,7 +1173,7 @@ const LocaleSwitcher = () => {
|
|
|
1173
1173
|
hrefLang={localeItem}
|
|
1174
1174
|
key={localeItem}
|
|
1175
1175
|
aria-current={locale === localeItem ? "page" : undefined}
|
|
1176
|
-
onClick={() =>
|
|
1176
|
+
onClick={() => setLocale(localeItem)}
|
|
1177
1177
|
>
|
|
1178
1178
|
<span>
|
|
1179
1179
|
{/* ロケール - 例: FR */}
|
|
@@ -1212,8 +1212,8 @@ const { useLocale } = require("next-intlayer");
|
|
|
1212
1212
|
const Link = require("next/link");
|
|
1213
1213
|
|
|
1214
1214
|
const LocaleSwitcher = () => {
|
|
1215
|
-
const { locale, pathWithoutLocale, availableLocales } =
|
|
1216
|
-
|
|
1215
|
+
const { locale, pathWithoutLocale, availableLocales, setLocale } =
|
|
1216
|
+
useLocale();
|
|
1217
1217
|
|
|
1218
1218
|
return (
|
|
1219
1219
|
<div>
|
|
@@ -1225,7 +1225,7 @@ const LocaleSwitcher = () => {
|
|
|
1225
1225
|
hrefLang={localeItem}
|
|
1226
1226
|
key={localeItem}
|
|
1227
1227
|
aria-current={locale === localeItem ? "page" : undefined}
|
|
1228
|
-
onClick={() =>
|
|
1228
|
+
onClick={() => setLocale(localeItem)}
|
|
1229
1229
|
>
|
|
1230
1230
|
<span>
|
|
1231
1231
|
{/* ロケール - 例: 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 } =
|
|
1182
|
-
|
|
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={() =>
|
|
1194
|
+
onClick={() => setLocale(localeItem)}
|
|
1195
1195
|
>
|
|
1196
1196
|
<span>
|
|
1197
1197
|
{/* ロケール - 例: 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 } =
|
|
1234
|
-
|
|
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={() =>
|
|
1246
|
+
onClick={() => setLocale(localeItem)}
|
|
1247
1247
|
>
|
|
1248
1248
|
<span>
|
|
1249
1249
|
{/* ロケール - 例: 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 } =
|
|
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={() =>
|
|
1298
|
+
onClick={() => setLocale(localeItem)}
|
|
1298
1299
|
>
|
|
1299
1300
|
<span>
|
|
1300
1301
|
{/* ロケール - 例: FR */}
|
|
@@ -151,7 +151,7 @@ export default withIntlayer(nextConfig);
|
|
|
151
151
|
ユーザーの優先ロケールを自動的に検出し処理するミドルウェアを設定します:
|
|
152
152
|
|
|
153
153
|
```typescript fileName="src/middleware.ts" codeFormat="typescript"
|
|
154
|
-
export {
|
|
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 {
|
|
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 {
|
|
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:
|
|
179
|
+
module.exports = { middleware: intlayerProxy, config };
|
|
180
180
|
```
|
|
181
181
|
|
|
182
182
|
> `matcher` パラメータをアプリケーションのルートに合わせて調整してください。詳細については、[Next.js の matcher 設定に関するドキュメント](https://nextjs.org/docs/app/building-your-application/routing/middleware)を参照してください。
|
|
@@ -1095,7 +1095,6 @@ import Link from "next/link";
|
|
|
1095
1095
|
|
|
1096
1096
|
const LocaleSwitcher: FC = () => {
|
|
1097
1097
|
const { locale, pathWithoutLocale, availableLocales } = useLocalePageRouter();
|
|
1098
|
-
const { setLocaleCookie } = useLocaleCookie();
|
|
1099
1098
|
|
|
1100
1099
|
return (
|
|
1101
1100
|
<div>
|
|
@@ -1107,7 +1106,7 @@ const LocaleSwitcher: FC = () => {
|
|
|
1107
1106
|
hrefLang={localeItem}
|
|
1108
1107
|
key={localeItem}
|
|
1109
1108
|
aria-current={locale === localeItem ? "page" : undefined}
|
|
1110
|
-
onClick={() =>
|
|
1109
|
+
onClick={() => setLocale(localeItem)}
|
|
1111
1110
|
>
|
|
1112
1111
|
<span>
|
|
1113
1112
|
{/* ロケール - 例: FR */}
|
|
@@ -1145,7 +1144,6 @@ import Link from "next/link";
|
|
|
1145
1144
|
|
|
1146
1145
|
const LocaleSwitcher = () => {
|
|
1147
1146
|
const { locale, pathWithoutLocale, availableLocales } = useLocalePageRouter();
|
|
1148
|
-
const { setLocaleCookie } = useLocaleCookie();
|
|
1149
1147
|
|
|
1150
1148
|
return (
|
|
1151
1149
|
<div>
|
|
@@ -1157,7 +1155,7 @@ const LocaleSwitcher = () => {
|
|
|
1157
1155
|
hrefLang={localeItem}
|
|
1158
1156
|
key={localeItem}
|
|
1159
1157
|
aria-current={locale === localeItem ? "page" : undefined}
|
|
1160
|
-
onClick={() =>
|
|
1158
|
+
onClick={() => setLocale(localeItem)}
|
|
1161
1159
|
>
|
|
1162
1160
|
<span>
|
|
1163
1161
|
{/* ロケール - 例: FR */}
|
|
@@ -1195,7 +1193,6 @@ const Link = require("next/link");
|
|
|
1195
1193
|
|
|
1196
1194
|
const LocaleSwitcher = () => {
|
|
1197
1195
|
const { locale, pathWithoutLocale, availableLocales } = useLocalePageRouter();
|
|
1198
|
-
const { setLocaleCookie } = useLocaleCookie();
|
|
1199
1196
|
|
|
1200
1197
|
return (
|
|
1201
1198
|
<select>
|
|
@@ -1205,7 +1202,7 @@ const LocaleSwitcher = () => {
|
|
|
1205
1202
|
href={getLocalizedUrl(pathWithoutLocale, localeItem)}
|
|
1206
1203
|
hrefLang={localeItem}
|
|
1207
1204
|
aria-current={locale === localeItem ? "page" : undefined}
|
|
1208
|
-
onClick={() =>
|
|
1205
|
+
onClick={() => setLocale(localeItem)}
|
|
1209
1206
|
>
|
|
1210
1207
|
<span>
|
|
1211
1208
|
{/* ロケール - 例: FR */}
|
|
@@ -318,7 +318,7 @@ import {
|
|
|
318
318
|
getLocalizedUrl,
|
|
319
319
|
getPathWithoutLocale,
|
|
320
320
|
} from "intlayer";
|
|
321
|
-
import {
|
|
321
|
+
import { setLocaleInStorage, useIntlayer, useLocale } from "react-intlayer";
|
|
322
322
|
import { Link, useLocation } from "react-router";
|
|
323
323
|
|
|
324
324
|
export const LocaleSwitcher: FC = () => {
|
|
@@ -336,7 +336,7 @@ export const LocaleSwitcher: FC = () => {
|
|
|
336
336
|
<Link
|
|
337
337
|
aria-current={localeItem === locale ? "page" : undefined}
|
|
338
338
|
aria-label={`${localeSwitcherLabel.value} ${getLocaleName(localeItem)}`}
|
|
339
|
-
onClick={() =>
|
|
339
|
+
onClick={() => setLocale(localeItem)}
|
|
340
340
|
to={getLocalizedUrl(pathWithoutLocale, localeItem)}
|
|
341
341
|
>
|
|
342
342
|
<span>
|
|
@@ -405,18 +405,18 @@ export default function RootLayout() {
|
|
|
405
405
|
|
|
406
406
|
### ステップ11: ミドルウェアを追加する(オプション)
|
|
407
407
|
|
|
408
|
-
`
|
|
408
|
+
`intlayerProxy` を使用して、アプリケーションにサーバーサイドルーティングを追加することもできます。このプラグインは、URL に基づいて現在のロケールを自動的に検出し、適切なロケールクッキーを設定します。ロケールが指定されていない場合、プラグインはユーザーのブラウザの言語設定に基づいて最も適切なロケールを判断します。ロケールが検出されない場合は、デフォルトのロケールにリダイレクトします。
|
|
409
409
|
|
|
410
|
-
> `
|
|
410
|
+
> `intlayerProxy` を本番環境で使用するには、`vite-intlayer` パッケージを `devDependencies` から `dependencies` に切り替える必要があることに注意してください。
|
|
411
411
|
|
|
412
412
|
```typescript {3,7} fileName="vite.config.ts"
|
|
413
413
|
import { defineConfig } from "vite";
|
|
414
414
|
import react from "@vitejs/plugin-react-swc";
|
|
415
|
-
import { intlayer,
|
|
415
|
+
import { intlayer, intlayerProxy } from "vite-intlayer";
|
|
416
416
|
|
|
417
417
|
// https://vitejs.dev/config/
|
|
418
418
|
export default defineConfig({
|
|
419
|
-
plugins: [react(), intlayer(),
|
|
419
|
+
plugins: [react(), intlayer(), intlayerProxy()],
|
|
420
420
|
});
|
|
421
421
|
```
|
|
422
422
|
|
|
@@ -204,6 +204,7 @@ import type { FC } from "react";
|
|
|
204
204
|
|
|
205
205
|
import { Link, type LinkComponentProps } from "@tanstack/react-router";
|
|
206
206
|
import { useLocale } from "react-intlayer";
|
|
207
|
+
import { getPrefix } from "intlayer";
|
|
207
208
|
|
|
208
209
|
export const LOCALE_ROUTE = "{-$locale}" as const;
|
|
209
210
|
|
|
@@ -233,12 +234,13 @@ type RemoveLocaleFromString<S extends string> = CollapseDoubleSlashes<
|
|
|
233
234
|
|
|
234
235
|
export const LocalizedLink: FC<LocalizedLinkProps> = (props) => {
|
|
235
236
|
const { locale } = useLocale();
|
|
237
|
+
const { localePrefix } = getPrefix(locale);
|
|
236
238
|
|
|
237
239
|
return (
|
|
238
240
|
<Link
|
|
239
241
|
{...props}
|
|
240
242
|
params={{
|
|
241
|
-
locale,
|
|
243
|
+
locale: localePrefix,
|
|
242
244
|
...(typeof props?.params === "object" ? props?.params : {}),
|
|
243
245
|
}}
|
|
244
246
|
to={`/${LOCALE_ROUTE}${props.to}` as LinkComponentProps["to"]}
|
|
@@ -365,8 +367,13 @@ function RouteComponent() {
|
|
|
365
367
|
import type { FC } from "react";
|
|
366
368
|
|
|
367
369
|
import { useLocation } from "@tanstack/react-router";
|
|
368
|
-
import {
|
|
369
|
-
|
|
370
|
+
import {
|
|
371
|
+
getHTMLTextDir,
|
|
372
|
+
getLocaleName,
|
|
373
|
+
getPathWithoutLocale,
|
|
374
|
+
getPrefix,
|
|
375
|
+
} from "intlayer";
|
|
376
|
+
import { setLocaleInStorage, useIntlayer, useLocale } from "react-intlayer";
|
|
370
377
|
|
|
371
378
|
import { LocalizedLink, To } from "./localized-link";
|
|
372
379
|
|
|
@@ -385,9 +392,8 @@ export const LocaleSwitcher: FC = () => {
|
|
|
385
392
|
<LocalizedLink
|
|
386
393
|
aria-current={localeEl === locale ? "page" : undefined}
|
|
387
394
|
aria-label={`${localeSwitcherLabel.value} ${getLocaleName(localeEl)}`}
|
|
388
|
-
onClick={() =>
|
|
389
|
-
params={{ locale: localeEl }}
|
|
390
|
-
to={pathWithoutLocale as To}
|
|
395
|
+
onClick={() => setLocaleInStorage(localeEl)}
|
|
396
|
+
params={{ locale: getPrefix(localeEl).localePrefix }}
|
|
391
397
|
>
|
|
392
398
|
<span>
|
|
393
399
|
{/* ロケール - 例: FR */}
|
|
@@ -465,15 +471,15 @@ function LayoutComponent() {
|
|
|
465
471
|
|
|
466
472
|
### ステップ11: ミドルウェアを追加(オプション)
|
|
467
473
|
|
|
468
|
-
`
|
|
474
|
+
`intlayerProxy` を使用して、アプリケーションにサーバーサイドルーティングを追加することもできます。このプラグインは、URL に基づいて現在のロケールを自動的に検出し、適切なロケールクッキーを設定します。ロケールが指定されていない場合、プラグインはユーザーのブラウザの言語設定に基づいて最も適切なロケールを判断します。ロケールが検出されない場合は、デフォルトのロケールにリダイレクトされます。
|
|
469
475
|
|
|
470
|
-
> `
|
|
476
|
+
> `intlayerProxy` を本番環境で使用するには、`vite-intlayer` パッケージを `devDependencies` から `dependencies` に切り替える必要があることに注意してください。
|
|
471
477
|
|
|
472
478
|
```typescript {3,7} fileName="vite.config.ts"
|
|
473
479
|
import { reactRouter } from "@react-router/dev/vite";
|
|
474
480
|
import tailwindcss from "@tailwindcss/vite";
|
|
475
481
|
import { defineConfig } from "vite";
|
|
476
|
-
import { intlayer,
|
|
482
|
+
import { intlayer, intlayerProxy } from "vite-intlayer";
|
|
477
483
|
import tsconfigPaths from "vite-tsconfig-paths";
|
|
478
484
|
|
|
479
485
|
export default defineConfig({
|
|
@@ -482,7 +488,7 @@ export default defineConfig({
|
|
|
482
488
|
reactRouter(),
|
|
483
489
|
tsconfigPaths(),
|
|
484
490
|
intlayer(),
|
|
485
|
-
|
|
491
|
+
intlayerProxy(),
|
|
486
492
|
],
|
|
487
493
|
});
|
|
488
494
|
```
|
|
@@ -1050,38 +1050,38 @@ const App = () => (
|
|
|
1050
1050
|
module.exports = App;
|
|
1051
1051
|
```
|
|
1052
1052
|
|
|
1053
|
-
並行して、`
|
|
1053
|
+
並行して、`intlayerProxy` を使用してアプリケーションにサーバーサイドルーティングを追加することもできます。このプラグインはURLに基づいて現在のロケールを自動的に検出し、適切なロケールクッキーを設定します。ロケールが指定されていない場合、プラグインはユーザーのブラウザの言語設定に基づいて最適なロケールを判別します。ロケールが検出されない場合は、デフォルトのロケールにリダイレクトします。
|
|
1054
1054
|
|
|
1055
1055
|
```typescript {3,7} fileName="vite.config.ts" codeFormat="typescript"
|
|
1056
1056
|
import { defineConfig } from "vite";
|
|
1057
1057
|
import preact from "@preact/preset-vite";
|
|
1058
|
-
import { intlayer,
|
|
1058
|
+
import { intlayer, intlayerProxy } from "vite-intlayer";
|
|
1059
1059
|
|
|
1060
1060
|
// https://vitejs.dev/config/
|
|
1061
1061
|
export default defineConfig({
|
|
1062
|
-
plugins: [preact(), intlayer(),
|
|
1062
|
+
plugins: [preact(), intlayer(), intlayerProxy()],
|
|
1063
1063
|
});
|
|
1064
1064
|
```
|
|
1065
1065
|
|
|
1066
1066
|
```javascript {3,7} fileName="vite.config.mjs" codeFormat="esm"
|
|
1067
1067
|
import { defineConfig } from "vite";
|
|
1068
1068
|
import preact from "@preact/preset-vite";
|
|
1069
|
-
import { intlayer,
|
|
1069
|
+
import { intlayer, intlayerProxy } from "vite-intlayer";
|
|
1070
1070
|
|
|
1071
1071
|
// https://vitejs.dev/config/
|
|
1072
1072
|
export default defineConfig({
|
|
1073
|
-
plugins: [preact(), intlayer(),
|
|
1073
|
+
plugins: [preact(), intlayer(), intlayerProxy()],
|
|
1074
1074
|
});
|
|
1075
1075
|
```
|
|
1076
1076
|
|
|
1077
1077
|
```javascript {3,7} fileName="vite.config.cjs" codeFormat="commonjs"
|
|
1078
1078
|
const { defineConfig } = require("vite");
|
|
1079
1079
|
const preact = require("@preact/preset-vite");
|
|
1080
|
-
const { intlayer,
|
|
1080
|
+
const { intlayer, intlayerProxy } = require("vite-intlayer");
|
|
1081
1081
|
|
|
1082
1082
|
// https://vitejs.dev/config/
|
|
1083
1083
|
module.exports = defineConfig({
|
|
1084
|
-
plugins: [preact(), intlayer(),
|
|
1084
|
+
plugins: [preact(), intlayer(), intlayerProxy()],
|
|
1085
1085
|
});
|
|
1086
1086
|
```
|
|
1087
1087
|
|
|
@@ -1015,38 +1015,38 @@ const App = () => (
|
|
|
1015
1015
|
);
|
|
1016
1016
|
```
|
|
1017
1017
|
|
|
1018
|
-
並行して、`
|
|
1018
|
+
並行して、`intlayerProxy` を使用してアプリケーションにサーバーサイドルーティングを追加することもできます。このプラグインは、URL に基づいて現在のロケールを自動的に検出し、適切なロケールクッキーを設定します。ロケールが指定されていない場合、プラグインはユーザーのブラウザの言語設定に基づいて最も適切なロケールを判断します。ロケールが検出されない場合は、デフォルトのロケールにリダイレクトします。
|
|
1019
1019
|
|
|
1020
1020
|
```typescript {3,7} fileName="vite.config.ts" codeFormat="typescript"
|
|
1021
1021
|
import { defineConfig } from "vite";
|
|
1022
1022
|
import react from "@vitejs/plugin-react-swc";
|
|
1023
|
-
import { intlayer,
|
|
1023
|
+
import { intlayer, intlayerProxy } from "vite-intlayer";
|
|
1024
1024
|
|
|
1025
1025
|
// https://vitejs.dev/config/
|
|
1026
1026
|
export default defineConfig({
|
|
1027
|
-
plugins: [react(), intlayer(),
|
|
1027
|
+
plugins: [react(), intlayer(), intlayerProxy()],
|
|
1028
1028
|
});
|
|
1029
1029
|
```
|
|
1030
1030
|
|
|
1031
1031
|
```javascript {3,7} fileName="vite.config.mjs" codeFormat="esm"
|
|
1032
1032
|
import { defineConfig } from "vite";
|
|
1033
1033
|
import react from "@vitejs/plugin-react-swc";
|
|
1034
|
-
import { intlayer,
|
|
1034
|
+
import { intlayer, intlayerProxy } from "vite-intlayer";
|
|
1035
1035
|
|
|
1036
1036
|
// https://vitejs.dev/config/
|
|
1037
1037
|
export default defineConfig({
|
|
1038
|
-
plugins: [react(), intlayer(),
|
|
1038
|
+
plugins: [react(), intlayer(), intlayerProxy()],
|
|
1039
1039
|
});
|
|
1040
1040
|
```
|
|
1041
1041
|
|
|
1042
1042
|
```javascript {3,7} fileName="vite.config.cjs" codeFormat="commonjs"
|
|
1043
1043
|
const { defineConfig } = require("vite");
|
|
1044
1044
|
const react = require("@vitejs/plugin-react-swc");
|
|
1045
|
-
const { intlayer,
|
|
1045
|
+
const { intlayer, intlayerProxy } = require("vite-intlayer");
|
|
1046
1046
|
|
|
1047
1047
|
// https://vitejs.dev/config/
|
|
1048
1048
|
module.exports = defineConfig({
|
|
1049
|
-
plugins: [react(), intlayer(),
|
|
1049
|
+
plugins: [react(), intlayer(), intlayerProxy()],
|
|
1050
1050
|
});
|
|
1051
1051
|
```
|
|
1052
1052
|
|
|
@@ -685,46 +685,46 @@ import LocaleSwitcher from "@components/LocaleSwitcher.vue";
|
|
|
685
685
|
</template>
|
|
686
686
|
```
|
|
687
687
|
|
|
688
|
-
同時に、`
|
|
688
|
+
同時に、`intlayerProxy` を使用してアプリケーションにサーバーサイドルーティングを追加することもできます。このプラグインはURLに基づいて現在のロケールを自動的に検出し、適切なロケールクッキーを設定します。ロケールが指定されていない場合、プラグインはユーザーのブラウザの言語設定に基づいて最適なロケールを判定します。ロケールが検出されない場合は、デフォルトのロケールにリダイレクトします。
|
|
689
689
|
|
|
690
690
|
```typescript {3,7} fileName="vite.config.ts" codeFormat="typescript"
|
|
691
691
|
import { defineConfig } from "vite";
|
|
692
692
|
import vue from "@vitejs/plugin-vue";
|
|
693
|
-
import { intlayer,
|
|
693
|
+
import { intlayer, intlayerProxy } from "vite-intlayer";
|
|
694
694
|
|
|
695
695
|
// https://vitejs.dev/config/
|
|
696
696
|
export default defineConfig({
|
|
697
|
-
plugins: [vue(), intlayer(),
|
|
697
|
+
plugins: [vue(), intlayer(), intlayerProxy()],
|
|
698
698
|
});
|
|
699
699
|
```
|
|
700
700
|
|
|
701
701
|
```javascript {3,7} fileName="vite.config.mjs" codeFormat="esm"
|
|
702
702
|
import { defineConfig } from "vite";
|
|
703
703
|
import vue from "@vitejs/plugin-vue";
|
|
704
|
-
import { intlayer,
|
|
704
|
+
import { intlayer, intlayerProxy } from "vite-intlayer";
|
|
705
705
|
|
|
706
706
|
// https://vitejs.dev/config/
|
|
707
707
|
export default defineConfig({
|
|
708
|
-
plugins: [vue(), intlayer(),
|
|
708
|
+
plugins: [vue(), intlayer(), intlayerProxy()],
|
|
709
709
|
});
|
|
710
710
|
```
|
|
711
711
|
|
|
712
712
|
```javascript {3,7} fileName="vite.config.cjs" codeFormat="commonjs"
|
|
713
713
|
const { defineConfig } = require("vite");
|
|
714
714
|
const vue = require("@vitejs/plugin-vue");
|
|
715
|
-
const { intlayer,
|
|
715
|
+
const { intlayer, intlayerProxy } = require("vite-intlayer");
|
|
716
716
|
|
|
717
717
|
// https://vitejs.dev/config/
|
|
718
718
|
module.exports = defineConfig({
|
|
719
|
-
plugins: [vue(), intlayer(),
|
|
719
|
+
plugins: [vue(), intlayer(), intlayerProxy()],
|
|
720
720
|
});
|
|
721
721
|
const { defineConfig } = require("vite");
|
|
722
722
|
const vue = require("@vitejs/plugin-vue");
|
|
723
|
-
const { intlayer,
|
|
723
|
+
const { intlayer, intlayerProxy } = require("vite-intlayer");
|
|
724
724
|
|
|
725
725
|
// https://vitejs.dev/config/
|
|
726
726
|
module.exports = defineConfig({
|
|
727
|
-
plugins: [vue(), intlayer(),
|
|
727
|
+
plugins: [vue(), intlayer(), intlayerProxy()],
|
|
728
728
|
});
|
|
729
729
|
```
|
|
730
730
|
|
|
@@ -1093,8 +1093,8 @@ import { type FC } from "react";
|
|
|
1093
1093
|
import Link from "next/link";
|
|
1094
1094
|
|
|
1095
1095
|
const LocaleSwitcher: FC = () => {
|
|
1096
|
-
const { locale, pathWithoutLocale, availableLocales } =
|
|
1097
|
-
|
|
1096
|
+
const { locale, pathWithoutLocale, availableLocales, setLocale } =
|
|
1097
|
+
useLocale();
|
|
1098
1098
|
|
|
1099
1099
|
return (
|
|
1100
1100
|
<div>
|
|
@@ -1106,7 +1106,7 @@ const LocaleSwitcher: FC = () => {
|
|
|
1106
1106
|
hrefLang={localeItem}
|
|
1107
1107
|
key={localeItem}
|
|
1108
1108
|
aria-current={locale === localeItem ? "page" : undefined}
|
|
1109
|
-
onClick={() =>
|
|
1109
|
+
onClick={() => setLocale(localeItem)}
|
|
1110
1110
|
>
|
|
1111
1111
|
<span>
|
|
1112
1112
|
{/* 로케일 - 예: FR */}
|
|
@@ -1145,8 +1145,8 @@ import { useLocale } from "next-intlayer";
|
|
|
1145
1145
|
import Link from "next/link";
|
|
1146
1146
|
|
|
1147
1147
|
const LocaleSwitcher = () => {
|
|
1148
|
-
const { locale, pathWithoutLocale, availableLocales } =
|
|
1149
|
-
|
|
1148
|
+
const { locale, pathWithoutLocale, availableLocales, setLocale } =
|
|
1149
|
+
useLocale();
|
|
1150
1150
|
|
|
1151
1151
|
return (
|
|
1152
1152
|
<div>
|
|
@@ -1158,7 +1158,7 @@ const LocaleSwitcher = () => {
|
|
|
1158
1158
|
hrefLang={localeItem}
|
|
1159
1159
|
key={localeItem}
|
|
1160
1160
|
aria-current={locale === localeItem ? "page" : undefined}
|
|
1161
|
-
onClick={() =>
|
|
1161
|
+
onClick={() => setLocale(localeItem)}
|
|
1162
1162
|
>
|
|
1163
1163
|
<span>
|
|
1164
1164
|
{/* 로케일 - 예: FR */}
|
|
@@ -1197,8 +1197,8 @@ const { useLocale } = require("next-intlayer");
|
|
|
1197
1197
|
const Link = require("next/link");
|
|
1198
1198
|
|
|
1199
1199
|
const LocaleSwitcher = () => {
|
|
1200
|
-
const { locale, pathWithoutLocale, availableLocales } =
|
|
1201
|
-
|
|
1200
|
+
const { locale, pathWithoutLocale, availableLocales, setLocale } =
|
|
1201
|
+
useLocale();
|
|
1202
1202
|
|
|
1203
1203
|
return (
|
|
1204
1204
|
<div>
|
|
@@ -1210,7 +1210,7 @@ const LocaleSwitcher = () => {
|
|
|
1210
1210
|
hrefLang={localeItem}
|
|
1211
1211
|
key={localeItem}
|
|
1212
1212
|
aria-current={locale === localeItem ? "page" : undefined}
|
|
1213
|
-
onClick={() =>
|
|
1213
|
+
onClick={() => setLocale(localeItem)}
|
|
1214
1214
|
>
|
|
1215
1215
|
<span>
|
|
1216
1216
|
{/* 로케일 - 예: FR */}
|
|
@@ -1197,8 +1197,8 @@ import { useLocale } from "next-intlayer";
|
|
|
1197
1197
|
import Link from "next/link";
|
|
1198
1198
|
|
|
1199
1199
|
export const LocaleSwitcher: FC = () => {
|
|
1200
|
-
const { locale, pathWithoutLocale, availableLocales } =
|
|
1201
|
-
|
|
1200
|
+
const { locale, pathWithoutLocale, availableLocales, setLocale } =
|
|
1201
|
+
useLocale();
|
|
1202
1202
|
|
|
1203
1203
|
return (
|
|
1204
1204
|
<div>
|
|
@@ -1210,7 +1210,7 @@ export const LocaleSwitcher: FC = () => {
|
|
|
1210
1210
|
hrefLang={localeItem}
|
|
1211
1211
|
key={localeItem}
|
|
1212
1212
|
aria-current={locale === localeItem ? "page" : undefined}
|
|
1213
|
-
onClick={() =>
|
|
1213
|
+
onClick={() => setLocale(localeItem)}
|
|
1214
1214
|
>
|
|
1215
1215
|
<span>
|
|
1216
1216
|
{/* 로케일 - 예: FR */}
|
|
@@ -1249,8 +1249,8 @@ import { useLocale } from "next-intlayer";
|
|
|
1249
1249
|
import Link from "next/link";
|
|
1250
1250
|
|
|
1251
1251
|
export const LocaleSwitcher = () => {
|
|
1252
|
-
const { locale, pathWithoutLocale, availableLocales } =
|
|
1253
|
-
|
|
1252
|
+
const { locale, pathWithoutLocale, availableLocales, setLocale } =
|
|
1253
|
+
useLocale();
|
|
1254
1254
|
|
|
1255
1255
|
return (
|
|
1256
1256
|
<div>
|
|
@@ -1262,7 +1262,7 @@ export const LocaleSwitcher = () => {
|
|
|
1262
1262
|
hrefLang={localeItem}
|
|
1263
1263
|
key={localeItem}
|
|
1264
1264
|
aria-current={locale === localeItem ? "page" : undefined}
|
|
1265
|
-
onClick={() =>
|
|
1265
|
+
onClick={() => setLocale(localeItem)}
|
|
1266
1266
|
>
|
|
1267
1267
|
<span>
|
|
1268
1268
|
{/* 로케일 - 예: FR */}
|
|
@@ -1301,7 +1301,8 @@ const { useLocale } = require("next-intlayer");
|
|
|
1301
1301
|
const Link = require("next/link");
|
|
1302
1302
|
|
|
1303
1303
|
export const LocaleSwitcher = () => {
|
|
1304
|
-
const { locale, pathWithoutLocale, availableLocales } =
|
|
1304
|
+
const { locale, pathWithoutLocale, availableLocales, setLocale } =
|
|
1305
|
+
useLocale();
|
|
1305
1306
|
|
|
1306
1307
|
return (
|
|
1307
1308
|
<div>
|
|
@@ -1313,7 +1314,7 @@ export const LocaleSwitcher = () => {
|
|
|
1313
1314
|
hrefLang={localeItem}
|
|
1314
1315
|
key={localeItem}
|
|
1315
1316
|
aria-current={locale === localeItem ? "page" : undefined}
|
|
1316
|
-
onClick={() =>
|
|
1317
|
+
onClick={() => setLocale(localeItem)}
|
|
1317
1318
|
>
|
|
1318
1319
|
<span>
|
|
1319
1320
|
{/* 로케일 - 예: FR */}
|