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

    Implementação de Reescritas de URL Personalizadas

    O Intlayer suporta reescritas de URL personalizadas, permitindo que você defina caminhos específicos por locale que diferem da estrutura padrão /locale/path. Isso possibilita URLs como /about para inglês e /a-propos para francês, mantendo a lógica interna da aplicação canônica.

    Configuração

    Regras de reescrita personalizadas são configuradas na seção routing do seu arquivo intlayer.config.ts usando formatadores específicos do framework. Esses formatadores fornecem a sintaxe correta para o router que você prefere.

    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;

    Formatadores Disponíveis

    Intlayer fornece formatadores para todos os frameworks populares:

    • nextjsRewrite: Para Next.js App Router. Suporta [slug], [...slug] (1+), e [[...slug]] (0+).
    • svelteKitRewrite: Para SvelteKit. Suporta [slug], [...path] (0+), e [[optional]] (0-1).
    • reactRouterRewrite: Para React Router. Suporta :slug e * (0+).
    • vueRouterRewrite: Para Vue Router 4. Suporta :slug, :slug? (0-1), :slug* (0+), e :slug+ (1+).
    • solidRouterRewrite: Para Solid Router. Suporta :slug e *slug (0+).
    • tanstackRouterRewrite: Para TanStack Router. Suporta $slug e * (0+).
    • nuxtRewrite: Para Nuxt 3. Suporta [slug] e [...slug] (0+).
    • viteRewrite: Formatador genérico para qualquer projeto baseado em Vite. Normaliza a sintaxe para o proxy do Vite.

    Padrões Avançados

    O Intlayer normaliza internamente esses padrões para uma sintaxe unificada, permitindo correspondência de caminhos e geração mais sofisticadas:

    • Segmentos Opcionais: [[optional]] (SvelteKit) ou :slug? (Vue/React) são suportados.
    • Catch-all (Zero ou mais): [[...slug]] (Next.js), [...path] (SvelteKit/Nuxt) ou * (React/TanStack) permitem corresponder múltiplos segmentos.
    • Catch-all Obrigatório (Um ou mais): [...slug] (Next.js) ou :slug+ (Vue) garantem que pelo menos um segmento esteja presente.

    Correção de URL no Lado do Cliente: useRewriteURL

    Para garantir que a barra de endereço do navegador reflita sempre a URL localizada "bonita", o Intlayer fornece o hook useRewriteURL. Este hook atualiza silenciosamente a URL usando window.history.replaceState quando um usuário acessa um caminho canônico.

    Uso em Frameworks

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

    Integração com o Router & Proxies

    Os proxies server-side do Intlayer (Vite & Next.js) tratam automaticamente reescritas personalizadas para garantir consistência de SEO.

    1. Reescritas Internas: Quando um utilizador visita /fr/a-propos, o proxy mapeia internamente para /fr/about para que o seu framework corresponda à rota correta.
    2. Redirecionamentos Autoritativos: Se um utilizador digitar manualmente /fr/about, o proxy emite um redirecionamento 301/302 para /fr/a-propos, garantindo que os motores de busca indexem apenas uma versão da página.

    Integração com Next.js

    A integração com Next.js é totalmente gerida através do middleware intlayerProxy.

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

    Integração com Vite

    Para SolidJS, Vue e Svelte, o plugin Vite intlayerProxy gerencia as reescritas durante o desenvolvimento.

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

    Principais Funcionalidades

    1. Reescritas Multi-Contexto

    Cada formatter gera um RewriteObject contendo regras especializadas para diferentes consumidores:

    • url: Otimizado para geração de URLs do lado do cliente (remove segmentos de locale).
    • nextjs: Preserva [locale] para o middleware do Next.js.
    • vite: Preserva :locale para os proxies do Vite.

    2. Normalização Automática de Padrões

    O Intlayer normaliza internamente todas as sintaxes de padrão (por exemplo, convertendo [param] para :param) para que o matching permaneça consistente independentemente do framework de origem.

    3. URLs canônicas de SEO

    Ao impor redirecionamentos de caminhos canônicos para aliases localizados mais apresentáveis, o Intlayer evita problemas de conteúdo duplicado e melhora a descoberta do site.

    Utilitários principais

    • getLocalizedUrl(url, locale): Gera uma URL localizada respeitando as regras de reescrita.
    • getCanonicalPath(path, locale): Resolve uma URL localizada de volta para o seu caminho canônico interno.
    • getRewritePath(pathname, locale): Detecta se um pathname precisa ser corrigido para o seu alias localizado mais amigável.
    Por que Intlayer?