कस्टम डोमेन (Custom Domains)

Intlayer डोमेन-आधारित लोकेल रूटिंग का समर्थन करता है, जिससे आप समर्पित होस्टनेम से विशिष्ट लोकेल की सेवा कर सकते हैं। उदाहरण के लिए, चीनी आगंतुकों को intlayer.org/zh के बजाय intlayer.zh पर निर्देशित किया जा सकता है।

यह कैसे काम करता है

routing में domains मैप प्रत्येक लोकेल को एक होस्टनेम के साथ जोड़ता है। Intlayer इस मैप का उपयोग दो स्थानों पर करता है:

1. URL जनरेशन (getLocalizedUrl): जब लक्ष्य लोकेल वर्तमान पेज की तुलना में अलग डोमेन पर होता है, तो एक पूर्ण (absolute) URL लौटाया जाता है (जैसे https://intlayer.zh/about)। जब दोनों डोमेन मैच करते हैं, तो एक सापेक्ष (relative) URL लौटाया जाता है (जैसे /fr/about)।
2. सर्वर प्रॉक्सी (Next.js और Vite): आने वाले अनुरोधों को उस डोमेन के आधार पर रीडायरेक्ट या रीराइट किया जाता है जिस पर वे आते हैं।

विशेष बनाम साझा डोमेन (Exclusive vs. shared domains)

मुख्य अंतर विशेषता (exclusivity) है:

• विशेष डोमेन (Exclusive domain) - केवल एक लोकेल उस होस्टनेम पर मैप होता है (जैसे zh → intlayer.zh)। डोमेन स्वयं लोकेल की पहचान करता है, इसलिए पथ (path) में कोई लोकेल उपसर्ग (prefix) नहीं जोड़ा जाता है। https://intlayer.zh/about चीनी सामग्री परोसता है।
• साझा डोमेन (Shared domain) - एक ही होस्टनेम पर कई लोकेल मैप होते हैं (जैसे en और fr दोनों intlayer.org पर मैप होते हैं)। सामान्य उपसर्ग-आधारित रूटिंग लागू होती है। intlayer.org/fr/about फ्रांसीसी सामग्री परोसता है।

कॉन्फ़िगरेशन

import { Locales, type IntlayerConfig } from "intlayer";

const config: IntlayerConfig = {
  internationalization: {
    locales: [
      Locales.ENGLISH,
      Locales.FRENCH,
      Locales.SPANISH,
      Locales.CHINESE,
    ],
    defaultLocale: Locales.ENGLISH,
  },
  routing: {
    mode: "prefix-no-default",
    domains: {
      // साझा डोमेन - en और fr intlayer.org पर उपसर्ग रूटिंग का उपयोग करते हैं
      en: "intlayer.org",
      // विशेष डोमेन - zh का अपना होस्टनेम है, किसी /zh/ उपसर्ग की आवश्यकता नहीं है
      zh: "intlayer.zh",
    },
  },
};

export default config;

जो लोकेल domains में सूचीबद्ध नहीं हैं, वे बिना किसी डोमेन ओवरराइड के मानक उपसर्ग रूटिंग का उपयोग करना जारी रखते हैं।

URL जनरेशन

getLocalizedUrl कॉल के संदर्भ के आधार पर स्वचालित रूप से सही URL प्रकार उत्पन्न करता है।

समान-डोमेन लोकेल (relative URL)

// वर्तमान पेज: intlayer.org/about
getLocalizedUrl("/about", "fr", { currentDomain: "intlayer.org" });
// → "/fr/about"

getLocalizedUrl("/about", "en", { currentDomain: "intlayer.org" });
// → "/about"  (डिफ़ॉल्ट लोकेल, कोई उपसर्ग नहीं)

क्रॉस-डोमेन लोकेल (absolute URL)

// वर्तमान पेज: intlayer.org/about
getLocalizedUrl("/about", "zh", { currentDomain: "intlayer.org" });
// → "https://intlayer.zh/about"  (विशेष डोमेन, कोई /zh/ उपसर्ग नहीं)

लोकेल के अपने डोमेन से सेवा करना

// वर्तमान पेज: intlayer.zh/about
getLocalizedUrl("/about", "zh", { currentDomain: "intlayer.zh" });
// → "/about"  (पहले से ही सही डोमेन पर है - सापेक्ष URL)

getLocalizedUrl("/about", "fr", { currentDomain: "intlayer.zh" });
// → "https://intlayer.org/fr/about"  (intlayer.org पर वापस क्रॉस-डोमेन लिंक)

वर्तमान डोमेन ऑटो-डिटेक्शन

currentDomain वैकल्पिक है। छोड़े जाने पर, getLocalizedUrl इसे इस क्रम में हल करता है:

1. पूर्ण इनपुट URL का होस्टनेम (जैसे https://intlayer.org/about → intlayer.org)।
2. ब्राउज़र वातावरण में window.location.hostname ।
3. यदि कोई भी उपलब्ध नहीं है (बिना स्पष्ट विकल्प के SSR), तो समान-डोमेन लोकेल के लिए एक सापेक्ष URL लौटाया जाता है और कोई पूर्ण URL उत्पन्न नहीं होता है - यह सुरक्षित फॉलबैक है।

// ब्राउज़र - window.location.hostname === 'intlayer.org'
getLocalizedUrl("/about", "zh");
// → "https://intlayer.zh/about"  (विंडो से ऑटो-डिटेक्टेड)

// पूर्ण URL से - डोमेन स्वचालित रूप से डिटेक्ट हो गया
getLocalizedUrl("https://intlayer.org/about", "zh");
// → "https://intlayer.zh/about"

डोमेन के साथ getMultilingualUrls

getMultilingualUrls प्रत्येक लोकेल के लिए getLocalizedUrl कॉल करता है, इसलिए यह कॉलर के डोमेन के आधार पर सापेक्ष और पूर्ण URL का मिश्रण उत्पन्न करता है:

// currentDomain: 'intlayer.org'
getMultilingualUrls("/about", { currentDomain: "intlayer.org" });
// {
//   en: "/about",
//   fr: "/fr/about",
//   es: "/es/about",
//   zh: "https://intlayer.zh/about",
// }

ये पूर्ण URL SEO के लिए <link rel="alternate" hreflang="..."> टैग में उपयोग करने के लिए तैयार हैं।

Type Inference

routing.domains को generated module augmentation में serialize किया जाता है, इसलिए getLocalizedUrl और getLocalizedPath अपने return type को exact URL तक narrow करते हैं जिसे एक domain-routed locale resolve करता है — prefix suppression शामिल है।

// routing: { mode: 'prefix-no-default', domains: { en: 'intlayer.org', zh: 'intlayer.zh' } }

getLocalizedUrl("/about", "zh");
//     ^? "https://intlayer.zh/about" | "/about"

getLocalizedPath("/about", "zh");
//     ^? "/about"   (कभी भी origin नहीं, और कोई /zh/ prefix नहीं)

URL type दोनों values का union है जो function return कर सकता है: locale के domain पर absolute URL, और relative URL जो तब return होता है जब rendered किया जा रहा page पहले से ही उस domain पर रहता है। getLocalizedPath के पास ऐसी कोई ambiguity नहीं है - यह कभी भी origin emit नहीं करता - इसलिए यह एक single literal रहता है।

Locales जो एक domain share करते हैं अपना normal prefix type में भी keep करते हैं:

getLocalizedUrl("/about", "fr");
//     ^? "https://intlayer.org/fr/about" | "/fr/about"

routing.domains को बदलने के बाद types को regenerate करें (npx intlayer build, या कोई dev server run) - narrowing generated __RoutingRegistry से आता है, config file से नहीं।

प्रॉक्सी व्यवहार (Proxy Behaviour)

Next.js

intlayerProxy मिडलवेयर डोमेन रूटिंग को स्वचालित रूप से संभालता है। इसे अपने middleware.ts में जोड़ें:

export { intlayerProxy as default } from "next-intlayer/proxy";

export const config = {
  matcher: "/((?!api|static|assets|robots|sitemap|.*\\..*|_next).*)",
};

रीडायरेक्ट (Redirect) - अनुरोध किसी दिए गए लोकेल उपसर्ग के लिए गलत डोमेन पर आता है:

GET intlayer.org/zh/about
→ 301 https://intlayer.zh/about

रीराइट (Rewrite) - अनुरोध बिना उपसर्ग के लोकेल के विशेष डोमेन पर आता है:

GET intlayer.zh/about
→ /zh/about पर रीराइट (केवल आंतरिक Next.js रूटिंग, URL साफ रहता है)

Vite

intlayerProxy Vite प्लगइन विकास के दौरान समान तर्क लागू करता है:

Intlayer v9 के बाद से, intlayerProxy() सीधे intlayer() plugin में bundled है और routing.enableProxy विकल्प के माध्यम से डिफ़ॉल्ट रूप से सक्षम है (true डिफ़ॉल्ट रूप से)। इसे अलग से पंजीकृत करना जैसा कि नीचे दिखाया गया है अब वैकल्पिक है — यह backward compatibility के लिए और उन setups के लिए रखा गया है जिन्हें plugin order को नियंत्रित करने की आवश्यकता है। routing.enableProxy: false सेट करके opt out करें। v9 release notes देखें।

import { defineConfig } from "vite";
import { intlayer } from "vite-intlayer";

export default defineConfig({
  plugins: [
    intlayer({
      proxy: {
        ignore: (req) => req.url?.startsWith("/api"),
      },
    }),
  ],
});

नोट: स्थानीय विकास में आप आमतौर पर localhost पर होते हैं, इसलिए क्रॉस-डोमेन रीडायरेक्ट किसी अन्य स्थानीय पोर्ट के बजाय लाइव डोमेन की ओर इशारा करेंगे। यदि आपको स्थानीय रूप से मल्टी-डोमेन रूटिंग का परीक्षण करने की आवश्यकता है, तो hosts-फ़ाइल ओवरराइड (जैसे 127.0.0.1 intlayer.zh) या रिवर्स प्रॉक्सी का उपयोग करें।

लोकेल स्विचर (Locale Switcher)

next-intlayer का useLocale हुक डोमेन-जागरूक नेविगेशन को स्वचालित रूप से संभालता है। जब कोई उपयोगकर्ता किसी दूसरे डोमेन पर लोकेल पर स्विच करता है, तो हुक क्लाइंट-साइड राउटर पुश के बजाय पूर्ण-पेज नेविगेशन (window.location.href) करता है, क्योंकि Next.js राउटर ओरिजिन (origins) को पार नहीं कर सकता है।

"use client";

import { useLocale } from "next-intlayer";

export const LocaleSwitcher = () => {
  const { availableLocales, locale, setLocale } = useLocale();

  return (
    <ul>
      {availableLocales.map((localeEl) => (
        <li key={localeEl}>
          <button
            onClick={() => setLocale(localeEl)}
            aria-current={localeEl === locale ? "true" : undefined}
          >
            {l.toUpperCase()}
          </button>
        </li>
      ))}
    </ul>
  );
};

किसी अतिरिक्त कॉन्फ़िगरेशन की आवश्यकता नहीं है - useLocale आंतरिक रूप से window.location.hostname का पता लगाता है और router.replace (समान डोमेन) और window.location.href (क्रॉस-डोमेन) के बीच निर्णय लेता है।

SEO: hreflang वैकल्पिक लिंक

डोमेन-आधारित रूटिंग का उपयोग आमतौर पर hreflang के साथ खोज इंजन को यह बताने के लिए किया जाता है कि प्रत्येक भाषा के लिए किस URL को इंडेक्स करना है। वैकल्पिक URL का पूरा सेट उत्पन्न करने के लिए getMultilingualUrls का उपयोग करें:

import { getMultilingualUrls } from "intlayer";
import type { Metadata } from "next";

export const generateMetadata = (): Metadata => {
  const alternates = getMultilingualUrls("/", {
    currentDomain: process.env.NEXT_PUBLIC_DOMAIN, // जैसे "intlayer.org"
  });

  return {
    alternates: {
      languages: alternates,
    },
  };
};

यह उत्पन्न करता है:

<link rel="alternate" hreflang="en" href="https://intlayer.org/" />
<link rel="alternate" hreflang="fr" href="https://intlayer.org/fr/" />
<link rel="alternate" hreflang="es" href="https://intlayer.org/es/" />
<link rel="alternate" hreflang="zh" href="https://intlayer.zh/" />

मुख्य उपयोगिताएँ (Core Utilities)