Creation:2024-12-06Last update:2026-05-31

    Intlayer के साथ अपना Next.js 14 and App Router अनुवाद करें | अंतर्राष्ट्रीयकरण (i18n)

    ide.intlayer.org

    एप्लीकेशन टेम्पलेट पर देखें.

    विकल्पों पर इन्टलेयर क्यों?

    नेक्स्ट-इंटल या आई18नेक्स्ट जैसे मुख्य समाधानों की तुलना में, इंटलेयर एक ऐसा समाधान है जो एकीकृत अनुकूलन के साथ आता है जैसे:

    पूर्ण Next.js कवरेज

    कुशल रेंडरिंग के लिए इंटलेयर को सर्वर कंपोनेंट्स के साथ काम करने के लिए अनुकूलित किया गया है और यह टर्बोपैक के साथ पूरी तरह से संगत है। यह स्थैतिक रेंडरिंग को अवरुद्ध नहीं करता है और मिडलवेयर के साथ-साथ अंतर्राष्ट्रीयकरण (i18n) को स्केल करने के लिए आवश्यक सभी सुविधाएँ प्रदान करता है।

    इंटलेयर Next.js 12, 13, 14, 15 और 16 के साथ संगत है। यदि आप Next.js पेज राउटर का उपयोग कर रहे हैं, तो आप इस [गाइड] (/hi/doc/environment/nextjs/next-with-page-router) को देख सकते हैं। लोकेल रूटिंग एसईओ, बंडल आकार और प्रदर्शन के लिए उपयोगी है। यदि आपको इसकी आवश्यकता नहीं है, तो आप इस गाइड का संदर्भ ले सकते हैं। ऐप राउटर के साथ Next.js 12, 13, 14, और 15 के लिए, इस गाइड को देखें।

    बंडल का आकार

    अपने पृष्ठों में विशाल JSON फ़ाइलें लोड करने के बजाय, केवल आवश्यक सामग्री लोड करें। इंटलेयर आपके बंडल और पृष्ठ आकार को 50% तक कम करने में मदद करता है।

    रखरखाव

    आपके एप्लिकेशन की सामग्री का दायरा बड़े पैमाने के अनुप्रयोगों के लिए रखरखाव की सुविधा प्रदान करता है। आप अपने संपूर्ण सामग्री कोडबेस की समीक्षा करने के मानसिक बोझ के बिना किसी एक फीचर फ़ोल्डर की नकल कर सकते हैं या उसे हटा सकते हैं। इसके अतिरिक्त, आपकी सामग्री की सटीकता सुनिश्चित करने के लिए Intlayer पूरी तरह से टाइप किया गया है।

    एआई एजेंट

    सामग्री का सह-स्थानीकरण बड़े भाषा मॉडल (एलएलएम) द्वारा आवश्यक संदर्भ को कम करता है। इंटलेयर टूल के एक सूट के साथ भी आता है, जैसे CLI ताकि लापता अनुवादों का परीक्षण किया जा सके,LSP, MCP, और एजेंट कौशल, AI एजेंटों के लिए डेवलपर अनुभव (DX) को और भी आसान बनाने के लिए।

    स्वचालन

    अपने एआई प्रदाता की कीमत पर अपनी पसंद के एलएलएम का उपयोग करके अपने सीआई/सीडी पाइपलाइन में अनुवाद करने के लिए स्वचालन का उपयोग करें। इंटलेयर सामग्री निष्कर्षण को स्वचालित करने के लिए एक कंपाइलर के साथ-साथ पृष्ठभूमि में अनुवाद में मदद करने के लिए एक वेब प्लेटफ़ॉर्म भी प्रदान करता है।

    प्रदर्शन

    बड़े पैमाने पर JSON फ़ाइलों को घटकों से जोड़ने से प्रदर्शन और प्रतिक्रियाशीलता संबंधी समस्याएं हो सकती हैं। इंटलेयर बिल्ड समय पर आपकी सामग्री लोडिंग को अनुकूलित करता है।

    किसी भी देव के साथ स्केलिंग

    सिर्फ एक i18n समाधान से अधिक, Intlayer एक स्व-होस्टेड विज़ुअल एडिटर और एक [पूर्ण] प्रदान करता है सीएमएस](/hi/doc/concept/cms) आपकी बहुभाषी सामग्री को वास्तविक समय में प्रबंधित करने में मदद करता है, जिससे अनुवादकों, कॉपीराइटरों और टीम के अन्य सदस्यों के साथ सहयोग सहज हो जाता है। सामग्री को स्थानीय और/या दूरस्थ रूप से संग्रहीत किया जा सकता है।

    Next.js एप्लिकेशन में Intlayer सेट अप करने के लिए चरण-दर-चरण गाइड

    1. डिपेंडेंसी इंस्टॉल करें

      npm का उपयोग करके आवश्यक पैकेज इंस्टॉल करें:

      bash
      npm install intlayer next-intlayernpx intlayer init

      • intlayer

        यह मुख्य पैकेज है जो कॉन्फ़िगरेशन प्रबंधन, अनुवाद, सामग्री घोषणा, ट्रांसपिलेशन, और CLI कमांड्स के लिए अंतर्राष्ट्रीयकरण उपकरण प्रदान करता है।

      • next-intlayer

        यह पैकेज Intlayer को Next.js के साथ एकीकृत करता है। यह Next.js अंतर्राष्ट्रीयकरण के लिए संदर्भ प्रदाता और हुक प्रदान करता है। इसके अतिरिक्त, यह Intlayer को Webpack या Turbopack के साथ एकीकृत करने के लिए Next.js प्लगइन और उपयोगकर्ता की पसंदीदा लोकेल का पता लगाने, कुकीज़ प्रबंधन, और URL रीडायरेक्शन को संभालने के लिए मिडलवेयर शामिल करता है।

    2. अपने प्रोजेक्ट को कॉन्फ़िगर करें

      Here is the final structure that we will make:

      bash
      .├── src│   ├── app│   │   ├── [locale]│   │   │   ├── layout.tsx            # Locale layout for the Intlayer provider│   │   │   ├── page.content.ts│   │   │   └── page.tsx│   │   └── layout.tsx                # Root layout for style and global providers│   ├── components│   │   ├── client-component-example.content.ts│   │   ├── ClientComponentExample.tsx│   │   ├── LocaleSwitcher│   │   │   ├── localeSwitcher.content.ts│   │   │   └── LocaleSwitcher.tsx│   │   ├── server-component-example.content.ts│   │   └── ServerComponentExample.tsx│   └── middleware.ts├── intlayer.config.ts├── next.config.ts├── package.json└── tsconfig.json
      If you don't want locale routing, intlayer can be used as a simple provider / hook. See this guide for more details.

      अपने एप्लिकेशन की भाषाओं को कॉन्फ़िगर करने के लिए एक कॉन्फ़िग फाइल बनाएं:

      intlayer.config.ts
      // भाषाओं और कॉन्फ़िगरेशन के लिए Intlayer आयात करें
