Creation:2024-08-13Last update:2026-01-26

    Implementacja niestandardowego przepisywania URL

    Intlayer obsługuje niestandardowe przepisywanie adresów URL, pozwalając zdefiniować ścieżki specyficzne dla danej lokalizacji, które różnią się od standardowej struktury /locale/path. Umożliwia to używanie adresów URL takich jak /about dla angielskiego i /a-propos dla francuskiego, przy zachowaniu kanonicznej logiki wewnętrznej aplikacji.

    Konfiguracja

    Niestandardowe rewrites konfigurujesz w sekcji routing w pliku intlayer.config.ts, używając formaterów specyficznych dla danego frameworka. Te formatery dostarczają poprawnej składni dla wybranego routera.

    intlayer.config.ts
    import { Locales, type IntlayerConfig } from "intlayer";import { nextjsRewrite } from "intlayer/routing";const config: IntlayerConfig = {  // ...  routing: {    mode: "prefix-no-default",    rewrite: nextjsRewrite({      "/[locale]/about": {        fr: "/[locale]/a-propos",        es: "/[locale]/acerca-de",      },      "/[locale]/products/[id]": {        fr: "/[locale]/produits/[id]",        es: "/[locale]/productos/[id]",      },    }),  },};export default config;

    Dostępne formattery

    Intlayer udostępnia formattery dla wszystkich popularnych frameworków:

    • nextjsRewrite: Dla Next.js App Router. Obsługuje [slug], [...slug] (1+), oraz [[...slug]] (0+).
    • svelteKitRewrite: Dla SvelteKit. Obsługuje [slug], [...path] (0+), oraz [[optional]] (0-1).
    • reactRouterRewrite: Dla React Router. Obsługuje :slug i * (0+).
    • vueRouterRewrite: Dla Vue Router 4. Obsługuje :slug, :slug? (0-1), :slug* (0+), oraz :slug+ (1+).
    • solidRouterRewrite: Dla Solid Router. Obsługuje :slug i *slug (0+).
    • tanstackRouterRewrite: Dla TanStack Router. Obsługuje $slug i * (0+).
    • nuxtRewrite: Dla Nuxt 3. Obsługuje [slug] i [...slug] (0+).
    • viteRewrite: Ogólny formatter dla projektów opartych na Vite. Normalizuje składnię dla proxy Vite.

    Zaawansowane wzorce

    Intlayer wewnętrznie normalizuje te wzorce do zunifikowanej składni, co pozwala na zaawansowane dopasowywanie i generowanie ścieżek:

    • Opcjonalne segmenty: [[optional]] (SvelteKit) lub :slug? (Vue/React) są obsługiwane.
    • Catch-all (zero lub więcej): [[...slug]] (Next.js), [...path] (SvelteKit/Nuxt) lub * (React/TanStack) pozwalają na dopasowanie wielu segmentów.
    • Mandatory Catch-all (jeden lub więcej): [...slug] (Next.js) lub :slug+ (Vue) zapewniają obecność przynajmniej jednego segmentu.

    Korekta URL po stronie klienta: useRewriteURL

    Aby zapewnić, że pasek adresu przeglądarki zawsze odzwierciedla „ładny” zlokalizowany URL, Intlayer udostępnia hook useRewriteURL. Hook ten dyskretnie aktualizuje URL za pomocą window.history.replaceState, gdy użytkownik trafia na kanoniczną ścieżkę.

    Użycie w frameworkach

    tsx
    'use client';import { useRewriteURL } from "next-intlayer";const MyLayout = ({ children }) => {  useRewriteURL(); // Automatycznie koryguje '/fr/about' na '/fr/a-propos'  return <>{children}</>;};

    Integracja routera i proxy

    Proxy serwerowe Intlayer (Vite i Next.js) automatycznie obsługują niestandardowe przepisywania (rewrites), aby zapewnić spójność SEO.

    1. Wewnętrzne przepisywania: Gdy użytkownik odwiedza /fr/a-propos, proxy wewnętrznie mapuje to na /fr/about, aby Twój framework dopasował właściwą trasę.
    2. Autorytatywne przekierowania: Jeśli użytkownik ręcznie wpisze /fr/about, proxy zwraca przekierowanie 301/302 do /fr/a-propos, zapewniając, że wyszukiwarki indeksują tylko jedną wersję strony.

    Integracja z Next.js

    Integracja z Next.js jest w pełni obsługiwana przez middleware intlayerProxy.

    middleware.ts
    import { intlayerProxy } from "next-intlayer/middleware";import { NextRequest } from "next/server";export function middleware(request: NextRequest) {  return intlayerProxy(request);}

    Integracja z Vite

    Dla SolidJS, Vue i Svelte wtyczka Vite intlayerProxy zarządza przepisywaniami (rewrites) podczas developmentu.

    vite.config.ts
    import { defineConfig } from "vite";import { intlayerProxy } from "vite-intlayer";export default defineConfig({  plugins: [intlayerProxy()],});

    Kluczowe funkcje

    1. Przepisywania w wielu kontekstach

    Każdy formatter generuje RewriteObject zawierający wyspecjalizowane reguły dla różnych odbiorców:

    • url: Optymalizowany pod generowanie URL po stronie klienta (usuwa segmenty lokalizacji).
    • nextjs: Zachowuje [locale] dla middleware Next.js.
    • vite: Zachowuje :locale dla proxy Vite.

    2. Automatyczna normalizacja wzorców

    Intlayer wewnętrznie normalizuje wszystkie składnie wzorców (np. konwertując [param] na :param), dzięki czemu dopasowywanie pozostaje spójne niezależnie od frameworka źródłowego.

    3. Autorytatywne adresy URL (SEO)

    Wymuszając przekierowania ze ścieżek kanonicznych do przyjaznych aliasów, Intlayer zapobiega problemom z duplikacją treści i poprawia wykrywalność serwisu.

    Podstawowe narzędzia

    • getLocalizedUrl(url, locale): Generuje zlokalizowany URL z uwzględnieniem rewrite rules.
    • getCanonicalPath(path, locale): Rozwiązuje zlokalizowany URL z powrotem do wewnętrznej ścieżki kanonicznej.
    • getRewritePath(pathname, locale): Wykrywa, czy pathname wymaga poprawy do bardziej przyjaznego zlokalizowanego aliasu.
    Dlaczego Intlayer?