Bagaimana cara mengonfigurasi routing berbasis domain dengan Intlayer daripada menggunakan path /[locale]/?

Jawaban singkat

Routing berbasis domain lebih sederhana daripada routing berbasis path (example.com/[locale]/) karena Anda dapat melewati semua konfigurasi middleware dan routing. Cukup deploy aplikasi Anda ke setiap domain bahasa dan atur satu variabel lingkungan per domain.

Langkah demi langkah

Deploy sekali untuk setiap domain (example.com, exemple.fr, ejemplo.es, …).
Untuk setiap deployment, atur LOCALE (dan variabel lingkungan Intlayer yang biasa) ke locale yang harus dilayani oleh domain tersebut.
Referensikan variabel tersebut sebagai defaultLocale di intlayer.config.[ts|js] Anda.

import { Locales, type IntlayerConfig } from "intlayer";const config: IntlayerConfig = {  internationalization: {    locales: [Locales.ENGLISH, Locales.FRENCH, Locales.SPANISH],    defaultLocale: process.env.LOCALE, // 👈 domain menentukan locale  },  // ... sisa konfigurasi Anda};export default config;

import { Locales, type IntlayerConfig } from "intlayer";const config: IntlayerConfig = {  internationalization: {    locales: [Locales.ENGLISH, Locales.FRENCH, Locales.SPANISH],    defaultLocale: process.env.LOCALE, // 👈 domain menentukan locale  },  // ... sisa konfigurasi Anda};export default config;

Itu saja—cara kerjanya sama untuk Next.js, Vite + React, Vite + Vue, dll.

Bagaimana jika setiap domain mengarah ke deployment yang sama?

Jika semua domain mengarah ke bundle aplikasi yang sama, Anda perlu mendeteksi host saat runtime dan mengoper locale secara manual melalui provider.

Untuk 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(); // 👈 dapatkan locale dari hostname jika locale tidak diberikan  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(); // 👈 dapatkan locale dari hostname jika locale tidak diberikan  return (    <IntlayerServerProvider locale={resolvedLocale}>      <IntlayerClientProvider locale={resolvedLocale}>        {children}      </IntlayerClientProvider>    </IntlayerServerProvider>  );};

Untuk 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()); // 👈 pasang Intlayer dengan locale dari hostnameapp.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()); // 👈 pasang Intlayer dengan locale dari hostnameapp.mount("#app");

Ganti getLocaleFromHostname() dengan logika pencarian Anda sendiri.

Perbarui pengalih locale Anda

Saat menggunakan routing berbasis domain, mengganti bahasa berarti menavigasi ke domain lain:

const { locale } = useLocale();function changeLanguage(target: Locale) {  window.location.href = domainForLocale[target]; // 👈 navigasi ke domain sesuai locale target}

const { locale } = useLocale();function changeLanguage(target: Locale) {  window.location.href = domainForLocale[target]; // 👈 navigasi ke domain sesuai locale target}

Manfaat routing berbasis domain

Konfigurasi lebih sederhana: Tidak perlu mengonfigurasi intlayerProxy, generateStaticParams, react-router, atau vue-router
SEO yang lebih baik: Setiap bahasa memiliki domainnya sendiri
URL yang lebih bersih: Tidak ada prefix locale di jalur
Pemeliharaan yang lebih mudah: Setiap deployment bahasa bersifat independen