import { Locales, type IntlayerConfig } from "intlayer";

const config: IntlayerConfig = {
  internationalization: {
    locales: [
      Locales.ENGLISH,
      Locales.FRENCH,
      Locales.SPANISH,
      // आपकी अन्य भाषाएं
    ],
    defaultLocale: Locales.ENGLISH,
  },
};

export default config;
      इस कॉन्फ़िगरेशन फ़ाइल के माध्यम से, आप स्थानीयकृत URL, मिडलवेयर रीडायरेक्शन, कुकी नाम, अपनी सामग्री घोषणाओं का स्थान और एक्सटेंशन, कंसोल में Intlayer लॉग्स को अक्षम करना, और अधिक सेट कर सकते हैं। उपलब्ध पैरामीटरों की पूरी सूची के लिए, कॉन्फ़िगरेशन दस्तावेज़ देखें।

    3. अपने Next.js कॉन्फ़िगरेशन में Intlayer को एकीकृत करें

      Intlayer का उपयोग करने के लिए अपने Next.js सेटअप को कॉन्फ़िगर करें:

      next.config.mjs
      // Intlayer को Next.js के साथ एकीकृत करने के लिए आयात करेंimport { withIntlayer } from "next-intlayer/server";/** @type {import('next').NextConfig} */const nextConfig = {};export default withIntlayer(nextConfig);
      withIntlayer() Next.js प्लगइन का उपयोग Intlayer को Next.js के साथ एकीकृत करने के लिए किया जाता है। यह सामग्री घोषणा फ़ाइलों के निर्माण को सुनिश्चित करता है और विकास मोड में उनकी निगरानी करता है। यह Webpack या Turbopack वातावरणों के भीतर Intlayer पर्यावरण चर को परिभाषित करता है। इसके अतिरिक्त, यह प्रदर्शन को अनुकूलित करने के लिए उपनाम प्रदान करता है और सर्वर घटकों के साथ संगतता सुनिश्चित करता है।

    4. लोकेल डिटेक्शन के लिए मिडलवेयर कॉन्फ़िगर करें

      उपयोगकर्ता की पसंदीदा लोकेल का पता लगाने के लिए मिडलवेयर सेट करें:

      src/middleware.ts
      // Intlayer मिडलवेयर को आयात और निर्यात करें
