@intlayer/docs 7.1.0 → 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
|
@@ -177,7 +177,7 @@ export default withIntlayer(nextConfig);
|
|
|
177
177
|
사용자의 선호 로케일을 자동으로 감지하고 처리하기 위해 미들웨어를 설정합니다:
|
|
178
178
|
|
|
179
179
|
```typescript fileName="src/middleware.ts" codeFormat="typescript"
|
|
180
|
-
export {
|
|
180
|
+
export { intlayerProxy as middleware } from "next-intlayer/middleware";
|
|
181
181
|
|
|
182
182
|
export const config = {
|
|
183
183
|
matcher:
|
|
@@ -186,7 +186,7 @@ export const config = {
|
|
|
186
186
|
```
|
|
187
187
|
|
|
188
188
|
```javascript fileName="src/middleware.mjs" codeFormat="esm"
|
|
189
|
-
export {
|
|
189
|
+
export { intlayerProxy as middleware } from "next-intlayer/middleware";
|
|
190
190
|
|
|
191
191
|
export const config = {
|
|
192
192
|
matcher:
|
|
@@ -195,14 +195,14 @@ export const config = {
|
|
|
195
195
|
```
|
|
196
196
|
|
|
197
197
|
```javascript fileName="src/middleware.cjs" codeFormat="commonjs"
|
|
198
|
-
const {
|
|
198
|
+
const { intlayerProxy } = require("next-intlayer/middleware");
|
|
199
199
|
|
|
200
200
|
const config = {
|
|
201
201
|
matcher:
|
|
202
202
|
"/((?!api|static|assets|robots|sitemap|sw|service-worker|manifest|.*\\..*|_next).*)",
|
|
203
203
|
};
|
|
204
204
|
|
|
205
|
-
module.exports = { middleware:
|
|
205
|
+
module.exports = { middleware: intlayerProxy, config };
|
|
206
206
|
```
|
|
207
207
|
|
|
208
208
|
> `matcher` 매개변수를 애플리케이션의 경로에 맞게 조정하세요. 자세한 내용은 [Next.js의 matcher 구성 문서](https://nextjs.org/docs/app/building-your-application/routing/middleware)를 참조하세요.
|
|
@@ -1119,7 +1119,6 @@ import Link from "next/link";
|
|
|
1119
1119
|
|
|
1120
1120
|
const LocaleSwitcher: FC = () => {
|
|
1121
1121
|
const { locale, pathWithoutLocale, availableLocales } = useLocalePageRouter();
|
|
1122
|
-
const { setLocaleCookie } = useLocaleCookie();
|
|
1123
1122
|
|
|
1124
1123
|
return (
|
|
1125
1124
|
<div>
|
|
@@ -1131,7 +1130,7 @@ const LocaleSwitcher: FC = () => {
|
|
|
1131
1130
|
hrefLang={localeItem}
|
|
1132
1131
|
key={localeItem}
|
|
1133
1132
|
aria-current={locale === localeItem ? "page" : undefined}
|
|
1134
|
-
onClick={() =>
|
|
1133
|
+
onClick={() => setLocale(localeItem)}
|
|
1135
1134
|
>
|
|
1136
1135
|
<span>
|
|
1137
1136
|
{/* 로케일 - 예: FR */}
|
|
@@ -1169,7 +1168,6 @@ import Link from "next/link";
|
|
|
1169
1168
|
|
|
1170
1169
|
const LocaleSwitcher = () => {
|
|
1171
1170
|
const { locale, pathWithoutLocale, availableLocales } = useLocalePageRouter();
|
|
1172
|
-
const { setLocaleCookie } = useLocaleCookie();
|
|
1173
1171
|
|
|
1174
1172
|
return (
|
|
1175
1173
|
<div>
|
|
@@ -1181,7 +1179,7 @@ const LocaleSwitcher = () => {
|
|
|
1181
1179
|
hrefLang={localeItem}
|
|
1182
1180
|
key={localeItem}
|
|
1183
1181
|
aria-current={locale === localeItem ? "page" : undefined}
|
|
1184
|
-
onClick={() =>
|
|
1182
|
+
onClick={() => setLocale(localeItem)}
|
|
1185
1183
|
>
|
|
1186
1184
|
<span>
|
|
1187
1185
|
{/* 로케일 - 예: FR */}
|
|
@@ -1219,7 +1217,6 @@ const Link = require("next/link");
|
|
|
1219
1217
|
|
|
1220
1218
|
const LocaleSwitcher = () => {
|
|
1221
1219
|
const { locale, pathWithoutLocale, availableLocales } = useLocalePageRouter();
|
|
1222
|
-
const { setLocaleCookie } = useLocaleCookie();
|
|
1223
1220
|
|
|
1224
1221
|
return (
|
|
1225
1222
|
<select>
|
|
@@ -1229,7 +1226,7 @@ const LocaleSwitcher = () => {
|
|
|
1229
1226
|
href={getLocalizedUrl(pathWithoutLocale, localeItem)}
|
|
1230
1227
|
hrefLang={localeItem}
|
|
1231
1228
|
aria-current={locale === localeItem ? "page" : undefined}
|
|
1232
|
-
onClick={() =>
|
|
1229
|
+
onClick={() => setLocale(localeItem)}
|
|
1233
1230
|
>
|
|
1234
1231
|
<span>
|
|
1235
1232
|
{/* 로케일 - 예: FR */}
|
|
@@ -316,7 +316,7 @@ import {
|
|
|
316
316
|
getLocalizedUrl,
|
|
317
317
|
getPathWithoutLocale,
|
|
318
318
|
} from "intlayer";
|
|
319
|
-
import {
|
|
319
|
+
import { setLocaleInStorage, useIntlayer, useLocale } from "react-intlayer";
|
|
320
320
|
import { Link, useLocation } from "react-router";
|
|
321
321
|
|
|
322
322
|
export const LocaleSwitcher: FC = () => {
|
|
@@ -334,7 +334,7 @@ export const LocaleSwitcher: FC = () => {
|
|
|
334
334
|
<Link
|
|
335
335
|
aria-current={localeItem === locale ? "page" : undefined}
|
|
336
336
|
aria-label={`${localeSwitcherLabel.value} ${getLocaleName(localeItem)}`}
|
|
337
|
-
onClick={() =>
|
|
337
|
+
onClick={() => setLocale(localeItem)}
|
|
338
338
|
to={getLocalizedUrl(pathWithoutLocale, localeItem)}
|
|
339
339
|
>
|
|
340
340
|
<span>
|
|
@@ -403,18 +403,18 @@ export default function RootLayout() {
|
|
|
403
403
|
|
|
404
404
|
### 11단계: 미들웨어 추가 (선택 사항)
|
|
405
405
|
|
|
406
|
-
`
|
|
406
|
+
`intlayerProxy`를 사용하여 애플리케이션에 서버 사이드 라우팅을 추가할 수도 있습니다. 이 플러그인은 URL을 기반으로 현재 로케일을 자동으로 감지하고 적절한 로케일 쿠키를 설정합니다. 로케일이 지정되지 않은 경우, 플러그인은 사용자의 브라우저 언어 설정을 기반으로 가장 적합한 로케일을 결정합니다. 로케일이 감지되지 않으면 기본 로케일로 리디렉션합니다.
|
|
407
407
|
|
|
408
|
-
> `
|
|
408
|
+
> `intlayerProxy`를 프로덕션 환경에서 사용하려면 `vite-intlayer` 패키지를 `devDependencies`에서 `dependencies`로 변경해야 합니다.
|
|
409
409
|
|
|
410
410
|
```typescript {3,7} fileName="vite.config.ts"
|
|
411
411
|
import { defineConfig } from "vite";
|
|
412
412
|
import react from "@vitejs/plugin-react-swc";
|
|
413
|
-
import { intlayer,
|
|
413
|
+
import { intlayer, intlayerProxy } from "vite-intlayer";
|
|
414
414
|
|
|
415
415
|
// https://vitejs.dev/config/
|
|
416
416
|
export default defineConfig({
|
|
417
|
-
plugins: [react(), intlayer(),
|
|
417
|
+
plugins: [react(), intlayer(), intlayerProxy()],
|
|
418
418
|
});
|
|
419
419
|
```
|
|
420
420
|
|
|
@@ -200,6 +200,7 @@ import type { FC } from "react";
|
|
|
200
200
|
|
|
201
201
|
import { Link, type LinkComponentProps } from "@tanstack/react-router";
|
|
202
202
|
import { useLocale } from "react-intlayer";
|
|
203
|
+
import { getPrefix } from "intlayer";
|
|
203
204
|
|
|
204
205
|
export const LOCALE_ROUTE = "{-$locale}" as const;
|
|
205
206
|
|
|
@@ -229,12 +230,13 @@ type RemoveLocaleFromString<S extends string> = CollapseDoubleSlashes<
|
|
|
229
230
|
|
|
230
231
|
export const LocalizedLink: FC<LocalizedLinkProps> = (props) => {
|
|
231
232
|
const { locale } = useLocale();
|
|
233
|
+
const { localePrefix } = getPrefix(locale);
|
|
232
234
|
|
|
233
235
|
return (
|
|
234
236
|
<Link
|
|
235
237
|
{...props}
|
|
236
238
|
params={{
|
|
237
|
-
locale,
|
|
239
|
+
locale: localePrefix,
|
|
238
240
|
...(typeof props?.params === "object" ? props?.params : {}),
|
|
239
241
|
}}
|
|
240
242
|
to={`/${LOCALE_ROUTE}${props.to}` as LinkComponentProps["to"]}
|
|
@@ -251,43 +253,52 @@ export const LocalizedLink: FC<LocalizedLinkProps> = (props) => {
|
|
|
251
253
|
그 다음, 프로그래밍 방식의 내비게이션을 위해 `useLocalizedNavigate` 훅을 생성할 수 있습니다:
|
|
252
254
|
|
|
253
255
|
```tsx fileName="src/hooks/useLocalizedNavigate.tsx"
|
|
254
|
-
import { useLocale } from "react-intlayer";
|
|
255
256
|
import { useNavigate } from "@tanstack/react-router";
|
|
257
|
+
import { getPrefix } from "intlayer";
|
|
258
|
+
import { useLocale } from "react-intlayer";
|
|
256
259
|
import { LOCALE_ROUTE } from "@/components/localized-link";
|
|
257
260
|
import type { FileRouteTypes } from "@/routeTree.gen";
|
|
258
261
|
|
|
262
|
+
type StripLocalePrefix<T extends string> = T extends
|
|
263
|
+
| `/${typeof LOCALE_ROUTE}`
|
|
264
|
+
| `/${typeof LOCALE_ROUTE}/`
|
|
265
|
+
? "/"
|
|
266
|
+
: T extends `/${typeof LOCALE_ROUTE}/${infer Rest}`
|
|
267
|
+
? `/${Rest}`
|
|
268
|
+
: never;
|
|
269
|
+
|
|
270
|
+
type LocalizedTo = StripLocalePrefix<FileRouteTypes["to"]>;
|
|
271
|
+
|
|
272
|
+
type LocalizedNavigate = {
|
|
273
|
+
(to: LocalizedTo): ReturnType<ReturnType<typeof useNavigate>>;
|
|
274
|
+
(
|
|
275
|
+
opts: { to: LocalizedTo } & Record<string, unknown>
|
|
276
|
+
): ReturnType<ReturnType<typeof useNavigate>>;
|
|
277
|
+
};
|
|
278
|
+
|
|
259
279
|
export const useLocalizedNavigate = () => {
|
|
260
280
|
const navigate = useNavigate();
|
|
261
281
|
|
|
262
282
|
const { locale } = useLocale();
|
|
263
283
|
|
|
264
|
-
type StripLocalePrefix<T extends string> = T extends
|
|
265
|
-
| `/${typeof LOCALE_ROUTE}`
|
|
266
|
-
| `/${typeof LOCALE_ROUTE}/`
|
|
267
|
-
? "/"
|
|
268
|
-
: T extends `/${typeof LOCALE_ROUTE}/${infer Rest}`
|
|
269
|
-
? `/${Rest}`
|
|
270
|
-
: never;
|
|
271
|
-
|
|
272
|
-
type LocalizedTo = StripLocalePrefix<FileRouteTypes["to"]>;
|
|
273
|
-
|
|
274
|
-
interface LocalizedNavigate {
|
|
275
|
-
(to: LocalizedTo): ReturnType<typeof navigate>;
|
|
276
|
-
(
|
|
277
|
-
opts: { to: LocalizedTo } & Record<string, unknown>
|
|
278
|
-
): ReturnType<typeof navigate>;
|
|
279
|
-
}
|
|
280
|
-
|
|
281
284
|
const localizedNavigate: LocalizedNavigate = (args: any) => {
|
|
285
|
+
const { localePrefix } = getPrefix(locale);
|
|
286
|
+
|
|
282
287
|
if (typeof args === "string") {
|
|
283
|
-
return navigate({
|
|
288
|
+
return navigate({
|
|
289
|
+
to: `/${LOCALE_ROUTE}${args}`,
|
|
290
|
+
params: { locale: localePrefix },
|
|
291
|
+
});
|
|
284
292
|
}
|
|
285
293
|
|
|
286
294
|
const { to, ...rest } = args;
|
|
287
295
|
|
|
288
|
-
const
|
|
296
|
+
const localizedTo = `/${LOCALE_ROUTE}${to}` as any;
|
|
289
297
|
|
|
290
|
-
return navigate({
|
|
298
|
+
return navigate({
|
|
299
|
+
to: localizedTo,
|
|
300
|
+
params: { locale: localePrefix, ...rest } as any,
|
|
301
|
+
});
|
|
291
302
|
};
|
|
292
303
|
|
|
293
304
|
return localizedNavigate;
|
|
@@ -361,8 +372,13 @@ function RouteComponent() {
|
|
|
361
372
|
import type { FC } from "react";
|
|
362
373
|
|
|
363
374
|
import { useLocation } from "@tanstack/react-router";
|
|
364
|
-
import {
|
|
365
|
-
|
|
375
|
+
import {
|
|
376
|
+
getHTMLTextDir,
|
|
377
|
+
getLocaleName,
|
|
378
|
+
getPathWithoutLocale,
|
|
379
|
+
getPrefix,
|
|
380
|
+
} from "intlayer";
|
|
381
|
+
import { setLocaleInStorage, useIntlayer, useLocale } from "react-intlayer";
|
|
366
382
|
|
|
367
383
|
import { LocalizedLink, To } from "./localized-link";
|
|
368
384
|
|
|
@@ -381,9 +397,8 @@ export const LocaleSwitcher: FC = () => {
|
|
|
381
397
|
<LocalizedLink
|
|
382
398
|
aria-current={localeEl === locale ? "page" : undefined}
|
|
383
399
|
aria-label={`${localeSwitcherLabel.value} ${getLocaleName(localeEl)}`}
|
|
384
|
-
onClick={() =>
|
|
385
|
-
params={{ locale: localeEl }}
|
|
386
|
-
to={pathWithoutLocale as To}
|
|
400
|
+
onClick={() => setLocaleInStorage(localeEl)}
|
|
401
|
+
params={{ locale: getPrefix(localeEl).localePrefix }}
|
|
387
402
|
>
|
|
388
403
|
<span>
|
|
389
404
|
{/* 로케일 - 예: FR */}
|
|
@@ -461,15 +476,15 @@ function LayoutComponent() {
|
|
|
461
476
|
|
|
462
477
|
### 11단계: 미들웨어 추가 (선택 사항)
|
|
463
478
|
|
|
464
|
-
`
|
|
479
|
+
`intlayerProxy`를 사용하여 애플리케이션에 서버 사이드 라우팅을 추가할 수도 있습니다. 이 플러그인은 URL을 기반으로 현재 로케일을 자동으로 감지하고 적절한 로케일 쿠키를 설정합니다. 로케일이 지정되지 않은 경우, 플러그인은 사용자의 브라우저 언어 설정을 기반으로 가장 적합한 로케일을 결정합니다. 로케일이 감지되지 않으면 기본 로케일로 리디렉션합니다.
|
|
465
480
|
|
|
466
|
-
> `
|
|
481
|
+
> `intlayerProxy`를 프로덕션 환경에서 사용하려면 `vite-intlayer` 패키지를 `devDependencies`에서 `dependencies`로 변경해야 한다는 점에 유의하세요.
|
|
467
482
|
|
|
468
483
|
```typescript {3,7} fileName="vite.config.ts"
|
|
469
484
|
import { reactRouter } from "@react-router/dev/vite";
|
|
470
485
|
import tailwindcss from "@tailwindcss/vite";
|
|
471
486
|
import { defineConfig } from "vite";
|
|
472
|
-
import { intlayer,
|
|
487
|
+
import { intlayer, intlayerProxy } from "vite-intlayer";
|
|
473
488
|
import tsconfigPaths from "vite-tsconfig-paths";
|
|
474
489
|
|
|
475
490
|
export default defineConfig({
|
|
@@ -478,7 +493,7 @@ export default defineConfig({
|
|
|
478
493
|
reactRouter(),
|
|
479
494
|
tsconfigPaths(),
|
|
480
495
|
intlayer(),
|
|
481
|
-
|
|
496
|
+
intlayerProxy(),
|
|
482
497
|
],
|
|
483
498
|
});
|
|
484
499
|
```
|
|
@@ -1109,38 +1109,38 @@ const App = () => (
|
|
|
1109
1109
|
module.exports = App;
|
|
1110
1110
|
```
|
|
1111
1111
|
|
|
1112
|
-
병행하여, `
|
|
1112
|
+
병행하여, `intlayerProxy`을 사용하여 애플리케이션에 서버 사이드 라우팅을 추가할 수도 있습니다. 이 플러그인은 URL을 기반으로 현재 로케일을 자동으로 감지하고 적절한 로케일 쿠키를 설정합니다. 로케일이 지정되지 않은 경우, 플러그인은 사용자의 브라우저 언어 설정을 기준으로 가장 적합한 로케일을 결정합니다. 로케일이 감지되지 않으면 기본 로케일로 리디렉션합니다.
|
|
1113
1113
|
|
|
1114
1114
|
```typescript {3,7} fileName="vite.config.ts" codeFormat="typescript"
|
|
1115
1115
|
import { defineConfig } from "vite";
|
|
1116
1116
|
import preact from "@preact/preset-vite";
|
|
1117
|
-
import { intlayer,
|
|
1117
|
+
import { intlayer, intlayerProxy } from "vite-intlayer";
|
|
1118
1118
|
|
|
1119
1119
|
// https://vitejs.dev/config/
|
|
1120
1120
|
export default defineConfig({
|
|
1121
|
-
plugins: [preact(), intlayer(),
|
|
1121
|
+
plugins: [preact(), intlayer(), intlayerProxy()],
|
|
1122
1122
|
});
|
|
1123
1123
|
```
|
|
1124
1124
|
|
|
1125
1125
|
```javascript {3,7} fileName="vite.config.mjs" codeFormat="esm"
|
|
1126
1126
|
import { defineConfig } from "vite";
|
|
1127
1127
|
import preact from "@preact/preset-vite";
|
|
1128
|
-
import { intlayer,
|
|
1128
|
+
import { intlayer, intlayerProxy } from "vite-intlayer";
|
|
1129
1129
|
|
|
1130
1130
|
// https://vitejs.dev/config/
|
|
1131
1131
|
export default defineConfig({
|
|
1132
|
-
plugins: [preact(), intlayer(),
|
|
1132
|
+
plugins: [preact(), intlayer(), intlayerProxy()],
|
|
1133
1133
|
});
|
|
1134
1134
|
```
|
|
1135
1135
|
|
|
1136
1136
|
```javascript {3,7} fileName="vite.config.cjs" codeFormat="commonjs"
|
|
1137
1137
|
const { defineConfig } = require("vite");
|
|
1138
1138
|
const preact = require("@preact/preset-vite");
|
|
1139
|
-
const { intlayer,
|
|
1139
|
+
const { intlayer, intlayerProxy } = require("vite-intlayer");
|
|
1140
1140
|
|
|
1141
1141
|
// https://vitejs.dev/config/
|
|
1142
1142
|
module.exports = defineConfig({
|
|
1143
|
-
plugins: [preact(), intlayer(),
|
|
1143
|
+
plugins: [preact(), intlayer(), intlayerProxy()],
|
|
1144
1144
|
});
|
|
1145
1145
|
```
|
|
1146
1146
|
|
|
@@ -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
|
|
|
@@ -689,46 +689,46 @@ import LocaleSwitcher from "@components/LocaleSwitcher.vue";
|
|
|
689
689
|
</template>
|
|
690
690
|
```
|
|
691
691
|
|
|
692
|
-
동시에, `
|
|
692
|
+
동시에, `intlayerProxy`을 사용하여 애플리케이션에 서버 사이드 라우팅을 추가할 수도 있습니다. 이 플러그인은 URL을 기반으로 현재 로케일을 자동으로 감지하고 적절한 로케일 쿠키를 설정합니다. 로케일이 지정되지 않은 경우, 사용자의 브라우저 언어 설정을 기반으로 가장 적합한 로케일을 결정합니다. 로케일이 감지되지 않으면 기본 로케일로 리디렉션합니다.
|
|
693
693
|
|
|
694
694
|
```typescript {3,7} fileName="vite.config.ts" codeFormat="typescript"
|
|
695
695
|
import { defineConfig } from "vite";
|
|
696
696
|
import vue from "@vitejs/plugin-vue";
|
|
697
|
-
import { intlayer,
|
|
697
|
+
import { intlayer, intlayerProxy } from "vite-intlayer";
|
|
698
698
|
|
|
699
699
|
// https://vitejs.dev/config/
|
|
700
700
|
export default defineConfig({
|
|
701
|
-
plugins: [vue(), intlayer(),
|
|
701
|
+
plugins: [vue(), intlayer(), intlayerProxy()],
|
|
702
702
|
});
|
|
703
703
|
```
|
|
704
704
|
|
|
705
705
|
```javascript {3,7} fileName="vite.config.mjs" codeFormat="esm"
|
|
706
706
|
import { defineConfig } from "vite";
|
|
707
707
|
import vue from "@vitejs/plugin-vue";
|
|
708
|
-
import { intlayer,
|
|
708
|
+
import { intlayer, intlayerProxy } from "vite-intlayer";
|
|
709
709
|
|
|
710
710
|
// https://vitejs.dev/config/
|
|
711
711
|
export default defineConfig({
|
|
712
|
-
plugins: [vue(), intlayer(),
|
|
712
|
+
plugins: [vue(), intlayer(), intlayerProxy()],
|
|
713
713
|
});
|
|
714
714
|
```
|
|
715
715
|
|
|
716
716
|
```javascript {3,7} fileName="vite.config.cjs" codeFormat="commonjs"
|
|
717
717
|
const { defineConfig } = require("vite");
|
|
718
718
|
const vue = require("@vitejs/plugin-vue");
|
|
719
|
-
const { intlayer,
|
|
719
|
+
const { intlayer, intlayerProxy } = require("vite-intlayer");
|
|
720
720
|
|
|
721
721
|
// https://vitejs.dev/config/
|
|
722
722
|
module.exports = defineConfig({
|
|
723
|
-
plugins: [vue(), intlayer(),
|
|
723
|
+
plugins: [vue(), intlayer(), intlayerProxy()],
|
|
724
724
|
});
|
|
725
725
|
const { defineConfig } = require("vite");
|
|
726
726
|
const vue = require("@vitejs/plugin-vue");
|
|
727
|
-
const { intlayer,
|
|
727
|
+
const { intlayer, intlayerProxy } = require("vite-intlayer");
|
|
728
728
|
|
|
729
729
|
// https://vitejs.dev/config/
|
|
730
730
|
module.exports = defineConfig({
|
|
731
|
-
plugins: [vue(), intlayer(),
|
|
731
|
+
plugins: [vue(), intlayer(), intlayerProxy()],
|
|
732
732
|
});
|
|
733
733
|
```
|
|
734
734
|
|
|
@@ -278,7 +278,7 @@ Gwiazdki na GitHub są silnym wskaźnikiem popularności projektu, zaufania spo
|
|
|
278
278
|
|
|
279
279
|
Gwiazdy na GitHubie są silnym wskaźnikiem popularności projektu, zaufania społeczności oraz jego długoterminowej istotności. Choć nie są bezpośrednią miarą jakości technicznej, odzwierciedlają, ilu deweloperów uważa projekt za użyteczny, śledzi jego rozwój i jest skłonnych go przyjąć. Przy szacowaniu wartości projektu, gwiazdy pomagają porównać zainteresowanie różnymi alternatywami oraz dostarczają wglądu w rozwój ekosystemu.
|
|
280
280
|
|
|
281
|
-
[](https://www.star-history.com/#formatjs/formatjs&i18next/react-i18next&i18next/i18next&i18next/next-i18next&lingui/js-lingui&amannn/next-intl&intlify/vue-i18n&aymericzip/intlayer)
|
|
281
|
+
[](https://www.star-history.com/#formatjs/formatjs&i18next/react-i18next&i18next/i18next&i18next/next-i18next&lingui/js-lingui&amannn/next-intl&intlify/vue-i18n&opral/monorepo&aymericzip/intlayer)
|
|
282
282
|
|
|
283
283
|
---
|
|
284
284
|
|
|
@@ -167,7 +167,7 @@ export default withIntlayer(nextConfig);
|
|
|
167
167
|
Skonfiguruj middleware, aby automatycznie wykrywać i obsługiwać preferowaną lokalizację użytkownika:
|
|
168
168
|
|
|
169
169
|
```typescript fileName="src/middleware.ts" codeFormat="typescript"
|
|
170
|
-
export {
|
|
170
|
+
export { intlayerProxy as middleware } from "next-intlayer/middleware";
|
|
171
171
|
|
|
172
172
|
export const config = {
|
|
173
173
|
matcher:
|
|
@@ -176,7 +176,7 @@ export const config = {
|
|
|
176
176
|
```
|
|
177
177
|
|
|
178
178
|
```javascript fileName="src/middleware.mjs" codeFormat="esm"
|
|
179
|
-
export {
|
|
179
|
+
export { intlayerProxy as middleware } from "next-intlayer/middleware";
|
|
180
180
|
|
|
181
181
|
export const config = {
|
|
182
182
|
matcher:
|
|
@@ -185,14 +185,14 @@ export const config = {
|
|
|
185
185
|
```
|
|
186
186
|
|
|
187
187
|
```javascript fileName="src/middleware.cjs" codeFormat="commonjs"
|
|
188
|
-
const {
|
|
188
|
+
const { intlayerProxy } = require("next-intlayer/middleware");
|
|
189
189
|
|
|
190
190
|
const config = {
|
|
191
191
|
matcher:
|
|
192
192
|
"/((?!api|static|assets|robots|sitemap|sw|service-worker|manifest|.*\\..*|_next).*)",
|
|
193
193
|
};
|
|
194
194
|
|
|
195
|
-
module.exports = { middleware:
|
|
195
|
+
module.exports = { middleware: intlayerProxy, config };
|
|
196
196
|
```
|
|
197
197
|
|
|
198
198
|
> Dostosuj parametr `matcher`, aby odpowiadał trasom Twojej aplikacji. Więcej informacji znajdziesz w [dokumentacji Next.js dotyczącej konfigurowania matcher](https://nextjs.org/docs/app/building-your-application/routing/middleware).
|
|
@@ -1120,7 +1120,6 @@ import Link from "next/link";
|
|
|
1120
1120
|
|
|
1121
1121
|
const LocaleSwitcher: FC = () => {
|
|
1122
1122
|
const { locale, pathWithoutLocale, availableLocales } = useLocalePageRouter();
|
|
1123
|
-
const { setLocaleCookie } = useLocaleCookie();
|
|
1124
1123
|
|
|
1125
1124
|
return (
|
|
1126
1125
|
<div>
|
|
@@ -1132,7 +1131,7 @@ const LocaleSwitcher: FC = () => {
|
|
|
1132
1131
|
hrefLang={localeItem}
|
|
1133
1132
|
key={localeItem}
|
|
1134
1133
|
aria-current={locale === localeItem ? "page" : undefined}
|
|
1135
|
-
onClick={() =>
|
|
1134
|
+
onClick={() => setLocale(localeItem)}
|
|
1136
1135
|
>
|
|
1137
1136
|
<span>
|
|
1138
1137
|
{/* Lokalizacja - np. FR */}
|
|
@@ -1170,7 +1169,6 @@ import Link from "next/link";
|
|
|
1170
1169
|
|
|
1171
1170
|
const LocaleSwitcher = () => {
|
|
1172
1171
|
const { locale, pathWithoutLocale, availableLocales } = useLocalePageRouter();
|
|
1173
|
-
const { setLocaleCookie } = useLocaleCookie();
|
|
1174
1172
|
|
|
1175
1173
|
return (
|
|
1176
1174
|
<div>
|
|
@@ -1182,7 +1180,7 @@ const LocaleSwitcher = () => {
|
|
|
1182
1180
|
hrefLang={localeItem}
|
|
1183
1181
|
key={localeItem}
|
|
1184
1182
|
aria-current={locale === localeItem ? "page" : undefined}
|
|
1185
|
-
onClick={() =>
|
|
1183
|
+
onClick={() => setLocale(localeItem)}
|
|
1186
1184
|
>
|
|
1187
1185
|
<span>
|
|
1188
1186
|
{/* Lokalizacja - np. FR */}
|
|
@@ -1220,7 +1218,6 @@ const Link = require("next/link");
|
|
|
1220
1218
|
|
|
1221
1219
|
const LocaleSwitcher = () => {
|
|
1222
1220
|
const { locale, pathWithoutLocale, availableLocales } = useLocalePageRouter();
|
|
1223
|
-
const { setLocaleCookie } = useLocaleCookie();
|
|
1224
1221
|
|
|
1225
1222
|
return (
|
|
1226
1223
|
<select>
|
|
@@ -1230,7 +1227,7 @@ const LocaleSwitcher = () => {
|
|
|
1230
1227
|
href={getLocalizedUrl(pathWithoutLocale, localeItem)}
|
|
1231
1228
|
hrefLang={localeItem}
|
|
1232
1229
|
aria-current={locale === localeItem ? "page" : undefined}
|
|
1233
|
-
onClick={() =>
|
|
1230
|
+
onClick={() => setLocale(localeItem)}
|
|
1234
1231
|
>
|
|
1235
1232
|
<span>
|
|
1236
1233
|
{/* Lokalizacja - np. FR */}
|
|
@@ -333,7 +333,7 @@ import {
|
|
|
333
333
|
getLocalizedUrl,
|
|
334
334
|
getPathWithoutLocale,
|
|
335
335
|
} from "intlayer";
|
|
336
|
-
import {
|
|
336
|
+
import { setLocaleInStorage, useIntlayer, useLocale } from "react-intlayer";
|
|
337
337
|
import { Link, useLocation } from "react-router";
|
|
338
338
|
|
|
339
339
|
export const LocaleSwitcher: FC = () => {
|
|
@@ -351,7 +351,7 @@ export const LocaleSwitcher: FC = () => {
|
|
|
351
351
|
<Link
|
|
352
352
|
aria-current={localeItem === locale ? "page" : undefined}
|
|
353
353
|
aria-label={`${localeSwitcherLabel.value} ${getLocaleName(localeItem)}`}
|
|
354
|
-
onClick={() =>
|
|
354
|
+
onClick={() => setLocale(localeItem)}
|
|
355
355
|
to={getLocalizedUrl(pathWithoutLocale, localeItem)}
|
|
356
356
|
>
|
|
357
357
|
<span>
|
|
@@ -420,18 +420,18 @@ export default function RootLayout() {
|
|
|
420
420
|
|
|
421
421
|
### Krok 11: Dodaj middleware (opcjonalnie)
|
|
422
422
|
|
|
423
|
-
Możesz również użyć `
|
|
423
|
+
Możesz również użyć `intlayerProxy`, aby dodać routing po stronie serwera do swojej aplikacji. Ten plugin automatycznie wykryje aktualny locale na podstawie URL i ustawi odpowiedni cookie locale. Jeśli locale nie jest określone, plugin wybierze najbardziej odpowiedni locale na podstawie preferencji językowych przeglądarki użytkownika. Jeśli nie zostanie wykryty żaden locale, nastąpi przekierowanie do domyślnego locale.
|
|
424
424
|
|
|
425
|
-
> Zauważ, że aby używać `
|
|
425
|
+
> Zauważ, że aby używać `intlayerProxy` w produkcji, musisz przenieść pakiet `vite-intlayer` z `devDependencies` do `dependencies`.
|
|
426
426
|
|
|
427
427
|
```typescript {3,7} fileName="vite.config.ts"
|
|
428
428
|
import { defineConfig } from "vite";
|
|
429
429
|
import react from "@vitejs/plugin-react-swc";
|
|
430
|
-
import { intlayer,
|
|
430
|
+
import { intlayer, intlayerProxy } from "vite-intlayer";
|
|
431
431
|
|
|
432
432
|
// https://vitejs.dev/config/
|
|
433
433
|
export default defineConfig({
|
|
434
|
-
plugins: [react(), intlayer(),
|
|
434
|
+
plugins: [react(), intlayer(), intlayerProxy()],
|
|
435
435
|
});
|
|
436
436
|
```
|
|
437
437
|
|
|
@@ -240,12 +240,13 @@ type RemoveLocaleFromString<S extends string> = CollapseDoubleSlashes<
|
|
|
240
240
|
|
|
241
241
|
export const LocalizedLink: FC<LocalizedLinkProps> = (props) => {
|
|
242
242
|
const { locale } = useLocale();
|
|
243
|
+
const { localePrefix } = getPrefix(locale);
|
|
243
244
|
|
|
244
245
|
return (
|
|
245
246
|
<Link
|
|
246
247
|
{...props}
|
|
247
248
|
params={{
|
|
248
|
-
locale,
|
|
249
|
+
locale: localePrefix,
|
|
249
250
|
...(typeof props?.params === "object" ? props?.params : {}),
|
|
250
251
|
}}
|
|
251
252
|
to={`/${LOCALE_ROUTE}${props.to}` as LinkComponentProps["to"]}
|
|
@@ -372,8 +373,13 @@ Utwórz komponent, który pozwoli użytkownikom zmieniać języki:
|
|
|
372
373
|
import type { FC } from "react";
|
|
373
374
|
|
|
374
375
|
import { useLocation } from "@tanstack/react-router";
|
|
375
|
-
import {
|
|
376
|
-
|
|
376
|
+
import {
|
|
377
|
+
getHTMLTextDir,
|
|
378
|
+
getLocaleName,
|
|
379
|
+
getPathWithoutLocale,
|
|
380
|
+
getPrefix,
|
|
381
|
+
} from "intlayer";
|
|
382
|
+
import { setLocaleInStorage, useIntlayer, useLocale } from "react-intlayer";
|
|
377
383
|
|
|
378
384
|
import { LocalizedLink, To } from "./localized-link";
|
|
379
385
|
|
|
@@ -392,9 +398,8 @@ export const LocaleSwitcher: FC = () => {
|
|
|
392
398
|
<LocalizedLink
|
|
393
399
|
aria-current={localeEl === locale ? "page" : undefined}
|
|
394
400
|
aria-label={`${localeSwitcherLabel.value} ${getLocaleName(localeEl)}`}
|
|
395
|
-
onClick={() =>
|
|
396
|
-
params={{ locale: localeEl }}
|
|
397
|
-
to={pathWithoutLocale as To}
|
|
401
|
+
onClick={() => setLocaleInStorage(localeEl)}
|
|
402
|
+
params={{ locale: getPrefix(localeEl).localePrefix }}
|
|
398
403
|
>
|
|
399
404
|
<span>
|
|
400
405
|
{/* Lokalizacja - np. FR */}
|
|
@@ -472,15 +477,15 @@ function LayoutComponent() {
|
|
|
472
477
|
|
|
473
478
|
### Krok 11: Dodaj middleware (opcjonalnie)
|
|
474
479
|
|
|
475
|
-
Możesz również użyć `
|
|
480
|
+
Możesz również użyć `intlayerProxy`, aby dodać routing po stronie serwera do swojej aplikacji. Ten plugin automatycznie wykryje aktualny locale na podstawie URL i ustawi odpowiedni cookie locale. Jeśli nie zostanie określony żaden locale, plugin wybierze najbardziej odpowiedni locale na podstawie preferencji językowych przeglądarki użytkownika. Jeśli nie zostanie wykryty żaden locale, nastąpi przekierowanie do domyślnego locale.
|
|
476
481
|
|
|
477
|
-
> Uwaga: aby używać `
|
|
482
|
+
> Uwaga: aby używać `intlayerProxy` w produkcji, musisz przenieść pakiet `vite-intlayer` z `devDependencies` do `dependencies`.
|
|
478
483
|
|
|
479
484
|
```typescript {3,7} fileName="vite.config.ts"
|
|
480
485
|
import { reactRouter } from "@react-router/dev/vite";
|
|
481
486
|
import tailwindcss from "@tailwindcss/vite";
|
|
482
487
|
import { defineConfig } from "vite";
|
|
483
|
-
import { intlayer,
|
|
488
|
+
import { intlayer, intlayerProxy } from "vite-intlayer";
|
|
484
489
|
import tsconfigPaths from "vite-tsconfig-paths";
|
|
485
490
|
|
|
486
491
|
export default defineConfig({
|
|
@@ -489,7 +494,7 @@ export default defineConfig({
|
|
|
489
494
|
reactRouter(),
|
|
490
495
|
tsconfigPaths(),
|
|
491
496
|
intlayer(),
|
|
492
|
-
|
|
497
|
+
intlayerProxy(),
|
|
493
498
|
],
|
|
494
499
|
});
|
|
495
500
|
```
|