¿Cómo configuro el enrutamiento basado en dominios con Intlayer en lugar de rutas /[locale]/?

    Respuesta corta

    El enrutamiento basado en dominios es más sencillo que el enrutamiento basado en rutas (example.com/[locale]/) porque puedes omitir todo el middleware y la configuración de enrutamiento. Solo despliega tu aplicación en cada dominio de idioma y configura una variable de entorno por dominio.

    Paso a paso

    1. Despliega una vez por dominio (example.com, exemple.fr, ejemplo.es, …).
    2. Para cada despliegue, configura LOCALE (y las variables de entorno habituales de Intlayer) al idioma que ese dominio debe servir.
    3. Referencia esa variable como defaultLocale en tu archivo intlayer.config.[ts|js].
    ts
    import { Locales, type IntlayerConfig } from "intlayer";const config: IntlayerConfig = {  internationalization: {    locales: [Locales.ENGLISH, Locales.FRENCH, Locales.SPANISH],    defaultLocale: process.env.LOCALE, // 👈 el dominio decide el idioma  },  // ... resto de tu configuración};export default config;

    Eso es todo-funciona igual para Next.js, Vite + React, Vite + Vue, etc.

    ¿Qué pasa si todos los dominios apuntan al mismo despliegue?

    Si todos los dominios apuntan al mismo paquete de la aplicación, necesitarás detectar el host en tiempo de ejecución y pasar el idioma manualmente a través del proveedor.

    Para Next.js

    tsx
    // src/IntlayerProvider.tsximport {  IntlayerClientProvider,  type IntlayerClientProviderProps,} from "next-intlayer";import { IntlayerServerProvider } from "next-intlayer/server";import type { FC } from "react";export const IntlayerProvider: FC<IntlayerClientProviderProps> = ({  children,  locale,}) => {  const resolvedLocale = locale ?? getLocaleFromHostname(); // 👈 obtener el idioma desde el nombre del host si no está definido  return (    <IntlayerServerProvider locale={resolvedLocale}>      <IntlayerClientProvider locale={resolvedLocale}>        {children}      </IntlayerClientProvider>    </IntlayerServerProvider>  );};

    Para Vue

    ts
    import { createApp } from "vue";import { installIntlayer } from "vue-intlayer";import App from "./App.vue";import { router } from "./routes";const app = createApp(App);app.use(router);installIntlayer(app, getLocaleFromHostname()); // 👈 reemplaza con tu propia lógica de búsquedaapp.mount("#app");

    Reemplaza getLocaleFromHostname() con tu propia lógica de búsqueda.

    Actualiza tu selector de idioma

    Cuando usas enrutamiento basado en dominios, cambiar de idioma significa navegar a otro dominio:

    ts
    const { locale } = useLocale();function changeLanguage(target: Locale) {  window.location.href = domainForLocale[target];}

    Beneficios del enrutamiento basado en dominios

    1. Configuración más sencilla: No es necesario configurar intlayerProxy, generateStaticParams, react-router o vue-router
    2. Mejor SEO: Cada idioma tiene su propio dominio
    3. URLs más limpias: No hay prefijo de idioma en la ruta
    4. Mantenimiento más sencillo: Cada despliegue de idioma es independiente