export { intlayerMiddleware as middleware } from "next-intlayer/middleware";

export const config = {
  matcher:
    "/((?!api|static|assets|robots|sitemap|sw|service-worker|manifest|.*\\..*|_next).*)",
};
      intlayerMiddleware का उपयोग उपयोगकर्ता की पसंदीदा लोकेल का पता लगाने और उन्हें कॉन्फ़िगरेशन में निर्दिष्ट उपयुक्त URL पर रीडायरेक्ट करने के लिए किया जाता है। इसके अतिरिक्त, यह उपयोगकर्ता की पसंदीदा लोकेल को कुकी में सहेजने में सक्षम बनाता है।
      अपने एप्लिकेशन के रूट्स से मेल खाने के लिए matcher पैरामीटर को अनुकूलित करें। अधिक विवरण के लिए, Next.js दस्तावेज़ देखें।

    5. डायनामिक लोकेल रूट्स परिभाषित करें

      RootLayout से सब कुछ हटा दें और निम्नलिखित कोड से बदलें:

      src/app/layout.tsx
      // रूट लेआउट घटक को परिभाषित करें
import type { PropsWithChildren, FC } from "react";
import "./globals.css";

const RootLayout: FC<PropsWithChildren> = ({ children }) => children;

export default RootLayout;
      RootLayout घटक को खाली रखना <html> टैग पर lang और dir विशेषताओं को सेट करने की अनुमति देता है।

      डायनामिक रूटिंग को लागू करने के लिए, अपने [locale] डायरेक्टरी में एक नया लेआउट जोड़कर लोकेल के लिए पथ प्रदान करें:

      src/app/[locale]/layout.tsx
      // डायनामिक लोकेल लेआउट घटक को परिभाषित करेंimport {  type Next14LayoutIntlayer,  IntlayerClientProvider,} from "next-intlayer";import { Inter } from "next/font/google";import { getHTMLTextDir } from "intlayer";const inter = Inter({ subsets: ["latin"] });const LocaleLayout: Next14LayoutIntlayer = ({  children,  params: { locale },}) => (  <html lang={locale} dir={getHTMLTextDir(locale)}>    <body className={inter.className}>      <IntlayerClientProvider locale={locale}>        {children}      </IntlayerClientProvider>    </body>  </html>);import { Inter } from "next/font/google";import { getHTMLTextDir } from "intlayer";const inter = Inter({ subsets: ["latin"] });const LocaleLayout = ({ children, params: { locale } }) => (  <html lang={locale} dir={getHTMLTextDir(locale)}>    <body className={inter.className}>      <IntlayerClientProvider locale={locale}>        {children}      </IntlayerClientProvider>    </body>  </html>);export default LocaleLayout;
      [locale] पथ खंड का उपयोग लोकेल को परिभाषित करने के लिए किया जाता है। उदाहरण: /en-US/about en-US को संदर्भित करेगा और /fr/about fr को।
      इस चरण में, आपको त्रुटि का सामना करना पड़ेगा: Error: Missing <html> and <body> tags in the root layout.। यह अपेक्षित है क्योंकि /app/page.tsx फ़ाइल अब उपयोग में नहीं है और इसे हटाया जा सकता है। इसके बजाय, [locale] पथ खंड /app/[locale]/page.tsx पृष्ठ को सक्रिय करेगा। परिणामस्वरूप, पृष्ठ आपके ब्राउज़र में /en, /fr, /es जैसे पथों के माध्यम से सुलभ होंगे। डिफ़ॉल्ट लोकेल को रूट पृष्ठ के रूप में सेट करने के लिए, चरण 4 में middleware सेटअप देखें।

      फिर, अपने एप्लिकेशन लेआउट में generateStaticParams फ़ंक्शन लागू करें।

      src/app/[locale]/layout.tsx
      export { generateStaticParams } from "next-intlayer"; // डालने के लिए पंक्ति

