@intlayer/docs 9.4.4 → 9.5.0

package/blog/pl/transform_existing_nextjs_app_using_compiler.md

@@ -0,0 +1,293 @@
+---
+createdAt: 2026-01-10
+updatedAt: 2026-09-06
+title: "Jak uczynić istniejącą aplikację Next.js wielojęzyczną (i18n) po fakcie (Przewodnik i18n 2026)"
+description: "Przewodnik 2026: jak dodać wielojęzyczność (i18n) do istniejącej aplikacji Next.js bez uciążliwego refaktoryzowania. Poznaj automatyczną ekstrakcję, tłumaczenia AI i routing z Intlayer."
+keywords:
+  - Next.js i18n
+  - Internacjonalizacja
+  - Przetłumacz istniejącą aplikację Next.js
+  - Next.js 16
+  - Intlayer
+  - Wielojęzyczność
+  - React i18n
+  - Kompilator
+  - Tłumaczenie AI
+  - SEO
+slugs:
+  - blog
+  - transform-existing-nextjs-app-into-multilingual-app
+applicationTemplate: https://github.com/aymericzip/intlayer-next-no-lolale-path-template
+youtubeVideo: https://www.youtube.com/watch?v=e_PPG7PTqGU
+history:
+  - version: 9.4.0
+    date: 2026-08-22
+    changes: "Update to Next.js >= 9.4.0 architecture"
+  - version: 8.9.0
+    date: 2026-05-04
+    changes: "Update Solid useIntlayer API usage to direct property access"
+  - version: 8.2.0
+    date: 2026-03-09
+    changes: "Update compiler options, add FilePathPattern support"
+  - version: 8.1.6
+    date: 2026-02-23
+    changes: "Initial release"
+author: aymericzip
+---
+
+# Jak uczynić istniejącą aplikację Next.js wielojęzyczną (i18n) po fakcie (Przewodnik i18n 2026)
+
+Dodanie internacjonalizacji (i18n) do projektu Next.js od samego początku jest dość proste. Ale co zrobić, gdy masz już dojrzałą aplikację wdrożoną w jednym języku i musisz uczynić ją wielojęzyczną **po fakcie**?
+
+Z tradycyjnymi bibliotekami, takimi jak `next-intl` czy `next-i18next`, to prawdziwy koszmar:
+
+- Ręczne wyszukiwanie zahardkodowanych tekstów w setkach plików JSX/TSX.
+- Tworzenie zagnieżdżonych plików JSON i wymyślanie sztucznych kluczy (`pages.dashboard.header.title`).
+- Zastępowanie tekstów wywołaniami hooków (`t('...')`).
+- Przebudowa całego katalogu `app/` do `app/[locale]/...`, co niszczy istniejące linki i SEO.
+
+W 2026 roku nie musisz przepisywać swojej bazy kodu. Z **Intlayer** wdrożysz wielojęzyczność w kilka minut dzięki automatycznej ekstrakcji, tłumaczeniom AI i elastycznemu routingowi.
+
+> Szukasz pełnego przewodnika technicznego krok po kroku dla Next.js 16 App Router? Sprawdź naszą dokumentację: [Tłumaczenie Next.js 16 z Intlayer](https://github.com/aymericzip/intlayer/blob/main/docs/docs/pl/intlayer_with_nextjs_16.md).
+
+## Spis treści
+
+<TOC/>
+
+## Dylemat retrofittingu: Dlaczego tłumaczenie istniejącej aplikacji bywa trudne
+
+Trzy główne wyzwania:
+
+1. **Destrukcja kodu**: Ręczne przenoszenie tekstów wymaga edycji niemal każdego komponentu.
+2. **Wymuszony routing**: Konieczność przenoszenia stron do folderu `[locale]`.
+3. **Żmudna praca nad tłumaczeniami**: Tłumaczenie setek kluczy na wiele języków.
+
+Intlayer rozwiązuje te problemy dzięki **wsparciu kompilatora**, **deklaratywnym słownikom** i **elastycznemu routingowi**.
+
+## Zautomatyzowana ekstrakcja treści (bez ręcznego szukania)
+
+### Opcja A: Narzędzie CLI (`npx intlayer extract`)
+
+Uruchom narzędzie ekstrakcji bezpośrednio w swoim projekcie:
+
+```bash packageManager="npm"
+npx intlayer extract
+```
+
+```bash packageManager="pnpm"
+pnpm dlx intlayer extract
+```
+
+```bash packageManager="yarn"
+yarn dlx intlayer extract
+```
+
+```bash packageManager="bun"
+bunx intlayer extract
+```
+
+Narzędzie wygeneruje deklaracje (`.content.ts`) obok Twoich komponentów.
+
+### Opcja B: Kompilator Intlayer (Ekstrakcja w czasie budowania)
+
+Pisz zwykły tekst w komponentach. Kompilator wyodrębni go w czasie budowania i wstawi przetłumaczony kod:
+
+```tsx fileName="src/app/page.tsx"
+// Write normal React code. The compiler extracts the text automatically
+export default function HomePage() {
+  return (
+    <section>
+      <h1>Welcome to our platform</h1>
+      <p>Start exploring our modern features today.</p>
+    </section>
+  );
+}
+```
+
+Za kulisami Intlayer buduje słownik i łączy komponent ze zlokalizowaną treścią, całkowicie eliminując etap ręcznego refaktoryzowania.
+
+W takim przypadku wygenerowany zostanie plik `src/app/page.content.ts` o następującej zawartości:
+
+```typescript fileName="src/app/page.content.ts"
+import { Dictionary } from "intlayer";
+
+const content = {
+  key: "home-page",
+  content: {
+    welcomeToOurPlatform: t({ en: "Welcome to our platform" }),
+    startExploringOurModernFeaturesToday: t({
+      en: "Start exploring our modern features today.",
+    }),
+  },
+};
+
+export default content;
+```
+
+## Tłumaczenie AI z Twoim ulubionym LLM
+
+Błyskawicznie tłumacz słowniki za pomocą OpenAI, Anthropic, DeepSeek lub Mistral:
+
+```bash packageManager="npm"
+npx intlayer fill
+```
+
+```bash packageManager="pnpm"
+pnpm dlx intlayer fill
+```
+
+```bash packageManager="yarn"
+yarn dlx intlayer fill
+```
+
+```bash packageManager="bun"
+bunx intlayer fill
+```
+
+```typescript fileName="intlayer.config.ts"
+import { Locales, type IntlayerConfig } from "intlayer";
+
+const config: IntlayerConfig = {
+  internationalization: {
+    locales: [Locales.ENGLISH, Locales.FRENCH, Locales.SPANISH, Locales.GERMAN],
+    defaultLocale: Locales.ENGLISH,
+  },
+  ai: {
+    provider: "openai",
+    model: "gpt-4o-mini",
+    apiKey: process.env.OPENAI_API_KEY,
+    applicationContext: "Panel SaaS dla produktywności i współpracy zespołowej",
+  },
+};
+
+export default config;
+```
+
+Uruchomienie `npx intlayer fill` automatycznie uzupełnia deklaracje `.content.ts` o tłumaczenia dla wszystkich skonfigurowanych języków:
+
+```typescript fileName="src/app/page.content.ts"
+import { Dictionary } from "intlayer";
+
+const content = {
+  key: "home-page",
+  content: {
+    welcomeToOurPlatform: t({
+      en: "Welcome to our platform",
+      fr: "Bienvenue sur notre plateforme",
+      es: "Bienvenido a nuestra plataforma",
+      pl: "Witamy na naszej platformie",
+    }),
+    startExploringOurModernFeaturesToday: t({
+      en: "Start exploring our modern features today.",
+      fr: "Découvrez nos fonctionnalités modernes dès aujourd'hui.",
+      es: "Comience a explorar nuestras funciones modernas hoy.",
+      pl: "Odkryj nasze nowoczesne funkcje już dziś.",
+    }),
+  },
+};
+
+export default content;
+```
+
+Ponieważ Intlayer dostarcza modelowi LLM ogólny `applicationContext`, wygenerowane tłumaczenia znacznie lepiej zachowują niuanse techniczne, ton marki i kontekst gramatyczny niż tradycyjne narzędzia automatyczne.
+
+Aby upewnić się, że żaden tekst nie został pominięty przed wdrożeniem na produkcję:
+
+```bash
+npx intlayer test
+```
+
+## Routing wielojęzyczny bez naruszania istniejących URL
+
+Intlayer zapewnia:
+
+- **Tryb parametrów / ciasteczek (`search-params`)**: Brak konieczności przenoszenia plików do `[locale]`.
+- **Tryb prefiksów (`prefix` / `prefix-all-locales`)**: Prosta obsługa ścieżek URL przyjaznych dla SEO.
+
+Skonfiguruj integrację z Next.js w kilka sekund:
+
+```typescript fileName="next.config.ts"
+import type { NextConfig } from "next";
+import { withIntlayer } from "next-intlayer/server";
+
+const nextConfig: NextConfig = {/* Your existing Next.js config */};
+
+export default withIntlayer(nextConfig);
+```
+
+Owiń swój główny layout za pomocą `IntlayerProvider`:
+
+```tsx fileName="src/app/layout.tsx"
+import type { ReactNode } from "react";
+import { IntlayerProvider } from "next-intlayer";
+import { getLocale } from "next-intlayer/server";
+import { getHTMLTextDir } from "intlayer";
+
+export default async function RootLayout({
+  children,
+}: {
+  children: ReactNode;
+}) {
+  const locale = await getLocale();
+
+  return (
+    <html lang={locale} dir={getHTMLTextDir(locale)}>
+      <body>
+        <IntlayerProvider defaultLocale={locale}>{children}</IntlayerProvider>
+      </body>
+    </html>
+  );
+}
+```
+
+## Wielojęzyczne SEO
+
+Zapewnij automatyczne generowanie zlokalizowanych metadanych i tagów `hreflang`:
+
+```tsx fileName="src/app/page.tsx"
+import type { Metadata } from "next";
+import { getLocale } from "next-intlayer/server";
+import { getIntlayer } from "intlayer";
+
+export const generateMetadata = async (): Promise<Metadata> => {
+  const locale = await getLocale();
+  const content = getIntlayer("home-page-metadata", locale);
+
+  return {
+    title: content.title,
+    description: content.description,
+  };
+};
+```
+
+## Więcej szczegółów: Gotowy na pełny przewodnik?
+
+Szczegółową instrukcję krok po kroku z obsługą middleware, SSG (`generateStaticParams`) i komponentów serwerowych znajdziesz w dokumentacji:
+
+👉 **[Kompletny przewodnik po tłumaczeniu Next.js 16 z Intlayer](https://github.com/aymericzip/intlayer/blob/main/docs/docs/pl/intlayer_with_nextjs_16.md)**
+
+## Najczęściej zadawane pytania (FAQ)
+
+<FAQ>
+
+<Question title="Czy mogę przetłumaczyć Next.js bez przenoszenia plików do app/[locale]?">
+
+Tak. Intlayer obsługuje tryb `search-params` i ciasteczka, zachowując nienaruszoną strukturę katalogów.
+
+</Question>
+<Question title="Czy muszę ręcznie przepisywać wszystkie teksty w kodzie?">
+
+Nie. Komenda `npx intlayer extract` lub kompilator Intlayer wyodrębniają teksty automatycznie.
+
+</Question>
+<Question title="Dlaczego paczka Intlayer jest mniejsza niż w next-intl?">
+
+Dzięki deklaracji słowników per-komponent i makrom optymalizacyjnym eliminującym nieużywane teksty.
+
+</Question>
+<Question title="Czy mogę automatycznie przetłumaczyć aplikację przy użyciu AI?">
+
+Tak, komenda `npx intlayer fill` łączy się z modelami OpenAI, Anthropic czy DeepSeek.
+
+</Question>
+</FAQ>

package/blog/pl/transform_existing_vite_react_app_using_compiler.md

@@ -0,0 +1,353 @@
+---
+createdAt: 2024-03-07
+updatedAt: 2026-09-06
+title: "Jak uczynić istniejącą aplikację Vite i React wielojęzyczną (i18n) po fakcie (Przewodnik i18n 2026)"
+description: "Przewodnik 2026: jak dodać wielojęzyczność (i18n) do istniejącej aplikacji Vite i React bez uciążliwego refaktoryzowania. Poznaj automatyczną ekstrakcję, tłumaczenia AI i optymalizację paczki z Intlayer."
+keywords:
+  - Vite i18n
+  - React i18n
+  - Internacjonalizacja
+  - Przetłumacz istniejącą aplikację Vite
+  - Przetłumacz istniejącą aplikację React
+  - Intlayer
+  - Wielojęzyczność
+  - Kompilator
+  - Tłumaczenie AI
+  - SEO
+slugs:
+  - blog
+  - transform-existing-react-app-into-multilingual-app
+applicationTemplate: https://github.com/aymericzip/intlayer-vite-react-template
+applicationShowcase: https://intlayer-vite-react-template.vercel.app
+youtubeVideo: https://www.youtube.com/watch?v=dS9L7uJeak4
+history:
+  - version: 8.9.0
+    date: 2026-05-04
+    changes: "Update Solid useIntlayer API usage to direct property access"
+  - version: 8.2.0
+    date: 2026-03-09
+    changes: "Update compiler options, add FilePathPattern support"
+  - version: 8.1.6
+    date: 2026-02-23
+    changes: "Initial release"
+author: aymericzip
+---
+
+# Jak uczynić istniejącą aplikację Vite i React wielojęzyczną (i18n) po fakcie (Przewodnik i18n 2026)
+
+Dodanie internacjonalizacji (i18n) do projektu Vite i React od samego początku jest stosunkowo proste. Ale co zrobić, gdy masz już dojrzałą aplikację wdrożoną w jednym języku i musisz uczynić ją wielojęzyczną **po fakcie**?
+
+Z tradycyjnymi bibliotekami, takimi jak `react-i18next` czy `react-intl`, proces ten bywa koszmarem:
+
+- Ręczne wyszukiwanie zahardkodowanych tekstów w setkach plików JSX i TSX.
+- Tworzenie zagnieżdżonych plików JSON i wymyślanie sztucznych kluczy (`components.header.title` itp.).
+- Zastępowanie tekstów w kodzie skomplikowanymi wywołaniami hooków (`t('...')`).
+- Przebudowa routingu po stronie klienta, zarządzania stanem oraz logiki przełączania języków.
+
+W 2026 roku nie musisz przepisywać bazy kodu. Z **Intlayer** wdrożysz internacjonalizację w kilka minut dzięki automatycznej ekstrakcji, tłumaczeniom AI i bezproblemowej integracji z Vite.
+
+> Szukasz pełnego przewodnika technicznego krok po kroku dla Vite i React? Sprawdź naszą dokumentację: [Tłumaczenie Vite i React z Intlayer](https://github.com/aymericzip/intlayer/blob/main/docs/docs/pl/intlayer_with_vite+react.md).
+
+## Spis treści
+
+<TOC/>
+
+## Dylemat retrofittingu: Dlaczego tłumaczenie istniejącej aplikacji bywa trudne
+
+Podczas internacjonalizacji istniejącej aplikacji Vite i React programiści napotykają trzy główne przeszkody:
+
+1. **Zakłócenie bazy kodu**: Ręczne wyciąganie tekstów do słowników JSON wymaga edycji niemal każdego komponentu. Generuje to ogromne diffy w gicie, konflikty scalania i ryzyko regresji wizualnych.
+2. **Narzut związany z kluczami**: Wymyślanie kluczy typu `dashboard.hero.ctaButton` dla każdego fragmentu tekstu spowalnia pracę i obciąża pamięć przy każdej modyfikacji interfejsu.
+3. **Żmudna praca translatorska**: Po wyodrębnieniu tekstów ich tłumaczenie na 5, 10 lub 20 języków wiąże się z monotonnym kopiowaniem i wklejaniem lub kosztownymi usługami zewnętrznymi.
+
+Intlayer rozwiązuje te problemy na poziomie architektury za pomocą **ekstrakcji wspomaganej kompilatorem**, **deklaratywnych słowników na poziomie komponentów** oraz **natywnej integracji z Vite**.
+
+## Automatyczna ekstrakcja treści (bez ręcznego szukania tekstów)
+
+Zamiast ręcznie wyciągać każdy łańcuch znaków z JSX, Intlayer oferuje dwie wygodne ścieżki:
+
+### Opcja A: Ekstraktor CLI (`npx intlayer extract`)
+
+Możesz uruchomić narzędzie do ekstrakcji Intlayer bezpośrednio w swojej bazie kodu:
+
+```bash packageManager="npm"
+npx intlayer extract
+```
+
+```bash packageManager="pnpm"
+pnpm dlx intlayer extract
+```
+
+```bash packageManager="yarn"
+yarn dlx intlayer extract
+```
+
+```bash packageManager="bun"
+bunx intlayer extract
+```
+
+To polecenie analizuje komponenty React, wykrywa teksty widoczne dla użytkownika i automatycznie tworzy pliki deklaracji zawartości (`.content.ts`) tuż obok poszczególnych komponentów. Logika pozostaje deklaratywna, czytelna i w pełni bezpieczna typologicznie.
+
+### Opcja B: Kompilator Intlayer (Ekstrakcja w trakcie budowania)
+
+Gdy kompilator Intlayer jest włączony w konfiguracji, możesz nadal pisać komponenty ze zwykłym tekstem w języku domyślnym. W trakcie budowania kompilator automatycznie ekstrahuje teksty i wstrzykuje zlokalizowaną zawartość:
+
+```tsx fileName="src/App.tsx"
+// Pisz normalny kod React. Kompilator automatycznie wyodrębni tekst
+export default function App() {
+  return (
+    <section>
+      <h1>Witamy na naszej platformie</h1>
+      <p>Zacznij odkrywać nowoczesne funkcje już dziś.</p>
+    </section>
+  );
+}
+```
+
+W tle Intlayer tworzy słownik i łączy komponent ze zlokalizowaną treścią, całkowicie eliminując etap ręcznego refaktoryzowania.
+
+W tym przypadku wygenerowany zostanie plik deklaracji `src/App.content.ts` o następującej strukturze:
+
+```typescript fileName="src/App.content.ts"
+import { Dictionary } from "intlayer";
+
+const content = {
+  key: "app",
+  content: {
+    witamyNaNaszejPlatformie: t({
+      pl: "Witamy na naszej platformie",
+    }),
+    zacznijOdkrywacNowoczesneFunkcje: t({
+      pl: "Zacznij odkrywać nowoczesne funkcje już dziś.",
+    }),
+  },
+};
+
+export default content;
+```
+
+## Tłumaczenia oparte na sztucznej inteligencji z Twoim ulubionym modelem LLM
+
+Po wyodrębnieniu treści tłumaczenie na dziesiątki języków nie powinno zajmować dni. Intlayer zawiera wbudowane narzędzie CLI do tłumaczeń AI, które łączy się bezpośrednio z OpenAI, Anthropic, DeepSeek lub Mistral przy użyciu Twoich własnych kluczy API:
+
+```bash packageManager="npm"
+npx intlayer fill
+```
+
+```bash packageManager="pnpm"
+pnpm dlx intlayer fill
+```
+
+```bash packageManager="yarn"
+yarn dlx intlayer fill
+```
+
+```bash packageManager="bun"
+bunx intlayer fill
+```
+
+Skonfiguruj obsługiwane języki i dostawcę AI w pliku `intlayer.config.ts`:
+
+```typescript fileName="intlayer.config.ts"
+import { Locales, type IntlayerConfig } from "intlayer";
+
+const config: IntlayerConfig = {
+  internationalization: {
+    locales: [Locales.ENGLISH, Locales.FRENCH, Locales.SPANISH, Locales.POLISH],
+    defaultLocale: Locales.POLISH,
+  },
+  ai: {
+    provider: "openai",
+    model: "gpt-4o-mini",
+    apiKey: process.env.OPENAI_API_KEY,
+    applicationContext:
+      "Nowoczesna aplikacja SaaS i panel zarządzania stworzone przy użyciu Vite i React",
+  },
+};
+
+export default config;
+```
+
+Uruchomienie `npx intlayer fill` wypełnia pliki deklaracji wysokiej jakości tłumaczeniami dla wszystkich skonfigurowanych języków:
+
+```typescript fileName="src/App.content.ts"
+import { Dictionary } from "intlayer";
+
+const content = {
+  key: "app",
+  content: {
+    witamyNaNaszejPlatformie: t({
+      pl: "Witamy na naszej platformie",
+      en: "Welcome to our platform",
+      fr: "Bienvenue sur notre plateforme",
+      es: "Bienvenido a nuestra plataforma",
+    }),
+    zacznijOdkrywacNowoczesneFunkcje: t({
+      pl: "Zacznij odkrywać nowoczesne funkcje już dziś.",
+      en: "Start exploring our modern features today.",
+      fr: "Découvrez nos fonctionnalités modernes dès aujourd'hui.",
+      es: "Comience a explorar nuestras funciones modernas hoy.",
+    }),
+  },
+};
+
+export default content;
+```
+
+Ponieważ Intlayer przekazuje `applicationContext` do modelu językowego, generowane tłumaczenia zachowują kontekst techniczny, ton marki i niuanse gramatyczne znacznie lepiej niż tradycyjne narzędzia.
+
+Aby upewnić się przed wdrożeniem, że żaden tekst nie został pominięty:
+
+```bash
+npx intlayer test
+```
+
+## Integracja z Vite i konfiguracja Providera
+
+Integracja Intlayer z Vite sprowadza się do dodania wtyczki w `vite.config.ts` i otoczenia głównego komponentu za pomocą `IntlayerProvider`:
+
+```typescript fileName="vite.config.ts"
+import { defineConfig } from "vite";
+import react from "@vitejs/plugin-react-swc";
+import { intlayer } from "vite-intlayer";
+
+export default defineConfig({
+  plugins: [react(), intlayer()],
+});
+```
+
+> Od wersji Intlayer v9 kompilator jest bezpośrednio zintegrowany z wtyczką `intlayer()` i uruchamia się automatycznie po skonfigurowaniu `compiler.enabled` w `intlayer.config.ts`.
+
+Otocz aplikację komponentem `IntlayerProvider`:
+
+```tsx fileName="src/App.tsx"
+import { FC } from "react";
+import { IntlayerProvider } from "react-intlayer";
+import { MainContent } from "./MainContent";
+
+const App: FC = () => {
+  return (
+    <IntlayerProvider>
+      <MainContent />
+    </IntlayerProvider>
+  );
+};
+
+export default App;
+```
+
+### Dynamiczna zmiana języka
+
+Zmieniaj język w dowolnym miejscu aplikacji za pomocą hooka `useLocale`:
+
+```tsx fileName="src/components/LocaleSwitcher.tsx"
+import { FC } from "react";
+import { Locales } from "intlayer";
+import { useLocale } from "react-intlayer";
+
+export const LocaleSwitcher: FC = () => {
+  const { locale, setLocale, availableLocales } = useLocale();
+
+  return (
+    <select
+      value={locale}
+      onChange={(e) => setLocale(e.target.value as Locales)}
+    >
+      {availableLocales.map((loc) => (
+        <option key={loc} value={loc}>
+          {loc}
+        </option>
+      ))}
+    </select>
+  );
+};
+```
+
+## Wielojęzyczne SEO (Sitemap i Robots.txt)
+
+Intlayer zawiera narzędzia formatujące, takie jak `generateSitemap` i `getMultilingualUrls`, które generują pliki `sitemap.xml` i `robots.txt` dla statycznych wdrożeń w Vite:
+
+```javascript fileName="generate-seo.mjs"
+import fs from "fs";
+import path from "path";
+import { fileURLToPath } from "url";
+import { generateSitemap, getMultilingualUrls } from "intlayer";
+
+const __dirname = path.dirname(fileURLToPath(import.meta.url));
+const SITE_URL = (process.env.SITE_URL || "https://example.com").replace(
+  /\/$/,
+  ""
+);
+
+const pathList = [
+  { path: "/", changefreq: "daily", priority: 1.0 },
+  { path: "/about", changefreq: "monthly", priority: 0.7 },
+];
+
+const sitemapXml = generateSitemap(pathList, { siteUrl: SITE_URL });
+fs.writeFileSync(path.join(__dirname, "public", "sitemap.xml"), sitemapXml);
+
+const getAllMultilingualUrls = (urls) =>
+  urls.flatMap((url) => Object.values(getMultilingualUrls(url)));
+
+const disallowedPaths = getAllMultilingualUrls(["/admin", "/private"]);
+
+const robotsTxt = [
+  "User-agent: *",
+  "Allow: /",
+  ...disallowedPaths.map((path) => `Disallow: ${path}`),
+  "",
+  `Sitemap: ${SITE_URL}/sitemap.xml`,
+].join("\n");
+
+fs.writeFileSync(path.join(__dirname, "public", "robots.txt"), robotsTxt);
+console.log("Pliki SEO zostały pomyślnie wygenerowane.");
+```
+
+Dodaj skrypt `prebuild` w `package.json`, aby uruchamiał się przed `vite build`:
+
+```json fileName="package.json"
+{
+  "scripts": {
+    "dev": "vite",
+    "prebuild": "node generate-seo.mjs",
+    "build": "vite build",
+    "preview": "vite preview"
+  }
+}
+```
+
+## Dowiedz się więcej: Gotowy na pełną konfigurację krok po kroku?
+
+Ten przewodnik przedstawił koncepcyjne podejście do wdrożenia internacjonalizacji w istniejącej aplikacji Vite i React w 2026 roku bez konieczności kosztownego przepisywania kodu.
+
+Jeśli chcesz skonfigurować wszystkie szczegóły (w tym pełne wsparcie TypeScript, dynamiczne słowniki i edytor wizualny), przejdź do naszej kompletnej dokumentacji:
+
+👉 **[Kompletny przewodnik po tłumaczeniu Vite i React z Intlayer](https://github.com/aymericzip/intlayer/blob/main/docs/docs/pl/intlayer_with_vite+react.md)**
+
+## Często zadawane pytania (FAQ)
+
+<FAQ>
+
+<Question title="Czy mogę przetłumaczyć aplikację Vite i React bez ręcznego zmieniania wszystkich tekstów?">
+
+Tak. Możesz użyć `npx intlayer extract` do automatycznego wykrycia i wyodrębnienia tekstów do plików deklaracji, lub użyć kompilatora Intlayer, który przekształca komponenty w trakcie budowania, podczas gdy Ty piszesz standardowy kod JSX.
+
+</Question>
+<Question title="Jak Intlayer zmniejsza rozmiar paczki w Vite w porównaniu z react-i18next lub react-intl?">
+
+Intlayer stosuje definicje słowników na poziomie pojedynczych komponentów oraz optymalizację makrami podczas budowania. Paczki otrzymują tylko te teksty, które są faktycznie renderowane na danej stronie, zamiast ładować obszerne pliki JSON. Słowniki dynamiczne pozwalają dodatkowo ładować języki na żądanie.
+
+</Question>
+<Question title="Czy mogę użyć AI do przetłumaczenia moich istniejących komponentów na wiele języków?">
+
+Tak. CLI Intlayer zawiera polecenie `npx intlayer fill`, które łączy się z wybranym dostawcą AI (OpenAI, Anthropic, Mistral, DeepSeek), aby automatycznie generować kontekstowe tłumaczenia dla wszystkich skonfigurowanych języków.
+
+</Question>
+<Question title="Czy mogę przejść z react-i18next lub react-intl bez przepisywania komponentów?">
+
+Tak. Intlayer zapewnia adaptery zgodności dla `react-i18next` i `react-intl`, a także wtyczki synchronizujące istniejące pliki JSON z tłumaczeniami (`sync-json`).
+
+</Question>
+
+</FAQ>