@intlayer/docs 8.3.0-canary.4 → 8.3.1
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/docs/ar/compiler.md +84 -49
- package/docs/ar/configuration.md +80 -37
- package/docs/ar/intlayer_with_nextjs_16.md +174 -1
- package/docs/ar/intlayer_with_nextjs_compiler.md +174 -1
- package/docs/ar/intlayer_with_react_router_v7.md +224 -1
- package/docs/ar/intlayer_with_react_router_v7_fs_routes.md +225 -1
- package/docs/ar/intlayer_with_svelte_kit.md +175 -2
- package/docs/ar/intlayer_with_tanstack.md +176 -1
- package/docs/ar/intlayer_with_vite+preact.md +174 -1
- package/docs/ar/intlayer_with_vite+react.md +174 -1
- package/docs/ar/intlayer_with_vite+solid.md +174 -1
- package/docs/ar/intlayer_with_vite+svelte.md +174 -1
- package/docs/ar/intlayer_with_vite+vue.md +174 -1
- package/docs/de/compiler.md +83 -48
- package/docs/de/configuration.md +434 -212
- package/docs/de/intlayer_with_nextjs_16.md +176 -1
- package/docs/de/intlayer_with_nextjs_compiler.md +106 -349
- package/docs/de/intlayer_with_react_router_v7.md +225 -2
- package/docs/de/intlayer_with_react_router_v7_fs_routes.md +221 -79
- package/docs/de/intlayer_with_svelte_kit.md +158 -2
- package/docs/de/intlayer_with_tanstack.md +159 -1
- package/docs/de/intlayer_with_vite+preact.md +157 -1
- package/docs/de/intlayer_with_vite+react.md +157 -1
- package/docs/de/intlayer_with_vite+solid.md +159 -3
- package/docs/de/intlayer_with_vite+svelte.md +157 -1
- package/docs/de/intlayer_with_vite+vue.md +157 -1
- package/docs/en/compiler.md +60 -33
- package/docs/en/configuration.md +80 -57
- package/docs/en/intlayer_with_nextjs_16.md +176 -0
- package/docs/en/intlayer_with_nextjs_compiler.md +179 -1
- package/docs/en/intlayer_with_react_router_v7.md +159 -0
- package/docs/en/intlayer_with_react_router_v7_fs_routes.md +159 -0
- package/docs/en/intlayer_with_svelte_kit.md +159 -0
- package/docs/en/intlayer_with_tanstack.md +160 -1
- package/docs/en/intlayer_with_vite+preact.md +159 -0
- package/docs/en/intlayer_with_vite+react.md +159 -0
- package/docs/en/intlayer_with_vite+solid.md +148 -27
- package/docs/en/intlayer_with_vite+svelte.md +159 -0
- package/docs/en/intlayer_with_vite+vue.md +142 -41
- package/docs/en-GB/compiler.md +66 -34
- package/docs/en-GB/configuration.md +78 -36
- package/docs/es/compiler.md +83 -48
- package/docs/es/configuration.md +429 -206
- package/docs/es/intlayer_with_adonisjs.md +1 -1
- package/docs/es/intlayer_with_express.md +1 -1
- package/docs/es/intlayer_with_fastify.md +1 -1
- package/docs/es/intlayer_with_hono.md +1 -1
- package/docs/es/intlayer_with_nestjs.md +1 -1
- package/docs/es/intlayer_with_nextjs_16.md +176 -3
- package/docs/es/intlayer_with_nextjs_compiler.md +175 -2
- package/docs/es/intlayer_with_nuxt.md +1 -1
- package/docs/es/intlayer_with_react_router_v7.md +227 -4
- package/docs/es/intlayer_with_react_router_v7_fs_routes.md +162 -4
- package/docs/es/intlayer_with_svelte_kit.md +158 -2
- package/docs/es/intlayer_with_tanstack.md +160 -2
- package/docs/es/intlayer_with_vite+preact.md +162 -6
- package/docs/es/intlayer_with_vite+react.md +160 -4
- package/docs/es/intlayer_with_vite+solid.md +163 -7
- package/docs/es/intlayer_with_vite+svelte.md +157 -1
- package/docs/es/intlayer_with_vite+vue.md +165 -9
- package/docs/fr/compiler.md +81 -46
- package/docs/fr/configuration.md +355 -134
- package/docs/fr/intlayer_with_adonisjs.md +1 -1
- package/docs/fr/intlayer_with_express.md +1 -1
- package/docs/fr/intlayer_with_fastify.md +1 -1
- package/docs/fr/intlayer_with_hono.md +1 -1
- package/docs/fr/intlayer_with_nestjs.md +1 -1
- package/docs/fr/intlayer_with_nextjs_16.md +183 -7
- package/docs/fr/intlayer_with_nextjs_compiler.md +179 -3
- package/docs/fr/intlayer_with_react_router_v7.md +229 -3
- package/docs/fr/intlayer_with_react_router_v7_fs_routes.md +237 -6
- package/docs/fr/intlayer_with_svelte_kit.md +158 -2
- package/docs/fr/intlayer_with_tanstack.md +159 -1
- package/docs/fr/intlayer_with_vite+preact.md +164 -8
- package/docs/fr/intlayer_with_vite+react.md +162 -6
- package/docs/fr/intlayer_with_vite+solid.md +163 -7
- package/docs/fr/intlayer_with_vite+svelte.md +157 -1
- package/docs/fr/intlayer_with_vite+vue.md +164 -8
- package/docs/hi/compiler.md +81 -46
- package/docs/hi/configuration.md +87 -44
- package/docs/hi/intlayer_with_nextjs_16.md +174 -1
- package/docs/hi/intlayer_with_nextjs_compiler.md +174 -1
- package/docs/hi/intlayer_with_react_router_v7.md +224 -1
- package/docs/hi/intlayer_with_react_router_v7_fs_routes.md +225 -1
- package/docs/hi/intlayer_with_svelte_kit.md +158 -2
- package/docs/hi/intlayer_with_tanstack.md +159 -1
- package/docs/hi/intlayer_with_vite+preact.md +157 -1
- package/docs/hi/intlayer_with_vite+react.md +157 -1
- package/docs/hi/intlayer_with_vite+solid.md +157 -1
- package/docs/hi/intlayer_with_vite+svelte.md +157 -1
- package/docs/hi/intlayer_with_vite+vue.md +157 -1
- package/docs/id/compiler.md +84 -51
- package/docs/id/configuration.md +83 -45
- package/docs/id/intlayer_with_nextjs_16.md +174 -1
- package/docs/id/intlayer_with_nextjs_compiler.md +174 -1
- package/docs/id/intlayer_with_react_router_v7.md +224 -1
- package/docs/id/intlayer_with_react_router_v7_fs_routes.md +225 -1
- package/docs/id/intlayer_with_svelte_kit.md +158 -2
- package/docs/id/intlayer_with_tanstack.md +159 -1
- package/docs/id/intlayer_with_vite+preact.md +157 -1
- package/docs/id/intlayer_with_vite+react.md +157 -1
- package/docs/id/intlayer_with_vite+solid.md +157 -1
- package/docs/id/intlayer_with_vite+svelte.md +157 -1
- package/docs/id/intlayer_with_vite+vue.md +157 -1
- package/docs/it/compiler.md +81 -46
- package/docs/it/configuration.md +426 -204
- package/docs/it/intlayer_with_nextjs_16.md +174 -1
- package/docs/it/intlayer_with_nextjs_compiler.md +174 -1
- package/docs/it/intlayer_with_react_router_v7.md +225 -2
- package/docs/it/intlayer_with_react_router_v7_fs_routes.md +226 -2
- package/docs/it/intlayer_with_svelte_kit.md +158 -2
- package/docs/it/intlayer_with_tanstack.md +159 -1
- package/docs/it/intlayer_with_vite+preact.md +157 -1
- package/docs/it/intlayer_with_vite+react.md +157 -1
- package/docs/it/intlayer_with_vite+solid.md +159 -3
- package/docs/it/intlayer_with_vite+svelte.md +157 -1
- package/docs/it/intlayer_with_vite+vue.md +157 -1
- package/docs/ja/compiler.md +94 -58
- package/docs/ja/configuration.md +88 -45
- package/docs/ja/intlayer_with_nextjs_16.md +174 -1
- package/docs/ja/intlayer_with_nextjs_compiler.md +174 -1
- package/docs/ja/intlayer_with_react_router_v7.md +184 -394
- package/docs/ja/intlayer_with_react_router_v7_fs_routes.md +226 -2
- package/docs/ja/intlayer_with_svelte_kit.md +119 -595
- package/docs/ja/intlayer_with_tanstack.md +131 -642
- package/docs/ja/intlayer_with_vite+preact.md +111 -1231
- package/docs/ja/intlayer_with_vite+react.md +129 -1304
- package/docs/ja/intlayer_with_vite+solid.md +159 -3
- package/docs/ja/intlayer_with_vite+svelte.md +157 -1
- package/docs/ja/intlayer_with_vite+vue.md +157 -1
- package/docs/ko/compiler.md +88 -52
- package/docs/ko/configuration.md +87 -44
- package/docs/ko/intlayer_with_nextjs_16.md +174 -1
- package/docs/ko/intlayer_with_nextjs_compiler.md +174 -1
- package/docs/ko/intlayer_with_react_router_v7.md +225 -2
- package/docs/ko/intlayer_with_react_router_v7_fs_routes.md +226 -2
- package/docs/ko/intlayer_with_svelte_kit.md +158 -2
- package/docs/ko/intlayer_with_tanstack.md +159 -1
- package/docs/ko/intlayer_with_vite+preact.md +157 -1
- package/docs/ko/intlayer_with_vite+react.md +157 -1
- package/docs/ko/intlayer_with_vite+solid.md +159 -3
- package/docs/ko/intlayer_with_vite+svelte.md +157 -1
- package/docs/ko/intlayer_with_vite+vue.md +157 -1
- package/docs/pl/compiler.md +84 -51
- package/docs/pl/configuration.md +83 -37
- package/docs/pl/intlayer_with_nextjs_16.md +174 -1
- package/docs/pl/intlayer_with_nextjs_compiler.md +174 -1
- package/docs/pl/intlayer_with_react_router_v7.md +224 -1
- package/docs/pl/intlayer_with_react_router_v7_fs_routes.md +225 -1
- package/docs/pl/intlayer_with_svelte_kit.md +158 -2
- package/docs/pl/intlayer_with_tanstack.md +159 -1
- package/docs/pl/intlayer_with_vite+preact.md +157 -1
- package/docs/pl/intlayer_with_vite+react.md +157 -1
- package/docs/pl/intlayer_with_vite+solid.md +157 -1
- package/docs/pl/intlayer_with_vite+svelte.md +157 -1
- package/docs/pl/intlayer_with_vite+vue.md +157 -1
- package/docs/pt/compiler.md +81 -46
- package/docs/pt/configuration.md +404 -194
- package/docs/pt/intlayer_with_nextjs_16.md +174 -1
- package/docs/pt/intlayer_with_nextjs_compiler.md +174 -1
- package/docs/pt/intlayer_with_react_router_v7.md +224 -1
- package/docs/pt/intlayer_with_react_router_v7_fs_routes.md +225 -1
- package/docs/pt/intlayer_with_svelte_kit.md +158 -2
- package/docs/pt/intlayer_with_tanstack.md +159 -1
- package/docs/pt/intlayer_with_vite+preact.md +157 -1
- package/docs/pt/intlayer_with_vite+react.md +157 -1
- package/docs/pt/intlayer_with_vite+solid.md +157 -1
- package/docs/pt/intlayer_with_vite+svelte.md +157 -1
- package/docs/pt/intlayer_with_vite+vue.md +157 -1
- package/docs/ru/compiler.md +90 -57
- package/docs/ru/configuration.md +76 -46
- package/docs/ru/intlayer_with_nextjs_16.md +174 -1
- package/docs/ru/intlayer_with_nextjs_compiler.md +174 -1
- package/docs/ru/intlayer_with_react_router_v7.md +224 -1
- package/docs/ru/intlayer_with_react_router_v7_fs_routes.md +225 -1
- package/docs/ru/intlayer_with_svelte_kit.md +158 -2
- package/docs/ru/intlayer_with_tanstack.md +159 -1
- package/docs/ru/intlayer_with_vite+preact.md +157 -1
- package/docs/ru/intlayer_with_vite+react.md +157 -1
- package/docs/ru/intlayer_with_vite+solid.md +157 -1
- package/docs/ru/intlayer_with_vite+svelte.md +157 -1
- package/docs/ru/intlayer_with_vite+vue.md +157 -1
- package/docs/tr/compiler.md +85 -52
- package/docs/tr/configuration.md +83 -40
- package/docs/tr/intlayer_with_nextjs_16.md +174 -1
- package/docs/tr/intlayer_with_nextjs_compiler.md +174 -1
- package/docs/tr/intlayer_with_react_router_v7.md +224 -1
- package/docs/tr/intlayer_with_react_router_v7_fs_routes.md +225 -1
- package/docs/tr/intlayer_with_svelte_kit.md +158 -2
- package/docs/tr/intlayer_with_tanstack.md +159 -1
- package/docs/tr/intlayer_with_vite+preact.md +157 -1
- package/docs/tr/intlayer_with_vite+react.md +157 -1
- package/docs/tr/intlayer_with_vite+solid.md +157 -1
- package/docs/tr/intlayer_with_vite+svelte.md +157 -1
- package/docs/tr/intlayer_with_vite+vue.md +157 -1
- package/docs/uk/compiler.md +96 -61
- package/docs/uk/configuration.md +83 -37
- package/docs/uk/intlayer_with_nextjs_16.md +174 -1
- package/docs/uk/intlayer_with_nextjs_compiler.md +174 -1
- package/docs/uk/intlayer_with_react_router_v7.md +224 -1
- package/docs/uk/intlayer_with_react_router_v7_fs_routes.md +225 -1
- package/docs/uk/intlayer_with_svelte_kit.md +157 -1
- package/docs/uk/intlayer_with_tanstack.md +159 -1
- package/docs/uk/intlayer_with_vite+preact.md +157 -1
- package/docs/uk/intlayer_with_vite+react.md +157 -1
- package/docs/uk/intlayer_with_vite+solid.md +157 -1
- package/docs/uk/intlayer_with_vite+svelte.md +157 -1
- package/docs/uk/intlayer_with_vite+vue.md +157 -1
- package/docs/vi/compiler.md +85 -50
- package/docs/vi/configuration.md +85 -39
- package/docs/vi/intlayer_with_nextjs_16.md +174 -1
- package/docs/vi/intlayer_with_nextjs_compiler.md +174 -1
- package/docs/vi/intlayer_with_react_router_v7.md +224 -1
- package/docs/vi/intlayer_with_react_router_v7_fs_routes.md +225 -1
- package/docs/vi/intlayer_with_svelte_kit.md +158 -2
- package/docs/vi/intlayer_with_tanstack.md +159 -1
- package/docs/vi/intlayer_with_vite+preact.md +157 -1
- package/docs/vi/intlayer_with_vite+react.md +157 -1
- package/docs/vi/intlayer_with_vite+solid.md +157 -1
- package/docs/vi/intlayer_with_vite+svelte.md +157 -1
- package/docs/vi/intlayer_with_vite+vue.md +157 -1
- package/docs/zh/compiler.md +84 -49
- package/docs/zh/configuration.md +80 -37
- package/docs/zh/intlayer_with_adonisjs.md +1 -1
- package/docs/zh/intlayer_with_express.md +1 -1
- package/docs/zh/intlayer_with_fastify.md +1 -1
- package/docs/zh/intlayer_with_hono.md +1 -1
- package/docs/zh/intlayer_with_nestjs.md +1 -1
- package/docs/zh/intlayer_with_nextjs_16.md +174 -1
- package/docs/zh/intlayer_with_nextjs_compiler.md +174 -1
- package/docs/zh/intlayer_with_react_router_v7.md +227 -4
- package/docs/zh/intlayer_with_react_router_v7_fs_routes.md +228 -4
- package/docs/zh/intlayer_with_svelte_kit.md +158 -2
- package/docs/zh/intlayer_with_tanstack.md +159 -1
- package/docs/zh/intlayer_with_vite+preact.md +159 -3
- package/docs/zh/intlayer_with_vite+react.md +157 -1
- package/docs/zh/intlayer_with_vite+solid.md +161 -5
- package/docs/zh/intlayer_with_vite+svelte.md +157 -1
- package/docs/zh/intlayer_with_vite+vue.md +158 -2
- package/package.json +6 -6
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
---
|
|
2
2
|
createdAt: 2026-01-10
|
|
3
|
-
updatedAt: 2026-
|
|
3
|
+
updatedAt: 2026-03-12
|
|
4
4
|
title: Next.js i18n - Przekształć istniejącą aplikację Next.js w aplikację wielojęzyczną w 2026
|
|
5
5
|
description: Dowiedz się, jak uczynić swoją istniejącą aplikację Next.js wielojęzyczną za pomocą Kompilatora Intlayer. Postępuj zgodnie z dokumentacją, aby umiędzynarodowić (i18n) i przetłumaczyć swoją aplikację przy użyciu AI.
|
|
6
6
|
keywords:
|
|
@@ -501,6 +501,179 @@ To rozszerzenie zapewnia:
|
|
|
501
501
|
|
|
502
502
|
Więcej szczegółów na temat korzystania z rozszerzenia znajdziesz w [dokumentacji rozszerzenia Intlayer dla VS Code](https://intlayer.org/doc/vs-code-extension).
|
|
503
503
|
|
|
504
|
+
### (Opcjonalnie) Krok 11 : Wyodrębnij zawartość swoich komponentów
|
|
505
|
+
|
|
506
|
+
Jeśli masz istniejącą bazę kodu, transformacja tysięcy plików może być czasochłonna.
|
|
507
|
+
|
|
508
|
+
Aby ułatwić ten proces, Intlayer proponuje [kompilator](https://github.com/aymericzip/intlayer/blob/main/docs/docs/pl/compiler.md) / [ekstraktor](https://github.com/aymericzip/intlayer/blob/main/docs/docs/pl/cli/extract.md), aby przetransformować komponenty i wyodrębnić zawartość.
|
|
509
|
+
|
|
510
|
+
Aby go skonfigurować, możesz dodać sekcję `compiler` w pliku `intlayer.config.ts`:
|
|
511
|
+
|
|
512
|
+
```typescript fileName="intlayer.config.ts" codeFormat="typescript"
|
|
513
|
+
import { type IntlayerConfig } from "intlayer";
|
|
514
|
+
|
|
515
|
+
const config: IntlayerConfig = {
|
|
516
|
+
// ... Reszta Twojej konfiguracji
|
|
517
|
+
compiler: {
|
|
518
|
+
/**
|
|
519
|
+
* Wskazuje, czy kompilator powinien być włączony.
|
|
520
|
+
*/
|
|
521
|
+
enabled: true,
|
|
522
|
+
|
|
523
|
+
/**
|
|
524
|
+
* Definiuje ścieżkę plików wyjściowych
|
|
525
|
+
*/
|
|
526
|
+
output: ({ fileName, extension }) => `./${fileName}${extension}`,
|
|
527
|
+
|
|
528
|
+
/**
|
|
529
|
+
* Wskazuje, czy komponenty powinny zostać zapisane po transformacji. W ten sposób kompilator można uruchomić tylko raz, aby przetransformować aplikację, a następnie go usunąć.
|
|
530
|
+
*/
|
|
531
|
+
saveComponents: false,
|
|
532
|
+
|
|
533
|
+
/**
|
|
534
|
+
* Prefiks klucza słownika
|
|
535
|
+
*/
|
|
536
|
+
dictionaryKeyPrefix: "",
|
|
537
|
+
},
|
|
538
|
+
};
|
|
539
|
+
|
|
540
|
+
export default config;
|
|
541
|
+
```
|
|
542
|
+
|
|
543
|
+
```javascript fileName="intlayer.config.mjs" codeFormat="esm"
|
|
544
|
+
/** @type {import('intlayer').IntlayerConfig} */
|
|
545
|
+
const config = {
|
|
546
|
+
// ... Reszta Twojej konfiguracji
|
|
547
|
+
compiler: {
|
|
548
|
+
/**
|
|
549
|
+
* Wskazuje, czy kompilator powinien być włączony.
|
|
550
|
+
*/
|
|
551
|
+
enabled: true,
|
|
552
|
+
|
|
553
|
+
/**
|
|
554
|
+
* Definiuje ścieżkę plików wyjściowych
|
|
555
|
+
*/
|
|
556
|
+
output: ({ fileName, extension }) => `./${fileName}${extension}`,
|
|
557
|
+
|
|
558
|
+
/**
|
|
559
|
+
* Wskazuje, czy komponenty powinny zostać zapisane po transformacji. W ten sposób kompilator można uruchomić tylko raz, aby przetransformować aplikację, a następnie go usunąć.
|
|
560
|
+
*/
|
|
561
|
+
saveComponents: false,
|
|
562
|
+
|
|
563
|
+
/**
|
|
564
|
+
* Prefiks klucza słownika
|
|
565
|
+
*/
|
|
566
|
+
dictionaryKeyPrefix: "",
|
|
567
|
+
},
|
|
568
|
+
};
|
|
569
|
+
|
|
570
|
+
export default config;
|
|
571
|
+
```
|
|
572
|
+
|
|
573
|
+
```javascript fileName="intlayer.config.cjs" codeFormat="commonjs"
|
|
574
|
+
/** @type {import('intlayer').IntlayerConfig} */
|
|
575
|
+
const config = {
|
|
576
|
+
// ... Reszta Twojej konfiguracji
|
|
577
|
+
compiler: {
|
|
578
|
+
/**
|
|
579
|
+
* Wskazuje, czy kompilator powinien być włączony.
|
|
580
|
+
*/
|
|
581
|
+
enabled: true,
|
|
582
|
+
|
|
583
|
+
/**
|
|
584
|
+
* Definiuje ścieżkę plików wyjściowych
|
|
585
|
+
*/
|
|
586
|
+
output: ({ fileName, extension }) => `./${fileName}${extension}`,
|
|
587
|
+
|
|
588
|
+
/**
|
|
589
|
+
* Wskazuje, czy komponenty powinny zostać zapisane po transformacji. W ten sposób kompilator można uruchomić tylko raz, aby przetransformować aplikację, a następnie go usunąć.
|
|
590
|
+
*/
|
|
591
|
+
saveComponents: false,
|
|
592
|
+
|
|
593
|
+
/**
|
|
594
|
+
* Prefiks klucza słownika
|
|
595
|
+
*/
|
|
596
|
+
dictionaryKeyPrefix: "",
|
|
597
|
+
},
|
|
598
|
+
};
|
|
599
|
+
|
|
600
|
+
module.exports = config;
|
|
601
|
+
```
|
|
602
|
+
|
|
603
|
+
<Tabs>
|
|
604
|
+
<Tab value='Polecenie wyodrębniania'>
|
|
605
|
+
|
|
606
|
+
Uruchom ekstraktor, aby przetransformować komponenty i wyodrębnić zawartość
|
|
607
|
+
|
|
608
|
+
```bash packageManager="npm"
|
|
609
|
+
npx intlayer extract
|
|
610
|
+
```
|
|
611
|
+
|
|
612
|
+
```bash packageManager="pnpm"
|
|
613
|
+
pnpm intlayer extract
|
|
614
|
+
```
|
|
615
|
+
|
|
616
|
+
```bash packageManager="yarn"
|
|
617
|
+
yarn intlayer extract
|
|
618
|
+
```
|
|
619
|
+
|
|
620
|
+
```bash packageManager="bun"
|
|
621
|
+
bunx intlayer extract
|
|
622
|
+
```
|
|
623
|
+
|
|
624
|
+
</Tab>
|
|
625
|
+
<Tab value='Kompilator Babel'>
|
|
626
|
+
|
|
627
|
+
```bash packageManager="npm"
|
|
628
|
+
npm install @intlayer/babel --save-dev
|
|
629
|
+
```
|
|
630
|
+
|
|
631
|
+
```bash packageManager="pnpm"
|
|
632
|
+
pnpm add @intlayer/babel --save-dev
|
|
633
|
+
```
|
|
634
|
+
|
|
635
|
+
```bash packageManager="yarn"
|
|
636
|
+
yarn add @intlayer/babel --save-dev
|
|
637
|
+
```
|
|
638
|
+
|
|
639
|
+
```bash packageManager="bun"
|
|
640
|
+
bun add @intlayer/babel --dev
|
|
641
|
+
```
|
|
642
|
+
|
|
643
|
+
```js fileName="babel.config.js"
|
|
644
|
+
const {
|
|
645
|
+
intlayerExtractBabelPlugin,
|
|
646
|
+
getExtractPluginOptions,
|
|
647
|
+
} = require("@intlayer/babel");
|
|
648
|
+
|
|
649
|
+
module.exports = {
|
|
650
|
+
presets: ["next/babel"],
|
|
651
|
+
plugins: [
|
|
652
|
+
// Wyodrębnij zawartość z komponentów do słowników
|
|
653
|
+
[intlayerExtractBabelPlugin, getExtractPluginOptions()],
|
|
654
|
+
],
|
|
655
|
+
};
|
|
656
|
+
```
|
|
657
|
+
|
|
658
|
+
```bash packageManager="npm"
|
|
659
|
+
npm run build # Lub npm run dev
|
|
660
|
+
```
|
|
661
|
+
|
|
662
|
+
```bash packageManager="pnpm"
|
|
663
|
+
pnpm run build # Or pnpm run dev
|
|
664
|
+
```
|
|
665
|
+
|
|
666
|
+
```bash packageManager="yarn"
|
|
667
|
+
yarn build # Or yarn dev
|
|
668
|
+
```
|
|
669
|
+
|
|
670
|
+
```bash packageManager="bun"
|
|
671
|
+
bun run build # Or bun run dev
|
|
672
|
+
```
|
|
673
|
+
|
|
674
|
+
</Tab>
|
|
675
|
+
</Tabs>
|
|
676
|
+
|
|
504
677
|
### Idź dalej
|
|
505
678
|
|
|
506
679
|
Aby pójść o krok dalej, możesz wdrożyć [edytor wizualny](https://github.com/aymericzip/intlayer/blob/main/docs/docs/pl/intlayer_visual_editor.md) lub wyeksportować swoją treść za pomocą [CMS](https://github.com/aymericzip/intlayer/blob/main/docs/docs/pl/intlayer_CMS.md).
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
---
|
|
2
2
|
createdAt: 2025-09-04
|
|
3
|
-
updatedAt:
|
|
3
|
+
updatedAt: 2026-03-12
|
|
4
4
|
title: React Router v7 i18n - Jak przetłumaczyć aplikację React Router v7 w 2026
|
|
5
5
|
description: Dowiedz się, jak dodać internacjonalizację (i18n) do swojej aplikacji React Router v7 za pomocą Intlayer. Postępuj zgodnie z tym kompleksowym przewodnikiem, aby uczynić swoją aplikację wielojęzyczną z routingiem uwzględniającym lokalizację.
|
|
6
6
|
keywords:
|
|
@@ -496,6 +496,229 @@ export default function RootLayout() {
|
|
|
496
496
|
}
|
|
497
497
|
```
|
|
498
498
|
|
|
499
|
+
### (Opcjonalnie) Krok 12 : Wyodrębnij zawartość swoich komponentów
|
|
500
|
+
|
|
501
|
+
Jeśli masz istniejącą bazę kodu, transformacja tysięcy plików może być czasochłonna.
|
|
502
|
+
|
|
503
|
+
Aby ułatwić ten proces, Intlayer proponuje [kompilator](https://github.com/aymericzip/intlayer/blob/main/docs/docs/pl/compiler.md) / [ekstraktor](https://github.com/aymericzip/intlayer/blob/main/docs/docs/pl/cli/extract.md), aby przetransformować komponenty i wyodrębnić zawartość.
|
|
504
|
+
|
|
505
|
+
Aby go skonfigurować, możesz dodać sekcję `compiler` w pliku `intlayer.config.ts`:
|
|
506
|
+
|
|
507
|
+
```typescript fileName="intlayer.config.ts" codeFormat="typescript"
|
|
508
|
+
import { type IntlayerConfig } from "intlayer";
|
|
509
|
+
|
|
510
|
+
const config: IntlayerConfig = {
|
|
511
|
+
// ... Reszta Twojej konfiguracji
|
|
512
|
+
compiler: {
|
|
513
|
+
/**
|
|
514
|
+
* Wskazuje, czy kompilator powinien być włączony.
|
|
515
|
+
*/
|
|
516
|
+
enabled: true,
|
|
517
|
+
|
|
518
|
+
/**
|
|
519
|
+
* Definiuje ścieżkę plików wyjściowych
|
|
520
|
+
*/
|
|
521
|
+
output: ({ fileName, extension }) => `./${fileName}${extension}`,
|
|
522
|
+
|
|
523
|
+
/**
|
|
524
|
+
* Wskazuje, czy komponenty powinny zostać zapisane po transformacji. W ten sposób kompilator można uruchomić tylko raz, aby przetransformować aplikację, a następnie go usunąć.
|
|
525
|
+
*/
|
|
526
|
+
saveComponents: false,
|
|
527
|
+
|
|
528
|
+
/**
|
|
529
|
+
* Prefiks klucza słownika
|
|
530
|
+
*/
|
|
531
|
+
dictionaryKeyPrefix: "",
|
|
532
|
+
},
|
|
533
|
+
};
|
|
534
|
+
|
|
535
|
+
export default config;
|
|
536
|
+
```
|
|
537
|
+
|
|
538
|
+
```javascript fileName="intlayer.config.mjs" codeFormat="esm"
|
|
539
|
+
/** @type {import('intlayer').IntlayerConfig} */
|
|
540
|
+
const config = {
|
|
541
|
+
// ... Reszta Twojej konfiguracji
|
|
542
|
+
compiler: {
|
|
543
|
+
/**
|
|
544
|
+
* Wskazuje, czy kompilator powinien być włączony.
|
|
545
|
+
*/
|
|
546
|
+
enabled: true,
|
|
547
|
+
|
|
548
|
+
/**
|
|
549
|
+
* Definiuje ścieżkę plików wyjściowych
|
|
550
|
+
*/
|
|
551
|
+
output: ({ fileName, extension }) => `./${fileName}${extension}`,
|
|
552
|
+
|
|
553
|
+
/**
|
|
554
|
+
* Wskazuje, czy komponenty powinny zostać zapisane po transformacji. W ten sposób kompilator można uruchomić tylko raz, aby przetransformować aplikację, a następnie go usunąć.
|
|
555
|
+
*/
|
|
556
|
+
saveComponents: false,
|
|
557
|
+
|
|
558
|
+
/**
|
|
559
|
+
* Prefiks klucza słownika
|
|
560
|
+
*/
|
|
561
|
+
dictionaryKeyPrefix: "",
|
|
562
|
+
},
|
|
563
|
+
};
|
|
564
|
+
|
|
565
|
+
export default config;
|
|
566
|
+
```
|
|
567
|
+
|
|
568
|
+
```javascript fileName="intlayer.config.cjs" codeFormat="commonjs"
|
|
569
|
+
/** @type {import('intlayer').IntlayerConfig} */
|
|
570
|
+
const config = {
|
|
571
|
+
// ... Reszta Twojej konfiguracji
|
|
572
|
+
compiler: {
|
|
573
|
+
/**
|
|
574
|
+
* Wskazuje, czy kompilator powinien być włączony.
|
|
575
|
+
*/
|
|
576
|
+
enabled: true,
|
|
577
|
+
|
|
578
|
+
/**
|
|
579
|
+
* Definiuje ścieżkę plików wyjściowych
|
|
580
|
+
*/
|
|
581
|
+
output: ({ fileName, extension }) => `./${fileName}${extension}`,
|
|
582
|
+
|
|
583
|
+
/**
|
|
584
|
+
* Wskazuje, czy komponenty powinny zostać zapisane po transformacji. W ten sposób kompilator można uruchomić tylko raz, aby przetransformować aplikację, a następnie go usunąć.
|
|
585
|
+
*/
|
|
586
|
+
saveComponents: false,
|
|
587
|
+
|
|
588
|
+
/**
|
|
589
|
+
* Prefiks klucza słownika
|
|
590
|
+
*/
|
|
591
|
+
dictionaryKeyPrefix: "",
|
|
592
|
+
},
|
|
593
|
+
};
|
|
594
|
+
|
|
595
|
+
module.exports = config;
|
|
596
|
+
```
|
|
597
|
+
|
|
598
|
+
<Tabs>
|
|
599
|
+
<Tab value='Polecenie wyodrębniania'>
|
|
600
|
+
|
|
601
|
+
Uruchom ekstraktor, aby przetransformować komponenty i wyodrębnić zawartość
|
|
602
|
+
|
|
603
|
+
```bash packageManager="npm"
|
|
604
|
+
npx intlayer extract
|
|
605
|
+
```
|
|
606
|
+
|
|
607
|
+
```bash packageManager="pnpm"
|
|
608
|
+
pnpm intlayer extract
|
|
609
|
+
```
|
|
610
|
+
|
|
611
|
+
```bash packageManager="yarn"
|
|
612
|
+
yarn intlayer extract
|
|
613
|
+
```
|
|
614
|
+
|
|
615
|
+
```bash packageManager="bun"
|
|
616
|
+
bunx intlayer extract
|
|
617
|
+
```
|
|
618
|
+
|
|
619
|
+
</Tab>
|
|
620
|
+
<Tab value='Kompilator Babel'>
|
|
621
|
+
|
|
622
|
+
Zaktualizuj `vite.config.ts`, aby dołączyć wtyczkę `intlayerCompiler`:
|
|
623
|
+
|
|
624
|
+
```ts fileName="vite.config.ts"
|
|
625
|
+
import { defineConfig } from "vite";
|
|
626
|
+
import { intlayer, intlayerCompiler } from "vite-intlayer";
|
|
627
|
+
|
|
628
|
+
export default defineConfig({
|
|
629
|
+
plugins: [
|
|
630
|
+
intlayer(),
|
|
631
|
+
intlayerCompiler(), // Dodaje wtyczkę kompilatora
|
|
632
|
+
],
|
|
633
|
+
});
|
|
634
|
+
```
|
|
635
|
+
|
|
636
|
+
```bash packageManager="npm"
|
|
637
|
+
npm run build # Lub npm run dev
|
|
638
|
+
```
|
|
639
|
+
|
|
640
|
+
```bash packageManager="pnpm"
|
|
641
|
+
pnpm run build # Or pnpm run dev
|
|
642
|
+
```
|
|
643
|
+
|
|
644
|
+
```bash packageManager="yarn"
|
|
645
|
+
yarn build # Or yarn dev
|
|
646
|
+
```
|
|
647
|
+
|
|
648
|
+
```bash packageManager="bun"
|
|
649
|
+
bun run build # Or bun run dev
|
|
650
|
+
```
|
|
651
|
+
|
|
652
|
+
</Tab>
|
|
653
|
+
</Tabs>
|
|
654
|
+
|
|
655
|
+
---
|
|
656
|
+
|
|
657
|
+
## Configure TypeScript
|
|
658
|
+
|
|
659
|
+
Intlayer uses module augmentation to get benefits of TypeScript and make your codebase stronger.
|
|
660
|
+
|
|
661
|
+
Ensure your TypeScript configuration includes the autogenerated types:
|
|
662
|
+
|
|
663
|
+
```json5 fileName="tsconfig.json"
|
|
664
|
+
{
|
|
665
|
+
// ... your existing configurations
|
|
666
|
+
include: [
|
|
667
|
+
// ... your existing includes
|
|
668
|
+
".intlayer/**/*.ts", // Include the auto-generated types
|
|
669
|
+
],
|
|
670
|
+
}
|
|
671
|
+
```
|
|
672
|
+
|
|
673
|
+
---
|
|
674
|
+
|
|
675
|
+
## Git Configuration
|
|
676
|
+
|
|
677
|
+
It is recommended to ignore the files generated by Intlayer. This allows you to avoid committing them to your Git repository.
|
|
678
|
+
|
|
679
|
+
To do this, you can add the following instructions to your `.gitignore` file:
|
|
680
|
+
|
|
681
|
+
```plaintext fileName=".gitignore"
|
|
682
|
+
# Ignore the files generated by Intlayer
|
|
683
|
+
.intlayer
|
|
684
|
+
```
|
|
685
|
+
|
|
686
|
+
---
|
|
687
|
+
|
|
688
|
+
## VS Code Extension
|
|
689
|
+
|
|
690
|
+
To improve your development experience with Intlayer, you can install the official **Intlayer VS Code Extension**.
|
|
691
|
+
|
|
692
|
+
[Install from the VS Code Marketplace](https://marketplace.visualstudio.com/items?itemName=intlayer.intlayer-vs-code-extension)
|
|
693
|
+
|
|
694
|
+
This extension provides:
|
|
695
|
+
|
|
696
|
+
- **Autocompletion** for translation keys.
|
|
697
|
+
- **Real-time error detection** for missing translations.
|
|
698
|
+
- **Inline previews** of translated content.
|
|
699
|
+
- **Quick actions** to easily create and update translations.
|
|
700
|
+
|
|
701
|
+
For more details on how to use the extension, refer to the [Intlayer VS Code Extension documentation](https://intlayer.org/doc/vs-code-extension).
|
|
702
|
+
|
|
703
|
+
---
|
|
704
|
+
|
|
705
|
+
## Go Further
|
|
706
|
+
|
|
707
|
+
To go further, you can implement the [visual editor](https://github.com/aymericzip/intlayer/blob/main/docs/docs/en/intlayer_visual_editor.md) or externalize your content using the [CMS](https://github.com/aymericzip/intlayer/blob/main/docs/docs/en/intlayer_CMS.md).
|
|
708
|
+
|
|
709
|
+
---
|
|
710
|
+
|
|
711
|
+
## Documentation References
|
|
712
|
+
|
|
713
|
+
- [Intlayer Documentation](https://intlayer.org)
|
|
714
|
+
- [React Router v7 Documentation](https://reactrouter.com/)
|
|
715
|
+
- [useIntlayer hook](https://github.com/aymericzip/intlayer/blob/main/docs/docs/en/packages/react-intlayer/useIntlayer.md)
|
|
716
|
+
- [useLocale hook](https://github.com/aymericzip/intlayer/blob/main/docs/docs/en/packages/react-intlayer/useLocale.md)
|
|
717
|
+
- [Content Declaration](https://github.com/aymericzip/intlayer/blob/main/docs/docs/en/dictionary/content_file.md)
|
|
718
|
+
- [Configuration](https://github.com/aymericzip/intlayer/blob/main/docs/docs/en/configuration.md)
|
|
719
|
+
|
|
720
|
+
This comprehensive guide provides everything you need to integrate Intlayer with React Router v7 for a fully internationalized application with locale-aware routing and TypeScript support.
|
|
721
|
+
|
|
499
722
|
### Krok 11: Dodaj middleware (opcjonalnie)
|
|
500
723
|
|
|
501
724
|
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.
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
---
|
|
2
2
|
createdAt: 2025-12-07
|
|
3
|
-
updatedAt:
|
|
3
|
+
updatedAt: 2026-03-12
|
|
4
4
|
title: React Router v7 i18n - Jak przetłumaczyć aplikację React Router v7 w 2026
|
|
5
5
|
description: Dowiedz się, jak dodać internacjonalizację (i18n) do swojej aplikacji React Router v7 za pomocą Intlayer z routingiem opartym na systemie plików. Postępuj zgodnie z tym kompleksowym przewodnikiem, aby uczynić swoją aplikację wielojęzyczną z routingiem uwzględniającym lokalizację.
|
|
6
6
|
keywords:
|
|
@@ -618,6 +618,230 @@ export default function RootLayout() {
|
|
|
618
618
|
}
|
|
619
619
|
```
|
|
620
620
|
|
|
621
|
+
### (Opcjonalnie) Krok 11 : Wyodrębnij zawartość swoich komponentów
|
|
622
|
+
|
|
623
|
+
Jeśli masz istniejącą bazę kodu, transformacja tysięcy plików może być czasochłonna.
|
|
624
|
+
|
|
625
|
+
Aby ułatwić ten proces, Intlayer proponuje [kompilator](https://github.com/aymericzip/intlayer/blob/main/docs/docs/pl/compiler.md) / [ekstraktor](https://github.com/aymericzip/intlayer/blob/main/docs/docs/pl/cli/extract.md), aby przetransformować komponenty i wyodrębnić zawartość.
|
|
626
|
+
|
|
627
|
+
Aby go skonfigurować, możesz dodać sekcję `compiler` w pliku `intlayer.config.ts`:
|
|
628
|
+
|
|
629
|
+
```typescript fileName="intlayer.config.ts" codeFormat="typescript"
|
|
630
|
+
import { type IntlayerConfig } from "intlayer";
|
|
631
|
+
|
|
632
|
+
const config: IntlayerConfig = {
|
|
633
|
+
// ... Reszta Twojej konfiguracji
|
|
634
|
+
compiler: {
|
|
635
|
+
/**
|
|
636
|
+
* Wskazuje, czy kompilator powinien być włączony.
|
|
637
|
+
*/
|
|
638
|
+
enabled: true,
|
|
639
|
+
|
|
640
|
+
/**
|
|
641
|
+
* Definiuje ścieżkę plików wyjściowych
|
|
642
|
+
*/
|
|
643
|
+
output: ({ fileName, extension }) => `./${fileName}${extension}`,
|
|
644
|
+
|
|
645
|
+
/**
|
|
646
|
+
* Wskazuje, czy komponenty powinny zostać zapisane po transformacji. W ten sposób kompilator można uruchomić tylko raz, aby przetransformować aplikację, a następnie go usunąć.
|
|
647
|
+
*/
|
|
648
|
+
saveComponents: false,
|
|
649
|
+
|
|
650
|
+
/**
|
|
651
|
+
* Prefiks klucza słownika
|
|
652
|
+
*/
|
|
653
|
+
dictionaryKeyPrefix: "",
|
|
654
|
+
},
|
|
655
|
+
};
|
|
656
|
+
|
|
657
|
+
export default config;
|
|
658
|
+
```
|
|
659
|
+
|
|
660
|
+
```javascript fileName="intlayer.config.mjs" codeFormat="esm"
|
|
661
|
+
/** @type {import('intlayer').IntlayerConfig} */
|
|
662
|
+
const config = {
|
|
663
|
+
// ... Reszta Twojej konfiguracji
|
|
664
|
+
compiler: {
|
|
665
|
+
/**
|
|
666
|
+
* Wskazuje, czy kompilator powinien być włączony.
|
|
667
|
+
*/
|
|
668
|
+
enabled: true,
|
|
669
|
+
|
|
670
|
+
/**
|
|
671
|
+
* Definiuje ścieżkę plików wyjściowych
|
|
672
|
+
*/
|
|
673
|
+
output: ({ fileName, extension }) => `./${fileName}${extension}`,
|
|
674
|
+
|
|
675
|
+
/**
|
|
676
|
+
* Wskazuje, czy komponenty powinny zostać zapisane po transformacji. W ten sposób kompilator można uruchomić tylko raz, aby przetransformować aplikację, a następnie go usunąć.
|
|
677
|
+
*/
|
|
678
|
+
saveComponents: false,
|
|
679
|
+
|
|
680
|
+
/**
|
|
681
|
+
* Prefiks klucza słownika
|
|
682
|
+
*/
|
|
683
|
+
dictionaryKeyPrefix: "",
|
|
684
|
+
},
|
|
685
|
+
};
|
|
686
|
+
|
|
687
|
+
export default config;
|
|
688
|
+
```
|
|
689
|
+
|
|
690
|
+
```javascript fileName="intlayer.config.cjs" codeFormat="commonjs"
|
|
691
|
+
/** @type {import('intlayer').IntlayerConfig} */
|
|
692
|
+
const config = {
|
|
693
|
+
// ... Reszta Twojej konfiguracji
|
|
694
|
+
compiler: {
|
|
695
|
+
/**
|
|
696
|
+
* Wskazuje, czy kompilator powinien być włączony.
|
|
697
|
+
*/
|
|
698
|
+
enabled: true,
|
|
699
|
+
|
|
700
|
+
/**
|
|
701
|
+
* Definiuje ścieżkę plików wyjściowych
|
|
702
|
+
*/
|
|
703
|
+
output: ({ fileName, extension }) => `./${fileName}${extension}`,
|
|
704
|
+
|
|
705
|
+
/**
|
|
706
|
+
* Wskazuje, czy komponenty powinny zostać zapisane po transformacji. W ten sposób kompilator można uruchomić tylko raz, aby przetransformować aplikację, a następnie go usunąć.
|
|
707
|
+
*/
|
|
708
|
+
saveComponents: false,
|
|
709
|
+
|
|
710
|
+
/**
|
|
711
|
+
* Prefiks klucza słownika
|
|
712
|
+
*/
|
|
713
|
+
dictionaryKeyPrefix: "",
|
|
714
|
+
},
|
|
715
|
+
};
|
|
716
|
+
|
|
717
|
+
module.exports = config;
|
|
718
|
+
```
|
|
719
|
+
|
|
720
|
+
<Tabs>
|
|
721
|
+
<Tab value='Polecenie wyodrębniania'>
|
|
722
|
+
|
|
723
|
+
Uruchom ekstraktor, aby przetransformować komponenty i wyodrębnić zawartość
|
|
724
|
+
|
|
725
|
+
```bash packageManager="npm"
|
|
726
|
+
npx intlayer extract
|
|
727
|
+
```
|
|
728
|
+
|
|
729
|
+
```bash packageManager="pnpm"
|
|
730
|
+
pnpm intlayer extract
|
|
731
|
+
```
|
|
732
|
+
|
|
733
|
+
```bash packageManager="yarn"
|
|
734
|
+
yarn intlayer extract
|
|
735
|
+
```
|
|
736
|
+
|
|
737
|
+
```bash packageManager="bun"
|
|
738
|
+
bunx intlayer extract
|
|
739
|
+
```
|
|
740
|
+
|
|
741
|
+
</Tab>
|
|
742
|
+
<Tab value='Kompilator Babel'>
|
|
743
|
+
|
|
744
|
+
Zaktualizuj `vite.config.ts`, aby dołączyć wtyczkę `intlayerCompiler`:
|
|
745
|
+
|
|
746
|
+
```ts fileName="vite.config.ts"
|
|
747
|
+
import { defineConfig } from "vite";
|
|
748
|
+
import { intlayer, intlayerCompiler } from "vite-intlayer";
|
|
749
|
+
|
|
750
|
+
export default defineConfig({
|
|
751
|
+
plugins: [
|
|
752
|
+
intlayer(),
|
|
753
|
+
intlayerCompiler(), // Dodaje wtyczkę kompilatora
|
|
754
|
+
],
|
|
755
|
+
});
|
|
756
|
+
```
|
|
757
|
+
|
|
758
|
+
```bash packageManager="npm"
|
|
759
|
+
npm run build # Lub npm run dev
|
|
760
|
+
```
|
|
761
|
+
|
|
762
|
+
```bash packageManager="pnpm"
|
|
763
|
+
pnpm run build # Or pnpm run dev
|
|
764
|
+
```
|
|
765
|
+
|
|
766
|
+
```bash packageManager="yarn"
|
|
767
|
+
yarn build # Or yarn dev
|
|
768
|
+
```
|
|
769
|
+
|
|
770
|
+
```bash packageManager="bun"
|
|
771
|
+
bun run build # Or bun run dev
|
|
772
|
+
```
|
|
773
|
+
|
|
774
|
+
</Tab>
|
|
775
|
+
</Tabs>
|
|
776
|
+
|
|
777
|
+
---
|
|
778
|
+
|
|
779
|
+
## Configure TypeScript
|
|
780
|
+
|
|
781
|
+
Intlayer uses module augmentation to get benefits of TypeScript and make your codebase stronger.
|
|
782
|
+
|
|
783
|
+
Ensure your TypeScript configuration includes the autogenerated types:
|
|
784
|
+
|
|
785
|
+
```json5 fileName="tsconfig.json"
|
|
786
|
+
{
|
|
787
|
+
// ... your existing configurations
|
|
788
|
+
include: [
|
|
789
|
+
// ... your existing includes
|
|
790
|
+
".intlayer/**/*.ts", // Include the auto-generated types
|
|
791
|
+
],
|
|
792
|
+
}
|
|
793
|
+
```
|
|
794
|
+
|
|
795
|
+
---
|
|
796
|
+
|
|
797
|
+
## Git Configuration
|
|
798
|
+
|
|
799
|
+
It is recommended to ignore the files generated by Intlayer. This allows you to avoid committing them to your Git repository.
|
|
800
|
+
|
|
801
|
+
To do this, you can add the following instructions to your `.gitignore` file:
|
|
802
|
+
|
|
803
|
+
```plaintext fileName=".gitignore"
|
|
804
|
+
# Ignore the files generated by Intlayer
|
|
805
|
+
.intlayer
|
|
806
|
+
```
|
|
807
|
+
|
|
808
|
+
---
|
|
809
|
+
|
|
810
|
+
## VS Code Extension
|
|
811
|
+
|
|
812
|
+
To improve your development experience with Intlayer, you can install the official **Intlayer VS Code Extension**.
|
|
813
|
+
|
|
814
|
+
[Install from the VS Code Marketplace](https://marketplace.visualstudio.com/items?itemName=intlayer.intlayer-vs-code-extension)
|
|
815
|
+
|
|
816
|
+
This extension provides:
|
|
817
|
+
|
|
818
|
+
- **Autocompletion** for translation keys.
|
|
819
|
+
- **Real-time error detection** for missing translations.
|
|
820
|
+
- **Inline previews** of translated content.
|
|
821
|
+
- **Quick actions** to easily create and update translations.
|
|
822
|
+
|
|
823
|
+
For more details on how to use the extension, refer to the [Intlayer VS Code Extension documentation](https://intlayer.org/doc/vs-code-extension).
|
|
824
|
+
|
|
825
|
+
---
|
|
826
|
+
|
|
827
|
+
## Go Further
|
|
828
|
+
|
|
829
|
+
To go further, you can implement the [visual editor](https://github.com/aymericzip/intlayer/blob/main/docs/docs/en/intlayer_visual_editor.md) or externalize your content using the [CMS](https://github.com/aymericzip/intlayer/blob/main/docs/docs/en/intlayer_CMS.md).
|
|
830
|
+
|
|
831
|
+
---
|
|
832
|
+
|
|
833
|
+
## Documentation References
|
|
834
|
+
|
|
835
|
+
- [Intlayer Documentation](https://intlayer.org)
|
|
836
|
+
- [React Router v7 Documentation](https://reactrouter.com/)
|
|
837
|
+
- [React Router fs-routes Documentation](https://reactrouter.com/how-to/file-route-conventions)
|
|
838
|
+
- [useIntlayer hook](https://github.com/aymericzip/intlayer/blob/main/docs/docs/en/packages/react-intlayer/useIntlayer.md)
|
|
839
|
+
- [useLocale hook](https://github.com/aymericzip/intlayer/blob/main/docs/docs/en/packages/react-intlayer/useLocale.md)
|
|
840
|
+
- [Content Declaration](https://github.com/aymericzip/intlayer/blob/main/docs/docs/en/dictionary/content_file.md)
|
|
841
|
+
- [Configuration](https://github.com/aymericzip/intlayer/blob/main/docs/docs/en/configuration.md)
|
|
842
|
+
|
|
843
|
+
This comprehensive guide provides everything you need to integrate Intlayer with React Router v7 using file-system based routing for a fully internationalized application with locale-aware routing and TypeScript support.
|
|
844
|
+
|
|
621
845
|
### Krok 10: Dodaj middleware (opcjonalnie)
|
|
622
846
|
|
|
623
847
|
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.
|