const LocaleLayout: Next14LayoutIntlayer = ({
  children,
  params: { locale },
}) => {
  /*... कोड का शेष भाग*/
};

export default LocaleLayout;
      generateStaticParams यह सुनिश्चित करता है कि आपका एप्लिकेशन सभी लोकेल्स के लिए आवश्यक पृष्ठों को पहले से निर्मित करता है, रनटाइम गणना को कम करता है और उपयोगकर्ता अनुभव को बेहतर बनाता है। अधिक विवरण के लिए, generateStaticParams पर Next.js प्रलेखन देखें।

    6. अपनी सामग्री घोषित करें

      अनुवादों को संग्रहीत करने के लिए अपनी सामग्री घोषणाएँ बनाएँ और प्रबंधित करें:

      src/app/[locale]/page.content.ts
      import { t, type Dictionary } from "intlayer";

const pageContent = {
  key: "page",
  content: {
    getStarted: {
      main: t({
        hi: "संपादन करके शुरू करें",
        en: "Get started by editing",
        fr: "Commencez par éditer",
        es: "Comience por editar",
      }),
      pageLink: "src/app/page.tsx",
    },
  },
} satisfies Dictionary;

export default pageContent;
      आपकी सामग्री घोषणाएँ आपके एप्लिकेशन में कहीं भी परिभाषित की जा सकती हैं जब तक कि उन्हें contentDir निर्देशिका (डिफ़ॉल्ट रूप से, ./src) में शामिल किया गया हो। और सामग्री घोषणा फ़ाइल एक्सटेंशन से मेल खाती हो (डिफ़ॉल्ट रूप से, .content.{json,ts,tsx,js,jsx,mjs,cjs})।
      अधिक विवरण के लिए, सामग्री घोषणा प्रलेखन देखें।

    7. अपनी सामग्री का कोड में उपयोग करें

      अपने एप्लिकेशन में अपनी सामग्री शब्दकोशों तक पहुँचें:

      src/app/[locale]/page.tsx
      import { ClientComponentExample } from "@components/ClientComponentExample";
import { ServerComponentExample } from "@components/ServerComponentExample";
import { type Next14PageIntlayer } from "next-intlayer";
import { IntlayerServerProvider, useIntlayer } from "next-intlayer/server";

const Page: Next14PageIntlayer = ({ params: { locale } }) => {
  const content = useIntlayer("page", locale);

  return (
    <>
      <p>
        {content.getStarted.main}
        <code>{content.getStarted.pageLink}</code>
      </p>

      <IntlayerServerProvider locale={locale}>
        <ServerComponentExample />
        <ClientComponentExample />
      </IntlayerServerProvider>
    </>
  );
};

