@intlayer/docs 9.4.4 → 9.5.0

package/docs/pl/intlayer_with_react_router_v7_fs_routes.md

@@ -1,919 +0,0 @@
----
-createdAt: 2025-12-07
-updatedAt: 2026-05-31
-title: "React Router v7 i18n - Kompletny przewodnik po tłumaczeniu swojej aplikacji"
-description: "Koniec z i18next. Przewodnik 2026 do budowania wielojęzycznej (i18n) aplikacji React Router v7. Tłumacz z agentami AI i optymalizuj rozmiar bundle, SEO i wydajność."
-keywords:
-  - Internacjonalizacja
-  - Dokumentacja
-  - Intlayer
-  - React Router v7
-  - fs-routes
-  - Trasy oparte na systemie plików
-  - React
-  - i18n
-  - TypeScript
-  - Routing lokalizacji
-slugs:
-  - doc
-  - environment
-  - vite-and-react
-  - react-router-v7-fs-routes
-applicationTemplate: https://github.com/aymericzip/intlayer-react-router-v7-fs-routes-template
-applicationShowcase: https://intlayer-react-router-v7-fs-routes.vercel.app
-youtubeVideo: https://www.youtube.com/watch?v=dS9L7uJeak4
-history:
-  - version: 8.9.0
-    date: 2026-05-04
-    changes: "Aktualizacja użycia API useIntlayer w Solid do bezpośredniego dostępu do właściwości"
-  - version: 7.5.9
-    date: 2025-12-30
-    changes: "Dodaj polecenie init"
-  - version: 7.3.4
-    date: 2025-12-08
-    changes: "Początkowa historia"
-author: aymericzip
----
-
-# Przetłumacz swoją stronę React Router v7 (File-System Routes) za pomocą Intlayer | Internacjonalizacja (i18n)
-
-Ten przewodnik pokazuje, jak zintegrować **Intlayer** dla płynnej internacjonalizacji w projektach React Router v7 używając **routingu opartego na systemie plików** (`@react-router/fs-routes`) z routingiem uwzględniającym lokalizację, wsparciem TypeScript oraz nowoczesnymi praktykami programistycznymi.
-
-W przypadku routingu po stronie klienta, zapoznaj się z przewodnikiem [Intlayer z React Router v7](https://github.com/aymericzip/intlayer/blob/main/docs/docs/pl/intlayer_with_react_router_v7.md).
-
-## Table of Contents
-
-<TOC/>
-
-## Dlaczego Interlayer zamiast alternatyw?
-
-W porównaniu do głównych rozwiązań, takich jak „react-i18next” lub „i18next”, Intlayer jest rozwiązaniem wyposażonym w zintegrowane optymalizacje, takie jak:
-
-<AccordionGroup>
-<Accordion header="Pełny zasięg routera React">
-
-Intlayer jest zoptymalizowany do doskonałej współpracy z React Router, oferując **routing uwzględniający ustawienia lokalne**, **oprogramowanie pośredniczące do wykrywania ustawień regionalnych** i wszystkie funkcje potrzebne do skalowania internacjonalizacji (i18n).
-
-</Accordion>
-
-<Accordion header="Rozmiar bundle'a">
-
-Zamiast ładować ogromne pliki JSON na swoje strony, ładuj tylko niezbędną treść. Intlayer pomaga **zmniejszyć rozmiary bundle'a i stron nawet o 50%**.
-
-</Accordion>
-
-<Accordion header="Łatwość konserwacji">
-
-Określanie zakresu zawartości aplikacji **ułatwia konserwację** aplikacji na dużą skalę. Możesz powielić lub usunąć pojedynczy folder funkcji bez obciążania psychicznego koniecznością przeglądania całej bazy kodu zawartości. Dodatkowo Inlayer jest **w pełni napisany**, aby zapewnić dokładność treści.
-
-</Accordion>
-
-<Accordion header="AI Agent">
-
-Wspólna lokalizacja treści **zmniejsza potrzebny kontekst** dzięki modelom dużego języka (LLM). Intlayer zawiera także zestaw narzędzi, taki jak **CLI** do sprawdzania brakujących tłumaczeń**[LSP](https://github.com/aymericzip/intlayer/blob/main/docs/docs/en/lsp.md)**, **[MCP](https://github.com/aymericzip/intlayer/blob/main/docs/docs/en/mcp_server.md)** i **[agent skills](https://github.com/aymericzip/intlayer/blob/main/docs/docs/pl/agent_skills.md)**, aby praca programisty (DX) była jeszcze płynniejsza dla agentów AI.
-
-</Accordion>
-
-<Accordion header="Automatyzacja">
-
-Korzystaj z automatyzacji, aby tłumaczyć w swoim potoku CI/CD przy użyciu wybranego LLM na koszt dostawcy sztucznej inteligencji. Intlayer oferuje także **kompilator** do automatyzacji ekstrakcji treści, a także [platformę internetową] (https://github.com/aymericzip/intlayer/blob/main/docs/docs/en/intlayer_CMS.md), która pomaga **tłumaczyć w tle**.
-
-</Accordion>
-
-<Accordion header="Wydajność">
-
-Łączenie ogromnych plików JSON z komponentami może prowadzić do problemów z wydajnością i reaktywnością. Inlayer optymalizuje ładowanie treści w czasie kompilacji.
-
-</Accordion>
-
-<Accordion header="Skalowanie bez użycia dewelopera">
-
-Więcej niż tylko rozwiązanie i18n, Intlayer zapewnia **samodzielny [edytor wizualny](https://github.com/aymericzip/intlayer/blob/main/docs/docs/en/intlayer_visual_editor.md)** i **[pełny CMS](https://github.com/aymericzip/intlayer/blob/main/docs/docs/en/intlayer_CMS.md)**, który pomoże Ci zarządzać wielojęzyczną treścią w **w czasie rzeczywistym**, dzięki czemu współpraca z tłumaczami, copywriterami i innymi członkami zespołu będzie płynna. Treść może być przechowywana lokalnie i/lub zdalnie.
-
-</Accordion>
-
-</AccordionGroup>
-
----
-
-## Przewodnik krok po kroku dotyczący konfiguracji Intlayer w aplikacji React Router v7 z trasami opartymi na systemie plików
-
-<Tabs defaultTab="video">
-  <Tab label="Video" value="video">
-
-<iframe title="How to translate an React Router v7 (File-System Routes) app using Intlayer" class="m-auto aspect-16/9 w-full overflow-hidden rounded-lg border-0" allow="autoplay; gyroscope;" loading="lazy" width="1080" height="auto" src="https://www.youtube.com/embed/dS9L7uJeak4?autoplay=0&amp;origin=https://intlayer.org&amp;controls=0&amp;rel=1"/>
-
-  </Tab>
-  <Tab label="Code" value="code">
-
-<iframe
-  src="https://ide.intlayer.org/aymericzip/intlayer-react-router-v7-fs-routes-template?file=intlayer.config.ts"
-  className="m-auto overflow-hidden rounded-lg border-0 max-md:size-full max-md:h-[700px] md:aspect-16/9 md:w-full"
-  title="Demo CodeSandbox - How to Internationalize your application using Intlayer"
-  sandbox="allow-forms allow-modals allow-popups allow-presentation allow-same-origin allow-scripts"
-  loading="lazy"
-/>
-
-  </Tab>
-  <Tab label="Demo" value="demo">
-
-<iframe
-  src="https://intlayer-react-router-v7-fs-routes.vercel.app"
-  className="m-auto overflow-hidden rounded-lg border-0 max-md:size-full max-md:h-[700px] md:aspect-16/9 md:w-full"
-  title="Demo - intlayer-react-router-v7-fs-routes-template"
-  sandbox="allow-forms allow-modals allow-popups allow-presentation allow-same-origin allow-scripts"
-  loading="lazy"
-/>
-
-  </Tab>
-</Tabs>
-
-See [Application Template](https://github.com/aymericzip/intlayer-react-router-v7-fs-routes-template) on GitHub.
-
-<Steps>
-
-<Step number={1} title="Zainstaluj zależności">
-
-Zainstaluj niezbędne pakiety, używając preferowanego menedżera pakietów:
-
-```bash packageManager="npm"
-npm install intlayer react-intlayer
-npm install vite-intlayer --save-dev
-npm install @react-router/fs-routes --save-dev
-npx intlayer init
-```
-
-```bash packageManager="pnpm"
-pnpm add intlayer react-intlayer
-pnpm add vite-intlayer --save-dev
-pnpm add @react-router/fs-routes --save-dev
-```
-
-```bash packageManager="bun"
-bun add intlayer react-intlayer
-bun add vite-intlayer --dev
-bun add @react-router/fs-routes --dev
-bun x intlayer init
-```
-
-- **intlayer**
-
-  Główny pakiet, który dostarcza narzędzia do internacjonalizacji, zarządzania konfiguracją, tłumaczeń, [deklaracji treści](https://github.com/aymericzip/intlayer/blob/main/docs/docs/pl/dictionary/content_file.md), transpilecji oraz [poleceń CLI](https://github.com/aymericzip/intlayer/blob/main/docs/docs/pl/cli/index.md).
-
-- **react-intlayer**
-  Pakiet integrujący Intlayer z aplikacją React. Zapewnia dostawców kontekstu oraz hooki do internacjonalizacji w React.
-
-- **vite-intlayer**
-  Zawiera wtyczkę Vite do integracji Intlayer z [bundlerem Vite](https://vite.dev/guide/why.html#why-bundle-for-production), a także middleware do wykrywania preferowanego języka użytkownika, zarządzania ciasteczkami oraz obsługi przekierowań URL.
-
-- **@react-router/fs-routes**
-  Pakiet, który umożliwia routing oparty na systemie plików dla React Router v7.
-
-</Step>
-
-<Step number={2} title="Konfiguracja Twojego projektu">
-
-Utwórz plik konfiguracyjny, aby skonfigurować języki swojej aplikacji:
-
-```typescript fileName="intlayer.config.ts" codeFormat={["typescript", "esm", "commonjs"]}
-import { type IntlayerConfig, Locales } from "intlayer";
-
-const config: IntlayerConfig = {
-  internationalization: {
-    defaultLocale: Locales.ENGLISH,
-    locales: [Locales.ENGLISH, Locales.FRENCH, Locales.SPANISH],
-  },
-};
-
-export default config;
-```
-
-> Za pomocą tego pliku konfiguracyjnego możesz ustawić lokalizowane adresy URL, przekierowania w middleware, nazwy ciasteczek, lokalizację i rozszerzenie deklaracji zawartości, wyłączyć logi Intlayer w konsoli i wiele więcej. Pełną listę dostępnych parametrów znajdziesz w [dokumentacji konfiguracyjnej](https://github.com/aymericzip/intlayer/blob/main/docs/docs/pl/configuration.md).
-
-</Step>
-
-<Step number={3} title="Integracja Intlayer w konfiguracji Vite">
-
-Dodaj wtyczkę intlayer do swojej konfiguracji:
-
-```typescript fileName="vite.config.ts"
-import { reactRouter } from "@react-router/dev/vite";
-import { defineConfig } from "vite";
-import { intlayer } from "vite-intlayer";
-
-export default defineConfig({
-  plugins: [reactRouter(), intlayer()],
-});
-```
-
-> Wtyczka Vite `intlayer()` służy do integracji Intlayer z Vite. Zapewnia budowanie plików deklaracji zawartości i monitoruje je w trybie deweloperskim. Definiuje zmienne środowiskowe Intlayer w aplikacji Vite. Dodatkowo dostarcza aliasy w celu optymalizacji wydajności.
-
-</Step>
-
-<Step number={4} title="Konfiguracja tras opartych na systemie plików React Router v7">
-
-Skonfiguruj routing, aby używać tras opartych na systemie plików z `flatRoutes`:
-
-```typescript fileName="app/routes.ts"
-import type { RouteConfig } from "@react-router/dev/routes";
-import { flatRoutes } from "@react-router/fs-routes";
-import { configuration } from "intlayer";
-
-const routes: RouteConfig = flatRoutes({
-  // Ignoruj pliki deklaracji treści, aby nie były traktowane jako trasy
-  ignoredRouteFiles: configuration.content.fileExtensions.map(
-    (fileExtension) => `**/*${fileExtension}`
-  ),
-});
-
-export default routes;
-```
-
-> Funkcja `flatRoutes` z `@react-router/fs-routes` umożliwia routing oparty na systemie plików, gdzie struktura plików w katalogu `routes/` określa trasy Twojej aplikacji. Opcja `ignoredRouteFiles` zapewnia, że pliki deklaracji treści Intlayer (`.content.ts`, itp.) nie są traktowane jako pliki tras.
-
-</Step>
-
-<Step number={5} title="Utwórz pliki tras z konwencjami systemu plików">
-
-Przy routingu opartym na systemie plików używasz płaskiej konwencji nazewnictwa, gdzie kropki (`.`) reprezentują segmenty ścieżki, a nawiasy `()` oznaczają opcjonalne segmenty.
-
-Utwórz następujące pliki w katalogu `app/routes/`:
-
-#### Struktura plików
-
-```bash
-app/
-├── root.tsx                         # Opakowanie layoutu dla tras lokalizacji
-└──routes/
-    ├── ($locale)._index.tsx         # Strona główna (/, /es, itd.)
-    ├── ($locale)._index.content.ts  # Zawartość strony głównej
-    ├── ($locale).about.tsx          # Strona O nas (/about, /es/about, itd.)
-    └── ($locale).about.content.ts   # Zawartość strony O nas
-```
-
-Konwencje nazewnictwa:
-
-- `($locale)` - Opcjonalny dynamiczny segment dla parametru lokalizacji
-- `_layout` - Trasa layoutu, która opakowuje trasy potomne
-- `_index` - Trasa indeksowa (renderuje się na ścieżce nadrzędnej)
-- `.` (kropka) - Oddziela segmenty ścieżki (np. `($locale).about` → `/:locale?/about`)
-
-#### Komponent Layoutu
-
-```tsx fileName="app/root.tsx"
-import { getLocaleFromPath } from "intlayer";
-import { IntlayerProvider } from "react-intlayer";
-import {
-  isRouteErrorResponse,
-  Meta,
-  Outlet,
-  Scripts,
-  ScrollRestoration,
-  useLoaderData,
-} from "react-router";
-
-import type { Route } from "./+types/root";
-
-import "./app.css";
-
-// links and ErrorBoundary code
-
-export async function loader({ request }: Route.LoaderArgs) {
-  const locale = getLocaleFromPath(request.url);
-
-  return { locale };
-}
-
-export function Layout({
-  children,
-}: { children: React.ReactNode } & Route.ComponentProps) {
-  const data = useLoaderData<typeof loader>();
-  const { locale } = data ?? {};
-
-  return (
-    <html lang={locale}>
-      <head>
-        <meta charSet="utf-8" />
-        <meta content="width=device-width, initial-scale=1" name="viewport" />
-        <Meta />
-        <Links />
-      </head>
-      <body>
-        <IntlayerProvider locale={locale}>{children}</IntlayerProvider>
-        <ScrollRestoration />
-        <Scripts />
-      </body>
-    </html>
-  );
-}
-```
-
-#### Strona indeksowa
-
-```tsx fileName="app/routes/($locale)._index.tsx"
-import { getIntlayer, validatePrefix } from "intlayer";
-import { useIntlayer } from "react-intlayer";
-import { data } from "react-router";
-
-import { LocaleSwitcher } from "~/components/locale-switcher";
-import { Navbar } from "~/components/navbar";
-
-import type { Route } from "./+types/($locale)._index";
-
-export const loader = ({ params }: Route.LoaderArgs) => {
-  const { locale } = params;
-
-  const { isValid } = validatePrefix(locale);
-
-  if (!isValid) {
-    throw data("Locale not supported", { status: 404 });
-  }
-};
-
-export const meta: Route.MetaFunction = ({ params }) => {
-  const content = getIntlayer("page", params.locale);
-
-  return [
-    { title: content.title },
-    { content: content.description, name: "description" },
-  ];
-};
-
-export default function Page() {
-  const { title, description, aboutLink } = useIntlayer("page");
-
-  return (
-    <div>
-      <h1>{title}</h1>
-      <p>{description}</p>
-      <nav>
-        <LocalizedLink to="/about">{aboutLink}</LocalizedLink>
-      </nav>
-    </div>
-  );
-}
-```
-
-#### Strona O nas
-
-```tsx fileName="app/routes/($locale).about.tsx"
-import { getIntlayer, validatePrefix } from "intlayer";
-import { useIntlayer } from "react-intlayer";
-import { data } from "react-router";
-
-import { LocaleSwitcher } from "~/components/locale-switcher";
-import { Navbar } from "~/components/navbar";
-
-import type { Route } from "./+types/($locale).about";
-
-export const loader = ({ params }: Route.LoaderArgs) => {
-  const { locale } = params;
-
-  const { isValid } = validatePrefix(locale);
-
-  if (!isValid) {
-    throw data("Locale not supported", { status: 404 });
-  }
-};
-
-export const meta: Route.MetaFunction = ({ params }) => {
-  const content = getIntlayer("about", params.locale);
-
-  return [
-    { title: content.title },
-    { content: content.description, name: "description" },
-  ];
-};
-
-export default function AboutPage() {
-  const { title, content, homeLink } = useIntlayer("about");
-
-  return (
-    <div>
-      <h1>{title}</h1>
-      <p>{content}</p>
-      <nav>
-        <LocalizedLink to="/">{homeLink}</LocalizedLink>
-      </nav>
-    </div>
-  );
-}
-```
-
-</Step>
-
-<Step number={6} title="Zadeklaruj swoją zawartość">
-
-Utwórz i zarządzaj deklaracjami zawartości, aby przechowywać tłumaczenia. Umieść pliki zawartości obok plików tras:
-
-```tsx fileName="app/routes/($locale)._index.content.ts"
-import { t, type Dictionary } from "intlayer";
-
-const pageContent = {
-  key: "page",
-  content: {
-    title: t({
-      en: "Welcome to React Router v7 + Intlayer",
-      es: "Bienvenido a React Router v7 + Intlayer",
-      fr: "Bienvenue sur React Router v7 + Intlayer",
-    }),
-    description: t({
-      en: "Build multilingual applications with ease using React Router v7 and Intlayer.",
-      pl: "Twórz wielojęzyczne aplikacje z łatwością, korzystając z React Router v7 i Intlayer.",
-      es: "Cree aplicaciones multilingües fácilmente usando React Router v7 y Intlayer.",
-      fr: "Créez des applications multilingues facilement avec React Router v7 et Intlayer.",
-    }),
-    aboutLink: t({
-      en: "Learn About Us",
-      es: "Aprender Sobre Nosotros",
-      fr: "En savoir plus sur nous",
-    }),
-  },
-} satisfies Dictionary;
-
-export default pageContent;
-```
-
-```tsx fileName="app/routes/($locale).about.content.ts"
-import { t, type Dictionary } from "intlayer";
-
-const aboutContent = {
-  key: "about",
-  content: {
-    title: t({
-      en: "About Us",
-      es: "Sobre Nosotros",
-      fr: "À propos de nous",
-    }),
-    content: t({
-      en: "This is the about page content.",
-      es: "Este es el contenido de la página de información.",
-      fr: "Ceci est le contenu de la page à propos.",
-    }),
-    homeLink: t({
-      en: "Home",
-      es: "Inicio",
-      fr: "Accueil",
-    }),
-  },
-} satisfies Dictionary;
-
-export default aboutContent;
-```
-
-> Twoje deklaracje treści mogą być zdefiniowane w dowolnym miejscu w aplikacji, pod warunkiem, że zostaną umieszczone w katalogu `contentDir` (domyślnie `./app`). I muszą odpowiadać rozszerzeniu pliku deklaracji treści (domyślnie `.content.{json,ts,tsx,js,jsx,mjs,cjs,md,mdx,yaml,yml}`).
-
-> Po więcej szczegółów odsyłamy do [dokumentacji deklaracji treści](https://github.com/aymericzip/intlayer/blob/main/docs/docs/pl/dictionary/content_file.md).
-
-> Jeśli Twoja aplikacja już istnieje, możesz użyć [Intlayer Compiler](https://github.com/aymericzip/intlayer/blob/main/docs/docs/pl/compiler.md), a także [polecenia extract](https://github.com/aymericzip/intlayer/blob/main/docs/docs/pl/cli/extract.md), aby transformować tysiące komponentów w sekundę.
-
-</Step>
-
-<Step number={7} title="Tworzenie komponentów uwzględniających lokalizację">
-
-Utwórz komponent `LocalizedLink` do nawigacji uwzględniającej lokalizację:
-
-```tsx fileName="app/components/localized-link.tsx"
-import type { FC } from "react";
-
-import { getLocalizedUrl, type LocalesValues } from "intlayer";
-import { useLocale } from "react-intlayer";
-import { Link, type LinkProps, type To } from "react-router";
-
-const isExternalLink = (to: string) => /^(https?:)?\/\//.test(to);
-
-// Funkcja lokalizująca ścieżkę na podstawie podanego locale
-export const locacalizeTo = (to: To, locale: LocalesValues): To => {
-  if (typeof to === "string") {
-    if (isExternalLink(to)) {
-      return to; // Zwraca link zewnętrzny bez zmian
-    }
-
-    return getLocalizedUrl(to, locale); // Zwraca lokalizowany URL
-  }
-
-  if (isExternalLink(to.pathname ?? "")) {
-    return to; // Zwraca link zewnętrzny bez zmian
-  }
-
-  return {
-    ...to,
-    pathname: getLocalizedUrl(to.pathname ?? "", locale), // Lokalizuje pathname
-  };
-};
-
-// Komponent linku lokalizowanego
-export const LocalizedLink: FC<LinkProps> = (props) => {
-  const { locale } = useLocale();
-
-  return <Link {...props} to={locacalizeTo(props.to, locale)} />;
-};
-```
-
-W przypadku, gdy chcesz nawigować do lokalizowanych tras, możesz użyć hooka `useLocalizedNavigate`:
-
-```tsx fileName="app/hooks/useLocalizedNavigate.ts"
-import { useLocale } from "react-intlayer";
-import { type NavigateOptions, type To, useNavigate } from "react-router";
-
-import { locacalizeTo } from "~/components/localized-link";
-
-export const useLocalizedNavigate = () => {
-  const navigate = useNavigate();
-  const { locale } = useLocale();
-
-  const localizedNavigate = (to: To, options?: NavigateOptions) => {
-    const localedTo = locacalizeTo(to, locale);
-
-    navigate(localedTo, options);
-  };
-
-  return localizedNavigate;
-};
-```
-
-</Step>
-
-<Step number={8} title="Utwórz komponent przełącznika języka">
-
-Utwórz komponent, który pozwoli użytkownikom zmieniać języki:
-
-```tsx fileName="app/components/locale-switcher.tsx"
-import type { FC } from "react";
-
-import {
-  getHTMLTextDir,
-  getLocaleName,
-  getLocalizedUrl,
-  getPathWithoutLocale,
-  Locales,
-} from "intlayer";
-import { useIntlayer, useLocale } from "react-intlayer";
-import { Link, useLocation } from "react-router";
-
-export const LocaleSwitcher: FC = () => {
-  const { localeSwitcherLabel } = useIntlayer("locale-switcher");
-  const { pathname } = useLocation();
-
-  const { availableLocales, locale } = useLocale();
-
-  const pathWithoutLocale = getPathWithoutLocale(pathname);
-
-  return (
-    <ol>
-      {availableLocales.map((localeItem) => (
-        <li key={localeItem}>
-          <Link
-            aria-current={localeItem === locale ? "page" : undefined}
-            aria-label={`${localeSwitcherLabel.value} ${getLocaleName(localeItem)}`}
-            reloadDocument // Przeładuj stronę, aby zastosować nową lokalizację
-            to={getLocalizedUrl(pathWithoutLocale, localeItem)}
-          >
-            <span>
-              {/* Lokalizacja - np. FR */}
-              {localeItem}
-            </span>
-            <span>
-              {/* Język w jego własnej lokalizacji - np. Français */}
-              {getLocaleName(localeItem, locale)}
-            </span>
-            <span dir={getHTMLTextDir(localeItem)} lang={localeItem}>
-              {/* Język w bieżącej lokalizacji - np. Francés przy ustawionej lokalizacji Locales.SPANISH */}
-              {getLocaleName(localeItem)}
-            </span>
-            <span dir="ltr" lang={Locales.ENGLISH}>
-              {/* Język po angielsku - np. French */}
-              {getLocaleName(localeItem, Locales.ENGLISH)}
-            </span>
-          </Link>
-        </li>
-      ))}
-    </ol>
-  );
-};
-```
-
-> Aby dowiedzieć się więcej o hooku `useLocale`, zapoznaj się z [dokumentacją](https://github.com/aymericzip/intlayer/blob/main/docs/docs/pl/packages/react-intlayer/useLocale.md).
-
-</Step>
-
-<Step number={9} title="Dodaj zarządzanie atrybutami HTML">
-
-Utwórz hook do zarządzania atrybutami lang i dir w HTML:
-
-```tsx fileName="app/hooks/useI18nHTMLAttributes.tsx"
-import { getHTMLTextDir } from "intlayer";
-import { useEffect } from "react";
-import { useLocale } from "react-intlayer";
-
-export const useI18nHTMLAttributes = () => {
-  const { locale } = useLocale();
-
-  useEffect(() => {
-    document.documentElement.lang = locale;
-    document.documentElement.dir = getHTMLTextDir(locale);
-  }, [locale]);
-};
-```
-
-Ten hook jest już używany w komponencie layout (`($locale)._layout.tsx`) pokazanym w Kroku 5.
-
-</Step>
-
-<Step number={10} title="Add middleware">
-
-Następnie użyj go w swoim komponencie root:
-
-Możesz również użyć `intlayerProxy` do dodania routingu po stronie serwera do twojej aplikacji. Ten plugin automatycznie wykryje bieżącą lokalizację na podstawie adresu URL i ustawi odpowiednią plik cookie lokalizacji. Jeśli nie określono lokalizacji, plugin określi najbardziej odpowiednią lokalizację na podstawie preferencji języka przeglądarki użytkownika. Jeśli nie wykryto żadnej lokalizacji, będzie przekierowywać do lokalizacji domyślnej.
-
-> Pamiętaj, że aby używać `intlayerProxy` w produkcji, musisz przenieść pakiet `vite-intlayer` z `devDependencies` do `dependencies`.
-
-> Od wersji Intlayer v9, `intlayerProxy()` jest dołączony bezpośrednio do wtyczki `intlayer()` i domyślnie włączony za pomocą opcji `routing.enableProxy` (`true` domyślnie). Rejestrowanie go osobno, jak pokazano poniżej, jest teraz opcjonalne — jest zachowywane dla wstecznej kompatybilności i dla konfiguracji, które muszą kontrolować kolejność wtyczek. Ustaw `routing.enableProxy: false`, aby zrezygnować. Zobacz [notatki wydania v9](https://github.com/aymericzip/intlayer/blob/main/docs/docs/pl/releases/v9.md).
-
-```tsx fileName="app/routes/layout.tsx"
-import { Outlet } from "react-router";
-import { IntlayerProvider } from "react-intlayer";
-
-import { useI18nHTMLAttributes } from "app/hooks/useI18nHTMLAttributes"; // importuj hook
-
-export default function RootLayout() {
-  useI18nHTMLAttributes(); // wywołaj hook
-
-  return (
-    <IntlayerProvider>
-      <Outlet />
-    </IntlayerProvider>
-  );
-}
-```
-
-</Step>
-
-<Step number={11} title="Wyodrębnij zawartość swoich komponentów" isOptional={true}>
-
-Jeśli masz istniejącą bazę kodu, transformacja tysięcy plików może być czasochłonna.
-
-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ść.
-
-Aby go skonfigurować, możesz dodać sekcję `compiler` w pliku `intlayer.config.ts`:
-
-```typescript fileName="intlayer.config.ts" codeFormat={["typescript", "esm", "commonjs"]}
-import { type IntlayerConfig } from "intlayer";
-
-const config: IntlayerConfig = {
-  // ... Reszta Twojej konfiguracji
-  compiler: {
-    /**
-     * Wskazuje, czy kompilator powinien być włączony.
-     */
-    enabled: true,
-
-    /**
-     * Definiuje ścieżkę plików wyjściowych
-     */
-    output: ({ fileName, extension }) => `./${fileName}${extension}`,
-
-    /**
-     * 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ąć.
-     */
-    saveComponents: false,
-
-    /**
-     * Prefiks klucza słownika
-     */
-    dictionaryKeyPrefix: "",
-  },
-};
-
-export default config;
-```
-
-Uruchom ekstraktor, aby przetransformować komponenty i wyodrębnić zawartość
-
-```bash packageManager="npm"
-npx intlayer extract
-```
-
-```bash packageManager="pnpm"
-pnpm intlayer extract
-```
-
-```bash packageManager="yarn"
-yarn intlayer extract
-```
-
-```bash packageManager="bun"
-bun x intlayer extract
-```
-
-> Since v9, the `intlayerCompiler` is included in the `intlayer` plugin. So you don't need to add it manually.
-
-Zaktualizuj `vite.config.ts`, aby dołączyć wtyczkę `intlayerCompiler`:
-
-```ts fileName="vite.config.ts"
-import { defineConfig } from "vite";
-import { intlayer, intlayerCompiler } from "vite-intlayer";
-
-export default defineConfig({
-  plugins: [
-    intlayer(),
-    intlayerCompiler(), // Adds the compiler plugin
-  ],
-});
-```
-
-```bash packageManager="npm"
-npm run build # Lub npm run dev
-```
-
-```bash packageManager="pnpm"
-pnpm run build # Or pnpm run dev
-```
-
-```bash packageManager="yarn"
-yarn build # Or yarn dev
-```
-
-```bash packageManager="bun"
-bun run build # Or bun run dev
-```
-
-</Step>
-
-</Steps>
-
-## Configure TypeScript
-
-Intlayer uses module augmentation to get benefits of TypeScript and make your codebase stronger.
-
-Ensure your TypeScript configuration includes the autogenerated types:
-
-```json5 fileName="tsconfig.json"
-{
-  // ... your existing configurations
-  include: [
-    // ... your existing includes
-    ".intlayer/**/*.ts", // Include the auto-generated types
-  ],
-}
-```
-
----
-
-## Git Configuration
-
-It is recommended to ignore the files generated by Intlayer. This allows you to avoid committing them to your Git repository.
-
-To do this, you can add the following instructions to your `.gitignore` file:
-
-```plaintext fileName=".gitignore"
-# Ignore the files generated by Intlayer
-.intlayer
-```
-
----
-
-## VS Code Extension
-
-To improve your development experience with Intlayer, you can install the official **Intlayer VS Code Extension**.
-
-[Install from the VS Code Marketplace](https://marketplace.visualstudio.com/items?itemName=intlayer.intlayer-vs-code-extension)
-
-This extension provides:
-
-- **Autocompletion** for translation keys.
-- **Real-time error detection** for missing translations.
-- **Inline previews** of translated content.
-- **Quick actions** to easily create and update translations.
-
-For more details on how to use the extension, refer to the [Intlayer VS Code Extension documentation](https://intlayer.org/doc/vs-code-extension).
-
----
-
-## Go Further
-
-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).
-
----
-
-## Odnośniki do dokumentacji
-
-- [Dokumentacja Intlayer](https://intlayer.org)
-- [Dokumentacja React Router v7](https://reactrouter.com/)
-- [Dokumentacja React Router fs-routes](https://reactrouter.com/how-to/file-route-conventions)
-- [useIntlayer hook](https://github.com/aymericzip/intlayer/blob/main/docs/docs/pl/packages/react-intlayer/useIntlayer.md)
-- [useLocale hook](https://github.com/aymericzip/intlayer/blob/main/docs/docs/pl/packages/react-intlayer/useLocale.md)
-- [Deklaracja treści](https://github.com/aymericzip/intlayer/blob/main/docs/docs/pl/dictionary/content_file.md)
-- [Konfiguracja](https://github.com/aymericzip/intlayer/blob/main/docs/docs/pl/configuration.md)
-
-Ten kompleksowy przewodnik zawiera wszystko, co potrzebne do integracji Intlayer z React Router v7 używając routingu opartego na systemie plików, aby uzyskać w pełni zinternacjonalizowaną aplikację z trasowaniem uwzględniającym lokalizację oraz wsparciem dla TypeScript.
-
-## Często Zadawane Pytania
-
-<FAQ>
-
-<Question title="Jakie są różne rozwiązania dostępne do internacjonalizacji aplikacji React Router v7?">
-
-- **`react-i18next`**: popularna biblioteka oparta na przestrzeniach nazw JSON ładowanych w czasie wykonywania, bez automatycznego tree-shakingu.
-- **`react-intl`**: format komunikatów ICU z konfiguracją ekstrakcji.
-- **`Intlayer`**: najbardziej zaawansowane rozwiązanie. Treści deklarowane w dowolnym miejscu bazy kodu ([obok każdego komponentu lub centralnie](https://intlayer.org/blog/per-component-vs-centralized-i18n)) i kompilowane w czasie budowy, w pełni typowane, z tłumaczeniem AI, edytorem wizualnym i systemem CMS.
-
-Główną zaletą w React Router v7 jest pełna integracja z routingiem opartym na systemie plików (file system routing), generowanie alternatyw `hreflang` oraz automatyczne usuwanie nieużywanych tłumaczeń. Zobacz [dlaczego Intlayer](https://github.com/aymericzip/intlayer/blob/main/docs/docs/pl/interest_of_intlayer.md).
-
-</Question>
-
-<Question title="O ile i18n zwiększa rozmiar mojego bundle'a w React Router?">
-
-Znacznie mniej niż rozwiązania oparte na przestrzeniach nazw, ponieważ strona nigdy nie pobiera katalogu, którego nie renderuje. Kompilator czasu budowy zastępuje wywołania `useIntlayer` dokładnymi wpisami, z których korzysta komponent, a [słowniki dynamiczne](https://github.com/aymericzip/intlayer/blob/main/docs/docs/pl/dynamic_dictionaries/index.md) dzielą resztę na poszczególne języki. W porównaniu z typowymi alternatywami, Intlayer zmniejsza rozmiar bundle'a i strony nawet o 50%. Zobacz [optymalizację bundle'a](https://github.com/aymericzip/intlayer/blob/main/docs/docs/pl/bundle_optimization.md) oraz [benchmark](https://github.com/aymericzip/intlayer/blob/main/docs/docs/pl/benchmark/index.md).
-
-</Question>
-
-<Question title="Czy mogę zmigrować z react-i18next lub react-intl bez przepisywania moich komponentów?">
-
-Tak, i są dwie drogi. Możesz migrować treść stopniowo za pomocą [przewodnika migracji z react-i18next](https://github.com/aymericzip/intlayer/blob/main/docs/docs/pl/migration_from_react-i18next_to_intlayer.md). Możesz także zachować dotychczasowe API: [adaptery kompatybilności](https://github.com/aymericzip/intlayer/blob/main/docs/docs/pl/compat/index.md) udostępniają dokładnie to samo API co `react-i18next` i `react-intl`, ale zasilane słownikami Intlayer.
-
-</Question>
-
-<Question title="Czy mogę zachować moje istniejące pliki tłumaczeń JSON?">
-
-Tak. Wtyczka [sync JSON](https://github.com/aymericzip/intlayer/blob/main/docs/docs/pl/plugins/sync-json.md) utrzymuje Twoje pliki `/messages/{locale}/{namespace}.json` jako źródło prawdy i generuje z nich słowniki Intlayer w obu kierunkach. Wtyczka [sync PO](https://github.com/aymericzip/intlayer/blob/main/docs/docs/pl/plugins/sync-po.md) robi to samo dla katalogów gettext, a [pliki per locale](https://github.com/aymericzip/intlayer/blob/main/docs/docs/pl/per_locale_file.md) pozwalają rozdzielić zawartość według języka zamiast grupować lokalizacje w jednym pliku.
-
-</Question>
-
-<Question title="Czy muszę przenosić moją zawartość klucz po kluczu?">
-
-Nie. Uruchom `npx intlayer extract`, a Intlayer odczyta Twoje komponenty, wyodrębni ciągi widoczne dla użytkownika i utworzy plik `.content` obok każdego z nich, dzięki czemu przeglądasz diff zamiast ręcznie kopiować ciągi do katalogu pojedynczo.
-
-W przypadku w pełni zautomatyzowanego procesu [Intlayer Compiler](https://github.com/aymericzip/intlayer/blob/main/docs/docs/pl/compiler.md) robi to samo w czasie budowania: skanuje kod JSX, TSX, Vue i Svelte przy każdej zmianie, generuje słowniki i utrzymuje je w synchronizacji za pośrednictwem hot module replacement, dzięki czemu nie trzeba w ogóle ręcznie utrzymywać kluczy.
-
-Warto pamiętać o dwóch ograniczeniach przed włączeniem kompilatora. Działa on w oparciu o analizę statyczną, więc ciągi tekstowe istniejące tylko w czasie wykonywania, takie jak kody błędów API czy pola z CMS, pozostają poza jego zasięgiem. Musi on także odróżnić tekst dla użytkownika od logiki aplikacji, takiej jak `className="active"` czy kod stanu, co w dużej bazie kodu wymaga kilku adnotacji. Polecenie [extract](https://github.com/aymericzip/intlayer/blob/main/docs/docs/pl/cli/extract.md) unika obu tych problemów, pozostawiając Ci pełną kontrolę.
-
-</Question>
-
-<Question title="Jakie narzędzia dla edytora i agentów AI są dostępne?">
-
-Pięć narzędzi, wszystkie opcjonalne:
-
-- **[Rozszerzenie VS Code](https://github.com/aymericzip/intlayer/blob/main/docs/docs/pl/vs_code_extension.md)**: przejście od klucza `useIntlayer` do pliku treści, który go deklaruje, wyodrębnianie treści z komponentu oraz uruchamianie build, fill, test, push i pull z palety poleceń lub dedykowanej karty Intlayer.
-- **[Serwer LSP](https://github.com/aymericzip/intlayer/blob/main/docs/docs/pl/lsp.md)**: taka sama świadomość w dowolnym edytorze obsługującym LSP, z funkcjami przejdź do definicji (go to definition), znajdź wszystkie referencje, podglądem przetłumaczonej wartości po najechaniu kursorem, autouzupełnianiem kluczy i pól oraz ostrzeżeniem, gdy klucz nie jest nigdzie zadeklarowany. Rozpoznaje również wywołania `i18next`, `react-i18next`, `next-intl` i `use-intl`, co ułatwia migrację.
-- **[Serwer MCP](https://github.com/aymericzip/intlayer/blob/main/docs/docs/pl/mcp_server.md)**: udostępnia dokumentację i CLI Intlayer dla Cursor, VS Code, Claude Desktop, Claude Code i ChatGPT, dzięki czemu asystent odpowiada na podstawie aktualnej dokumentacji zamiast zgadywać i może samodzielnie wykonywać polecenia, takie jak `intlayer fill`.
-- **[Umiejętności agenta (Agent skills)](https://github.com/aymericzip/intlayer/blob/main/docs/docs/pl/agent_skills.md)**: wyspecjalizowane umiejętności, takie jak `intlayer-config`, `intlayer-cli` i `intlayer-content`, oraz po jednej dla każdego frameworka, które uczą agenta konfiguracji routingu i typów węzłów treści.
-- **[Wtyczka ESLint](https://github.com/aymericzip/intlayer/blob/main/docs/docs/pl/eslint.md)**: reguła `no-raw-text` oznacza zakodowane na stałe ciągi tekstowe, z dodatkowymi regułami dla statycznych kluczy słownika i nieużywanej zawartości.
-
-</Question>
-
-<Question title="Jaka jest różnica między tym przewodnikiem a przewodnikiem React Router opartym na konfiguracji?">
-
-Różnica dotyczy wyłącznie sposobu deklarowania tras. Ten przewodnik korzysta z konwencji routingu opartego na systemie plików, gdzie segment języka wynika z nazw plików, podczas gdy [przewodnik oparty na konfiguracji](https://github.com/aymericzip/intlayer/blob/main/docs/docs/pl/intlayer_with_react_router_v7.md) deklaruje to samo drzewo w `routes.ts`. Deklaracje treści, hooki i konfiguracja są identyczne w obu przypadkach, więc możesz zmienić konwencję bez modyfikacji i18n.
-
-</Question>
-
-<Question title="Jak dodać segment lokalizacji w routingu opartym na systemie plików?">
-
-Kroki 4 i 5 to opisują: język staje się dynamicznym segmentem w nazwach plików tras, więc każda strona pod nim otrzymuje aktywny język. Funkcja `validatePrefix` sprawdza, czy dany segment jest zadeklarowanym językiem, dzięki czemu `/xx/about` zwraca prawdziwy błąd 404 zamiast zduplikowanej strony, a `getLocalizedUrl` przekształca dowolną ścieżkę na język docelowy.
-
-</Question>
-
-<Question title="Czy to działa z React Routerem w trybie frameworka, z SSR i loaderami?">
-
-Tak. W trybie frameworka React Router v7 uruchamia routing po stronie serwera, a Intlayer określa język z parametrów żądania, więc kod wygenerowany przez loader lub serwer zawiera właściwą treść już w pierwszym bajcie HTML. Krok 7 pokazuje odczytywanie treści w loaderze serwera.
-
-</Question>
-
-<Question title="Jak dodać tagi hreflang i zlokalizowane metadane dla SEO?">
-
-Użyj funkcji `getMultilingualUrls`, aby wygenerować linki alternatywne dla każdego zadeklarowanego języka, w tym wpis `x-default`. Krok 8 pokazuje, jak przekazać je do eksportu `meta` w React Routerze.
-
-</Question>
-
-<Question title="Jak zbudować zlokalizowany komponent Link?">
-
-Pokazuje to krok 10. Komponent opakowuje `Link` z React Routera i przekazuje adres przez `getLocalizedUrl`, dzięki czemu wewnętrzny link zapisany jako `/about` staje się `/pl/about` dla polskiego użytkownika bez powtarzania lokalizacji przy każdym wywołaniu.
-
-</Question>
-
-<Question title="Jak automatycznie przetłumaczyć aplikację za pomocą AI?">
-
-Uruchom `npx intlayer fill`. Narzędzie CLI wykrywa brakujące tłumaczenia i uzupełnia je za pomocą wybranego modelu LLM, korzystając z Twojego dostawcy i klucza API. Flaga `--git-diff` ogranicza operację do treści zmienionych na bieżącej gałęzi. Zobacz [polecenie fill](https://github.com/aymericzip/intlayer/blob/main/docs/docs/pl/cli/fill.md) oraz [integrację CI/CD](https://github.com/aymericzip/intlayer/blob/main/docs/docs/pl/CI_CD.md).
-
-</Question>
-
-<Question title="Czy Intlayer obsługuje formy mnogie, płeć i sformatowany tekst (rich text)?">
-
-Tak: [formy mnogie](https://github.com/aymericzip/intlayer/blob/main/docs/docs/pl/dictionary/plurial.md), [treści zależne od płci](https://github.com/aymericzip/intlayer/blob/main/docs/docs/pl/dictionary/gender.md), warunki, [wstawki (insertions)](https://github.com/aymericzip/intlayer/blob/main/docs/docs/pl/dictionary/insertion.md), [Markdown](https://github.com/aymericzip/intlayer/blob/main/docs/docs/pl/dictionary/markdown.md) oraz [formatowania](https://github.com/aymericzip/intlayer/blob/main/docs/docs/pl/formatters.md) dla liczb, dat i walut.
-
-</Question>
-
-<Question title="Jak tłumacze mogą edytować treść bez dotykania kodu?">
-
-Za pośrednictwem [edytora wizualnego](https://github.com/aymericzip/intlayer/blob/main/docs/docs/pl/intlayer_visual_editor.md), który działa na Twojej własnej infrastrukturze i pozwala każdemu edytować tekst bezpośrednio w działającej aplikacji, lub systemu [CMS](https://github.com/aymericzip/intlayer/blob/main/docs/docs/pl/intlayer_CMS.md), który wyodrębnia treść, dzięki czemu może być zmieniana bez konieczności ponownego wdrażania.
-
-</Question>
-
-<Question title="Czy Intlayer jest darmowy i open source?">
-
-Tak, na licencji Apache 2.0, włączając zastosowania komercyjne. Hostowany CMS to opcjonalna płatna usługa, którą można również [hostować samodzielnie (self-host)](https://github.com/aymericzip/intlayer/blob/main/docs/docs/pl/self_hosting.md).
-
-</Question>
-
-</FAQ>