Come configurare il routing basato sul dominio con Intlayer invece dei percorsi /[locale]/?

Risposta breve

Il routing basato sul dominio è più semplice rispetto al routing basato sul percorso (example.com/[locale]/) perché puoi evitare tutta la configurazione di middleware e routing. Basta distribuire la tua app su ogni dominio linguistico e impostare una variabile d'ambiente per ogni dominio.

Passo dopo passo

Distribuisci una volta per dominio (example.com, exemple.fr, ejemplo.es, …).
Per ogni distribuzione, imposta LOCALE (e le solite variabili d'ambiente di Intlayer) sulla lingua che quel dominio deve servire.
Riferisciti a quella variabile come defaultLocale nel tuo file 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, // 👈 il dominio decide la lingua  },  // ... il resto della tua configurazione};export default config;

import { Locales, type IntlayerConfig } from "intlayer";const config: IntlayerConfig = {  internationalization: {    locales: [Locales.ENGLISH, Locales.FRENCH, Locales.SPANISH],    defaultLocale: process.env.LOCALE, // 👈 il dominio decide la lingua  },  // ... il resto della tua configurazione};export default config;

Questo è tutto-funziona allo stesso modo per Next.js, Vite + React, Vite + Vue, ecc.

Cosa succede se tutti i domini puntano alla stessa distribuzione?

Se tutti i domini puntano allo stesso bundle dell'applicazione, sarà necessario rilevare l'host a runtime e passare manualmente la lingua tramite il provider.

Per 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(); // 👈 risolvi la lingua dal nome host  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(); // 👈 risolvi la lingua dal nome host  return (    <IntlayerServerProvider locale={resolvedLocale}>      <IntlayerClientProvider locale={resolvedLocale}>        {children}      </IntlayerClientProvider>    </IntlayerServerProvider>  );};

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

Sostituisci getLocaleFromHostname() con la tua logica di ricerca personalizzata.

Aggiorna il tuo selettore di lingua

Quando si utilizza il routing basato sul dominio, cambiare lingua significa navigare verso un altro dominio:

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

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

Vantaggi del routing basato sul dominio

Configurazione più semplice: Non è necessario configurare intlayerProxy, generateStaticParams, react-router o vue-router
Migliore SEO: Ogni lingua ha il proprio dominio
URL più puliti: Nessun prefisso di localizzazione nel percorso
Manutenzione più semplice: Ogni distribuzione linguistica è indipendente