export default Page;
      • IntlayerClientProvider का उपयोग क्लाइंट-साइड घटकों को लोकेल प्रदान करने के लिए किया जाता है। इसे किसी भी पैरेंट घटक में रखा जा सकता है, जिसमें लेआउट भी शामिल है। हालाँकि, इसे लेआउट में रखना अनुशंसित है क्योंकि Next.js पृष्ठों में लेआउट कोड साझा करता है, जिससे यह अधिक कुशल हो जाता है। लेआउट में IntlayerClientProvider का उपयोग करके, आप इसे हर पृष्ठ के लिए पुनः आरंभ करने से बचते हैं, प्रदर्शन में सुधार करते हैं और अपने एप्लिकेशन में एक सुसंगत स्थानीयकरण संदर्भ बनाए रखते हैं।
      • IntlayerServerProvider का उपयोग सर्वर बच्चों को लोकेल प्रदान करने के लिए किया जाता है। इसे लेआउट में सेट नहीं किया जा सकता।
      src/components/ClientComponentExample.tsx
      "use client";

import type { FC } from "react";
import { useIntlayer } from "next-intlayer";

const ClientComponentExample: FC = () => {
  const content = useIntlayer("client-component-example"); // संबंधित सामग्री घोषणा बनाएँ

  return (
    <div>
      <h2>{content.title}</h2>
      <p>{content.content}</p>
    </div>
  );
};
      src/components/ServerComponentExample.tsx
      import type { FC } from "react";
import { useIntlayer } from "next-intlayer/server";

const ServerComponentExample: FC = () => {
  const content = useIntlayer("server-component-example"); // संबंधित सामग्री घोषणा बनाएँ

  return (
    <div>
      <h2>{content.title}</h2>
      <p>{content.content}</p>
    </div>
  );
};
      यदि आप अपनी सामग्री को string एट्रिब्यूट में उपयोग करना चाहते हैं, जैसे alt, title, href, aria-label, आदि, तो आपको फ़ंक्शन के मान को कॉल करना होगा, जैसे:
      html
      <img src="{content.image.src.value}" alt="{content.image.value}" /><img src="{content.image.src.toString()}" alt="{content.image.toString()}" /><img src="{String(content.image.src)}" alt="{String(content.image)}" />
      useIntlayer हुक के बारे में अधिक जानने के लिए, डॉक्यूमेंटेशन देखें।

    8. अपने मेटाडेटा का अंतर्राष्ट्रीयकरण

      वैकल्पिक

      यदि आप अपने मेटाडेटा का अंतर्राष्ट्रीयकरण करना चाहते हैं, जैसे कि आपके पेज का शीर्षक, तो आप Next.js द्वारा प्रदान की गई generateMetadata फ़ंक्शन का उपयोग कर सकते हैं। फ़ंक्शन के अंदर getTranslation फ़ंक्शन का उपयोग करके अपने मेटाडेटा का अनुवाद करें।

      src/app/[locale]/layout.tsx or src/app/[locale]/page.tsx
      import {  type IConfigLocales,  getTranslation,  getMultilingualUrls,} from "intlayer";import type { Metadata } from "next";import type { LocalParams } from "next-intlayer";export const generateMetadata = ({  params: { locale },}: LocalParams): Metadata => {  const t = <T>(content: IConfigLocales<T>) => getTranslation(content, locale);  /**   * प्रत्येक लोकेल के लिए सभी URL युक्त एक ऑब्जेक्ट उत्पन्न करता है।   *   * उदाहरण:   * ```ts   *  getMultilingualUrls('/about');   *   *  // परिणाम   *  // {   *  //   en: '/about',   *  //   fr: '/fr/about',   *  //   es: '/es/about',   *  // }   * ```   */  const multilingualUrls = getMultilingualUrls("/");  return {    title: t<string>({      hi: "मेरा शीर्षक",      en: "My title",      fr: "Mon titre",      es: "Mi título",    }),    description: t({      hi: "मेरा विवरण",      en: "My description",      fr: "Ma description",      es: "Mi descripción",    }),    alternates: {      canonical: multilingualUrls[locale as keyof typeof multilingualUrls],      languages: { ...multilingualUrls, "x-default": "/" },    },    openGraph: {      url: multilingualUrls[locale],    },  };};// ... कोड का शेष भाग
      मेटाडेटा ऑप्टिमाइजेशन के बारे में अधिक जानें Next.js के आधिकारिक दस्तावेज़ पर।

    9. अपने sitemap.xml और robots.txt का अंतर्राष्ट्रीयकरण

      वैकल्पिक

      अपने sitemap.xml और robots.txt का अंतर्राष्ट्रीयकरण करने के लिए, आप Intlayer द्वारा प्रदान की गई getMultilingualUrls फ़ंक्शन का उपयोग कर सकते हैं। यह फ़ंक्शन आपके साइटमैप के लिए बहुभाषी URL उत्पन्न करने की अनुमति देता है।

      src/app/sitemap.ts
      import { getMultilingualUrls } from "intlayer";import type { MetadataRoute } from "next";const sitemap = (): MetadataRoute.Sitemap => [  {    url: "https://example.com",    alternates: {      languages: getMultilingualUrls("https://example.com"),    },  },  {    url: "https://example.com/login",    alternates: {      languages: getMultilingualUrls("https://example.com/login"),    },  },  {    url: "https://example.com/register",    alternates: {      languages: getMultilingualUrls("https://example.com/register"),    },  },];export default sitemap;import { getMultilingualUrls } from "intlayer";const sitemap = () => [  {    url: "https://example.com",    alternates: {      languages: getMultilingualUrls("https://example.com"),    },  },  {    url: "https://example.com/login",    alternates: {      languages: getMultilingualUrls("https://example.com/login"),    },  },  {    url: "https://example.com/register",    alternates: {      languages: getMultilingualUrls("https://example.com/register"),    },  },];export default sitemap;
      src/app/robots.ts
      import type { MetadataRoute } from "next";
