Jak skonfigurować routing oparty na domenach w Intlayer zamiast ścieżek /[locale]/?

Krótka odpowiedź

Routing oparty na domenach jest prostszy niż routing oparty na ścieżkach (example.com/[locale]/), ponieważ można pominąć całą konfigurację middleware i routingu. Wystarczy wdrożyć aplikację na każdej domenie językowej i ustawić jedną zmienną środowiskową na domenę.

Krok po kroku

Wdroż aplikację raz na domenę (example.com, exemple.fr, ejemplo.es, …).
Dla każdego wdrożenia ustaw LOCALE (oraz standardowe zmienne środowiskowe Intlayer) na lokalizację, którą dana domena ma obsługiwać.
Odwołaj się do tej zmiennej jako defaultLocale w swoim pliku 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, // 👈 domena decyduje o lokalizacji  },  // ... reszta twojej konfiguracji};export default config;

import { Locales, type IntlayerConfig } from "intlayer";const config: IntlayerConfig = {  internationalization: {    locales: [Locales.ENGLISH, Locales.FRENCH, Locales.SPANISH],    defaultLocale: process.env.LOCALE, // 👈 domena decyduje o lokalizacji  },  // ... reszta twojej konfiguracji};export default config;

To wszystko — działa tak samo dla Next.js, Vite + React, Vite + Vue itd.

Co jeśli każda domena trafia do tego samego wdrożenia?

Jeśli wszystkie domeny wskazują na ten sam pakiet aplikacji, musisz wykryć hosta w czasie wykonywania i ręcznie przekazać lokalizację przez providera.

Dla 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(); // 👈 rozwiąż lokalizację na podstawie hosta  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(); // 👈 rozwiąż lokalizację na podstawie hosta  return (    <IntlayerServerProvider locale={resolvedLocale}>      <IntlayerClientProvider locale={resolvedLocale}>        {children}      </IntlayerClientProvider>    </IntlayerServerProvider>  );};

Dla 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()); // 👈 zainstaluj Intlayer z lokalizacją na podstawie hostaapp.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()); // 👈 zainstaluj Intlayer z lokalizacją na podstawie hostaapp.mount("#app");

Zamień getLocaleFromHostname() na własną logikę wyszukiwania.

Zaktualizuj swój przełącznik lokalizacji

Przy routingu opartym na domenach, zmiana języka oznacza przejście na inną domenę:

const { locale } = useLocale();function changeLanguage(target: Locale) {  window.location.href = domainForLocale[target]; // 👈 przekieruj do domeny odpowiadającej wybranej lokalizacji}

const { locale } = useLocale();function changeLanguage(target: Locale) {  window.location.href = domainForLocale[target]; // 👈 przekieruj do domeny odpowiadającej wybranej lokalizacji}

Zalety routingu opartego na domenach

Prostsza konfiguracja: Nie ma potrzeby konfigurowania intlayerProxy, generateStaticParams, react-router ani vue-router
Lepsze SEO: Każdy język ma własną domenę
Czystsze adresy URL: Brak prefiksu lokalizacji w ścieżce
Łatwiejsza konserwacja: Każde wdrożenie języka jest niezależne