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

    Реалізація користувацьких правил переписування URL

    Intlayer підтримує користувацькі правила переписування URL, що дозволяють визначати локалезовані шляхи, які відрізняються від стандартної структури /locale/path. Це дає змогу використовувати такі URL, як /about для англійської та /a-propos для французької, водночас зберігаючи канонічну внутрішню логіку застосунку.

    Конфігурація

    Користувацькі перенаписування налаштовуються в розділі routing файлу intlayer.config.ts з використанням форматерів, специфічних для фреймворку. Ці форматери забезпечують правильний синтаксис для вашого обраного роутера.

    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;

    Доступні форматери

    Intlayer надає форматери для всіх популярних фреймворків:

    • nextjsRewrite: Для Next.js App Router. Підтримує [slug], [...slug] (1+), та [[...slug]] (0+).
    • svelteKitRewrite: Для SvelteKit. Підтримує [slug], [...path] (0+), та [[optional]] (0-1).
    • reactRouterRewrite: Для React Router. Підтримує :slug та * (0+).
    • vueRouterRewrite: Для Vue Router 4. Підтримує :slug, :slug? (0-1), :slug* (0+), та :slug+ (1+).
    • solidRouterRewrite: Для Solid Router. Підтримує :slug та *slug (0+).
    • tanstackRouterRewrite: Для TanStack Router. Підтримує $slug та * (0+).
    • nuxtRewrite: Для Nuxt 3. Підтримує [slug] та [...slug] (0+).
    • viteRewrite: Універсальний форматер для будь-якого проєкту на базі Vite. Нормалізує синтаксис для Vite proxy.

    Розширені шаблони

    Intlayer внутрішньо нормалізує ці шаблони до уніфікованого синтаксису, що дозволяє здійснювати складне зіставлення й генерацію шляхів:

    • Необов'язкові сегменти: [[optional]] (SvelteKit) або :slug? (Vue/React) підтримуються.
    • Catch-all (нуль або більше): [[...slug]] (Next.js), [...path] (SvelteKit/Nuxt), або * (React/TanStack) дозволяють відповідати кільком сегментам.
    • Обов'язковий catch-all (один або більше): [...slug] (Next.js) або :slug+ (Vue) забезпечують наявність принаймні одного сегмента.

    Корекція URL на стороні клієнта: useRewriteURL

    Щоб адресний рядок браузера завжди відображав "pretty" локалізований URL, Intlayer надає хук useRewriteURL. Цей хук непомітно оновлює URL за допомогою window.history.replaceState, коли користувач потрапляє на канонічний шлях.

    Використання у фреймворках

    tsx
    'use client';import { useRewriteURL } from "next-intlayer";const MyLayout = ({ children }) => {  useRewriteURL(); // Автоматично виправляє /fr/about на /fr/a-propos  return <>{children}</>;};

    Інтеграція маршрутизатора та проксі

    Серверні проксі Intlayer (Vite і Next.js) автоматично обробляють кастомні переписування, щоб забезпечити узгодженість для SEO.

    1. Внутрішні переписування: Коли користувач заходить на /fr/a-propos, проксі внутрішньо відображає це на /fr/about, щоб ваш фреймворк відповідав правильному маршруту.
    2. Авторитетні редиректи: Якщо користувач вручну вводить /fr/about, проксі відправляє 301/302 редирект на /fr/a-propos, гарантуючи, що пошукові системи індексують лише одну версію сторінки.

    Інтеграція з Next.js

    Інтеграція з Next.js повністю здійснюється через middleware intlayerProxy.

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

    Інтеграція з Vite

    Для SolidJS, Vue та Svelte Vite-плагін intlayerProxy керує перезаписами під час розробки.

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

    Ключові можливості

    1. Багатоконтекстні перезаписи

    Кожен форматер генерує RewriteObject, що містить спеціалізовані правила для різних споживачів:

    • url: Оптимізовано для генерації URL на боці клієнта (видаляє сегменти локалі).
    • nextjs: Зберігає [locale] для middleware Next.js.
    • vite: Зберігає :locale для проксі Vite.

    2. Автоматична нормалізація шаблонів

    Intlayer внутрішньо нормалізує всі синтаксиси шаблонів (наприклад, перетворює [param] на :param), щоб зіставлення залишалося послідовним незалежно від вихідного фреймворку.

    3. SEO авторитетні URL-адреси

    Забезпечуючи перенаправлення з канонічних шляхів на більш привабливі аліаси, Intlayer запобігає проблемам дубльованого контенту та покращує знаходжуваність сайту.

    Основні утиліти

    • getLocalizedUrl(url, locale): Генерує локалізований URL з урахуванням правил перезапису.
    • getCanonicalPath(path, locale): Відновлює локалізований URL до його внутрішнього канонічного шляху.
    • getRewritePath(pathname, locale): Визначає, чи потрібно виправити шлях (pathname) до його більш привабливого локалізованого аліаса.
    Чому Intlayer?