import { getMultilingualUrls } from "intlayer";

const getAllMultilingualUrls = (urls: string[]) =>
  urls.flatMap((url) => Object.values(getMultilingualUrls(url)) as string[]);

const robots = (): MetadataRoute.Robots => ({
  rules: {
    userAgent: "*",
    allow: ["/"],
    disallow: getAllMultilingualUrls(["/hi/login", "/hi/register"]),
  },
  host: "https://example.com",
  sitemap: `https://example.com/sitemap.xml`,
});

export default robots;
      साइटमैप अनुकूलन के बारे में अधिक जानें आधिकारिक Next.js दस्तावेज़ पर। robots.txt अनुकूलन के बारे में अधिक जानें आधिकारिक Next.js दस्तावेज़ पर।

    10. अपनी सामग्री की भाषा बदलें

      वैकल्पिक

      अपनी सामग्री की भाषा बदलने के लिए, Next.js में अनुशंसित तरीका Link घटक का उपयोग करके उपयोगकर्ताओं को उपयुक्त स्थानीयकृत पृष्ठ पर पुनर्निर्देशित करना है। Link घटक पृष्ठ के पूर्व-प्राप्ति को सक्षम करता है, जो पूर्ण पृष्ठ पुनः लोड से बचने में मदद करता है।

      src/components/LocaleSwitcher.tsx
      "use client";

import {
  Locales,
  getHTMLTextDir,
  getLocaleName,
  getLocalizedUrl,
} from "intlayer";
import { useLocale } from "next-intlayer";
import { type FC } from "react";
import Link from "next/link";

