Intlayer ile alan adına göre yönlendirme nasıl yapılandırılır? /[locale]/ yolları yerine

Kısa cevap

Alan adına göre yönlendirme, yol tabanlı yönlendirmeden (example.com/[locale]/) daha basittir çünkü tüm middleware ve yönlendirme yapılandırmasını atlayabilirsiniz. Sadece uygulamanızı her dil için ayrı bir domaine dağıtın ve her domain için bir ortam değişkeni ayarlayın.

Adım adım

Her domain için ayrı dağıtım yapın (example.com, exemple.fr, ejemplo.es, ...).
Her dağıtımda, o domainin hangi dili sunacağını belirten LOCALE (ve diğer Intlayer ortam değişkenlerini) ayarlayın.
Bu değişkeni intlayer.config.[ts|js] dosyanızda defaultLocale olarak kullanın.

import { Locales, type IntlayerConfig } from "intlayer";const config: IntlayerConfig = {  internationalization: {    locales: [Locales.ENGLISH, Locales.FRENCH, Locales.SPANISH],    defaultLocale: process.env.LOCALE, // 👈 domain dili belirler  },  // ... diğer ayarlar};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 dili belirler  },  // ... diğer ayarlar};export default config;

Bu kadar! Next.js, Vite + React, Vite + Vue vb. için aynıdır.

Tüm domainler aynı dağıtıma yönleniyorsa?

Tüm domainler aynı uygulama paketine yönleniyorsa, host'u çalışma zamanında tespit edip locale'i sağlayıcıya manuel iletmeniz gerekir.

Next.js için

// 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 için

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() fonksiyonunu kendi domain tespit mantığınızla değiştirin.

Dil değiştirici güncelleyin

Alan adına göre yönlendirme kullanırken, dil değiştirmek başka bir domaine gitmek anlamına gelir:

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

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

Alan adına göre yönlendirmenin avantajları

Daha basit yapılandırma: intlayerProxy, generateStaticParams, react-router veya vue-router yapılandırmaya gerek yok
Daha iyi SEO: Her dilin kendi domaini olur
Daha temiz URL'ler: Yolda dil öneki yok
Daha kolay bakım: Her dil dağıtımı bağımsızdır