Как настроить маршрутизацию на основе домена с Intlayer вместо путей /[locale]/?

    Краткий ответ

    Маршрутизация на основе домена проще, чем маршрутизация на основе пути (example.com/[locale]/), потому что вы можете пропустить всю настройку middleware и маршрутизации. Просто разверните ваше приложение на каждом языковом домене и установите одну переменную окружения для каждого домена.

    Пошагово

    1. Разверните приложение для каждого домена (example.com, exemple.fr, ejemplo.es, …).
    2. Для каждого развертывания установите LOCALE (и обычные переменные окружения Intlayer) в локаль, которую должен обслуживать этот домен.
    3. Ссылайтесь на эту переменную как на defaultLocale в вашем файле 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, // 👈 домен определяет локаль
  },
  // ... остальная часть вашей конфигурации
};

export default config;

    Вот и всё - работает одинаково для Next.js, Vite + React, Vite + Vue и т.д.

    Что если все домены указывают на одно и то же развертывание?

    Если все домены указывают на один и тот же пакет приложения, вам нужно будет определить хост во время выполнения и вручную передать локаль через провайдер.

    Для Next.js

    tsx
    // src/IntlayerProvider.tsx
import {
  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(); // определяем локаль, если не передана
  return (
    <IntlayerServerProvider locale={resolvedLocale}>
      <IntlayerClientProvider locale={resolvedLocale}>
        {children}
      </IntlayerClientProvider>
    </IntlayerServerProvider>
  );
};

    Для 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()); // устанавливаем локаль, определённую по имени хоста
app.mount("#app");

    Замените getLocaleFromHostname() на вашу собственную логику определения локали.

    Обновите переключатель локали

    При использовании маршрутизации на основе доменов смена языка означает переход на другой домен:

    ts
    const { locale } = useLocale();

function changeLanguage(target: Locale) {
  window.location.href = domainForLocale[target]; // перенаправление на домен, соответствующий выбранной локали
}

    Преимущества маршрутизации на основе доменов

    1. Проще конфигурация: Нет необходимости настраивать intlayerProxy, generateStaticParams, react-router или vue-router
    2. Лучшее SEO: Для каждого языка используется собственный домен
    3. Чище URL: В пути отсутствует префикс локали
    4. Проще в обслуживании: Развёртывание для каждого языка независимо