const LocaleSwitcher: FC = () => {
  const { locale, pathWithoutLocale, availableLocales, setLocale } =
    useLocale();

  return (
    <div>
      <button popoverTarget="localePopover">{getLocaleName(locale)}</button>
      <div id="localePopover" popover="auto">
        {availableLocales.map((localeItem) => (
          <Link
            href={getLocalizedUrl(pathWithoutLocale, localeItem)}
            hrefLang={localeItem}
            key={localeItem}
            aria-current={locale === localeItem ? "page" : undefined}
            onClick={() => setLocale(localeItem)}
          >
            <span>
              {/* लोकेल - जैसे FR */}
              {localeItem}
            </span>
            <span>
              {/* अपनी लोकेल में भाषा - जैसे Français */}
              {getLocaleName(localeItem, locale)}
            </span>
            <span dir={getHTMLTextDir(localeItem)} lang={localeItem}>
              {/* वर्तमान लोकेल में भाषा - जैसे Francés जब वर्तमान लोकेल Locales.SPANISH पर सेट हो */}
              {getLocaleName(localeItem)}
            </span>
            <span dir="ltr" lang={Locales.ENGLISH}>
              {/* अंग्रेजी में भाषा - जैसे French */}
              {getLocaleName(localeItem, Locales.ENGLISH)}
            </span>
          </Link>
        ))}
      </div>
    </div>
  );
};

      दस्तावेज़ संदर्भ:

    11. एक स्थानीयकृत लिंक घटक बनाना

      वैकल्पिक

      यह सुनिश्चित करने के लिए कि आपके एप्लिकेशन का नेविगेशन वर्तमान लोकेल का सम्मान करता है, आप एक कस्टम Link घटक बना सकते हैं। यह घटक स्वचालित रूप से आंतरिक URL को वर्तमान भाषा के साथ प्रीफिक्स करता है। उदाहरण के लिए, जब एक फ्रेंच-भाषी उपयोगकर्ता "About" पृष्ठ के लिंक पर क्लिक करता है, तो उसे /fr/about पर रीडायरेक्ट किया जाता है, न कि /about पर।

      यह व्यवहार कई कारणों से उपयोगी है:

      • SEO और उपयोगकर्ता अनुभव: स्थानीयकृत URL खोज इंजन को भाषा-विशिष्ट पृष्ठों को सही ढंग से अनुक्रमित करने में मदद करते हैं और उपयोगकर्ताओं को उनकी पसंदीदा भाषा में सामग्री प्रदान करते हैं।
      • संगति: अपने एप्लिकेशन में एक स्थानीयकृत लिंक का उपयोग करके, आप यह सुनिश्चित करते हैं कि नेविगेशन वर्तमान लोकेल के भीतर बना रहे, अप्रत्याशित भाषा स्विच को रोकते हुए।
      • रखरखाव: एकल घटक में स्थानीयकरण लॉजिक को केंद्रीकृत करना URL के प्रबंधन को सरल बनाता है, जिससे आपका कोडबेस आपके एप्लिकेशन के बढ़ने के साथ बनाए रखने और विस्तारित करने में आसान हो जाता है।

      नीचे TypeScript में एक स्थानीयकृत Link घटक का कार्यान्वयन दिया गया है:

      src/components/Link.tsx
      "use client";

import { getLocalizedUrl } from "intlayer";
import NextLink, { type LinkProps as NextLinkProps } from "next/link";
import { useLocale } from "next-intlayer";
import { forwardRef, PropsWithChildren, type ForwardedRef } from "react";

/**
 * यह उपयोगिता फ़ंक्शन जांचता है कि कोई URL बाहरी है या नहीं।
 * यदि URL http:// या https:// से शुरू होता है, तो इसे बाहरी माना जाता है।
 */
export const checkIsExternalLink = (href?: string): boolean =>
  /^https?:\/\//.test(href ?? "");

/**
 * एक कस्टम लिंक घटक जो href एट्रिब्यूट को वर्तमान लोकेल के आधार पर अनुकूलित करता है।
 * आंतरिक लिंक के लिए, यह `getLocalizedUrl` का उपयोग करता है URL को लोकेल के साथ प्रीफिक्स करने के लिए (जैसे, /fr/about)।
 * यह सुनिश्चित करता है कि नेविगेशन समान लोकेल संदर्भ के भीतर बना रहे।
 */
export const Link = forwardRef<
  HTMLAnchorElement,
  PropsWithChildren<NextLinkProps>
>(({ href, children, ...props }, ref: ForwardedRef<HTMLAnchorElement>) => {
  const { locale } = useLocale();
  const isExternalLink = checkIsExternalLink(href.toString());

  // यदि लिंक आंतरिक है और एक मान्य href प्रदान किया गया है, तो स्थानीयकृत URL प्राप्त करें।
  const hrefI18n: NextLinkProps["href"] =
    href && !isExternalLink ? getLocalizedUrl(href.toString(), locale) : href;

  return (
    <NextLink href={hrefI18n} ref={ref} {...props}>
      {children}
    </NextLink>
  );
});

