كيف أقوم بتكوين التوجيه بناءً على النطاق مع Intlayer بدلاً من مسارات /[locale]/؟

إجابة مختصرة

التوجيه بناءً على النطاق أبسط من التوجيه بناءً على المسار (example.com/[locale]/) لأنه يمكنك تخطي كل تكوين الوسيط والتوجيه. فقط قم بنشر تطبيقك على كل نطاق لغة واضبط متغير بيئة واحد لكل نطاق.

خطوة بخطوة

انشر مرة واحدة لكل نطاق (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

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

ts;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 أنظف: لا يوجد بادئة للغة في المسار
صيانة أسهل: كل نشر للغة مستقل