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

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

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

Пошагово

Разверните приложение для каждого домена (example.com, exemple.fr, ejemplo.es, …).
Для каждого развертывания установите LOCALE (и обычные переменные окружения Intlayer) в локаль, которую должен обслуживать этот домен.
Ссылайтесь на эту переменную как на defaultLocale в вашем файле intlayer.config.[ts|js].

import { Locales, type IntlayerConfig } from "intlayer";const config: IntlayerConfig = {  internationalization: {    locales: [Locales.ENGLISH, Locales.FRENCH, Locales.SPANISH],    defaultLocale: process.env.LOCALE, // 👈 домен определяет локаль  },  // ... остальная часть вашей конфигурации};export default config;

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

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

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

Для Vue

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");

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() на вашу собственную логику определения локали.

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

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

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

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

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

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