Link.displayName = "Link";

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

      • बाहरी लिंक का पता लगाना:
        सहायक फ़ंक्शन checkIsExternalLink यह निर्धारित करता है कि कोई URL बाहरी है या नहीं। बाहरी लिंक अपरिवर्तित रहते हैं क्योंकि उन्हें स्थानीयकरण की आवश्यकता नहीं होती।

      • वर्तमान लोकेल प्राप्त करना:
        useLocale हुक वर्तमान लोकेल प्रदान करता है (जैसे, फ्रेंच के लिए fr)।

      • URL का स्थानीयकरण:
        आंतरिक लिंक के लिए (यानी, गैर-बाहरी), getLocalizedUrl का उपयोग URL को स्वचालित रूप से वर्तमान लोकेल के साथ प्रीफिक्स करने के लिए किया जाता है। इसका मतलब है कि यदि आपका उपयोगकर्ता फ्रेंच में है, तो /about को href के रूप में पास करने से यह /fr/about में बदल जाएगा।

      • लिंक लौटाना:
        घटक एक <a> तत्व लौटाता है जिसमें स्थानीयकृत URL होता है, यह सुनिश्चित करते हुए कि नेविगेशन लोकेल के साथ सुसंगत है।

      इस Link घटक को अपने एप्लिकेशन में एकीकृत करके, आप एक सुसंगत और भाषा-सचेत उपयोगकर्ता अनुभव बनाए रखते हैं, साथ ही बेहतर SEO और उपयोगिता का लाभ उठाते हैं।

    12. अपने बंडल आकार को अनुकूलित करें

      वैकल्पिक

      next-intlayer का उपयोग करते समय, डिफ़ॉल्ट रूप से प्रत्येक पृष्ठ के लिए शब्दकोश बंडल में शामिल होते हैं। बंडल आकार को अनुकूलित करने के लिए, Intlayer एक वैकल्पिक SWC प्लगइन प्रदान करता है जो मैक्रोज़ का उपयोग करके useIntlayer कॉल को बुद्धिमानी से बदलता है। यह सुनिश्चित करता है कि शब्दकोश केवल उन पृष्ठों के बंडल में शामिल हों जो वास्तव में उनका उपयोग करते हैं।

      इस अनुकूलन को सक्षम करने के लिए, @intlayer/swc पैकेज इंस्टॉल करें। एक बार इंस्टॉल हो जाने पर, next-intlayer स्वचालित रूप से प्लगइन का पता लगाएगा और उसका उपयोग करेगा:

      bash
      npm install @intlayer/swc --save-dev
      नोट: यह अनुकूलन केवल Next.js 13 और उच्चतर के लिए उपलब्ध है।

      नोट: यह पैकेज डिफ़ॉल्ट रूप से स्थापित नहीं होता है क्योंकि SWC प्लगइन अभी भी Next.js पर प्रयोगात्मक हैं। यह भविष्य में बदल सकता है।

    TypeScript कॉन्फ़िगर करें

    Intlayer TypeScript का उपयोग करता है और आपके कोडबेस को मजबूत बनाने के लिए मॉड्यूल ऑगमेंटेशन का लाभ उठाता है।

    Autocompletion

    Translation error

    सुनिश्चित करें कि आपकी TypeScript कॉन्फ़िगरेशन में स्वतः उत्पन्न प्रकार शामिल हैं।

    tsconfig.json
    {  // ... आपकी मौजूदा TypeScript कॉन्फ़िगरेशन  "include": [    // ... आपकी मौजूदा TypeScript कॉन्फ़िगरेशन    ".intlayer/**/*.ts", // स्वतः उत्पन्न प्रकार शामिल करें  ],}

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

    यह अनुशंसा की जाती है कि Intlayer द्वारा उत्पन्न फ़ाइलों को अनदेखा करें। इससे आप उन्हें अपने Git रिपॉजिटरी में कमिट करने से बच सकते हैं।

    इसके लिए, आप अपनी .gitignore फ़ाइल में निम्नलिखित निर्देश जोड़ सकते हैं:

    .gitignore
    # Intlayer द्वारा उत्पन्न फ़ाइलों को अनदेखा करें.intlayer
    Next.js
    Next.js 15