Author:
    Aymeric PINEAU
    Creation:2024-12-06Last update:2026-06-23

    Intlayer का उपयोग करके अपनी Next.js 14 और App Router वेबसाइट का अनुवाद करें | अंतर्राष्ट्रीयकरण (i18n)

    विषय-सूची

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

    नेक्स्ट-इंटल या आई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, और agent skills, AI एजेंटों के लिए डेवलपर अनुभव (DX) को और भी आसान बनाने के लिए।

    स्वचालन

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

    प्रदर्शन

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

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

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

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

    ide.intlayer.org
    intlayer-next-14-template.vercel.app

    GitHub पर Application Template देखें।

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

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

      bash
      npx intlayer init --interactive
      --interactive ध्वज (flag) वैकल्पिक है। यदि आप एक AI एजेंट हैं तो intlayer-cli init का उपयोग करें।
      यह कमांड आपके एनवायरनमेंट को डिटेक्ट करेगी और आवश्यक पैकेज इंस्टॉल करेगी। उदाहरण के लिए:
      bash
      npm install intlayer next-intlayer

      • 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 पर्यावरण चर को परिभाषित करता है। इसके अतिरिक्त, यह प्रदर्शन को अनुकूलित करने के लिए उपनाम प्रदान करता है और सर्वर घटकों के साथ संगतता सुनिश्चित करता है।

      withIntlayer() फ़ंक्शन एक promise फ़ंक्शन है। यदि आप इसे अन्य plugins के साथ उपयोग करना चाहते हैं, तो आप इसे await कर सकते हैं। उदाहरण:

      tsx
      const nextConfig = await withIntlayer(nextConfig);
const nextConfigWithOtherPlugins = withOtherPlugins(nextConfig);

export default nextConfigWithOtherPlugins;

    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 पर रीडायरेक्ट करने के लिए किया जाता है। इसके अतिरिक्त, यह उपयोगकर्ता की पसंदीदा लोकेल को कुकी में सहेजने में सक्षम बनाता है।
      Intlayer v9 के बाद से, यह middleware routing.enableProxy option को सम्मान करता है (true डिफ़ॉल्ट रूप से)। इस फ़ाइल को हटाए बिना इसे pass-through में बदलने के लिए अपने configuration में routing.enableProxy: false सेट करें। v9 release notes देखें।
      अपने एप्लिकेशन के रूट्स से मेल खाने के लिए matcher पैरामीटर को अनुकूलित करें। अधिक विवरण के लिए, Next.js दस्तावेज़ देखें।
      यदि आपको कई middlewares को एक साथ जोड़ना है (उदाहरण के लिए, intlayerMiddleware को authentication या custom middlewares के साथ), Intlayer अब multipleMiddlewares नामक एक helper प्रदान करता है।
      ts
      import {
  multipleMiddlewares,
  intlayerMiddleware,
} from "next-intlayer/middleware";
import { customMiddleware } from "@utils/customMiddleware";

export const middleware = multipleMiddlewares([
  intlayerMiddleware,
  customMiddleware,
]);

    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, IntlayerProvider } 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}>
      <IntlayerProvider locale={locale}>{children}</IntlayerProvider>
    </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;
      एक एकल IntlayerProvider पेड़ के दोनों हिस्सों को कवर करता है: यह request-scoped server context को seed करता है जो server hooks द्वारा पढ़ा जाता है, और client provider को mount करता है ताकि client components को समान locale प्राप्त हो।
      [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,md,mdx,yaml,yml})।
      अधिक विवरण के लिए, सामग्री घोषणा प्रलेखन देखें।

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

      अपने एप्लिकेशन में अपने कंटेंट डिक्शनरीज़ को एक्सेस करें:

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

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

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

      <ServerComponentExample />
      <ClientComponentExample />
    </>
  );
};

export default Page;
      • IntlayerProvider को locale layout में एक बार mount किया जाता है। यह server और client दोनों components को locale प्रदान करता है, इसलिए pages अब खुद को wrap नहीं करते हैं।
      • Server hooks locale को इस क्रम में resolve करते हैं: call site पर pass किया गया locale, फिर provider द्वारा seeded server context, फिर request के साथ carry किया गया locale (Intlayer proxy द्वारा set की गई x-intlayer-locale header, फिर locale cookie)। यह अंतिम चरण यह सुनिश्चित करता है कि client-side navigation पर content सही रहे जो केवल page segment को re-render करता है, जहां layout — और इसके साथ provider — फिर से run नहीं होता है।

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

      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 का उपयोग सर्वर बच्चों को लोकेल प्रदान करने के लिए किया जाता है। इसे लेआउट में सेट नहीं किया जा सकता।
      Layout और page एक common server context साझा नहीं कर सकते क्योंकि server context system एक per-request data store पर आधारित है (via React's cache mechanism), जिससे प्रत्येक "context" application के विभिन्न segments के लिए re-create होता है। Provider को एक shared layout में रखने से यह isolation टूट जाएगी, जिससे server context values का सही propagation आपके server components तक नहीं हो पाएगा।
      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";

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

  return (
    <div>
      <h2>{content.title}</h2>
      <p>{content.content}</p>
    </div>
  );
};
      next-intlayer isomorphic import path है: react-server export condition server components को ambient-locale implementation देता है, जबकि client components को context-backed implementation मिलता है। यही call दोनों sides पर काम करती है।
      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-intlayer से imported getIntlayer function आपकी content को IntlayerNode में wrapped करके return करता है, जो visual editor के साथ integration की अनुमति देता है। इसके विपरीत, intlayer से imported getIntlayer function आपकी content को बिना किसी अतिरिक्त properties के directly return करता है।
      मेटाडेटा ऑप्टिमाइजेशन के बारे में अधिक जानें 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>
  );
};
      एक वैकल्पिक तरीका useLocale hook द्वारा प्रदान किए गए setLocale फ़ंक्शन का उपयोग करना है। यह फ़ंक्शन पृष्ठ को prefetch करने की अनुमति नहीं देगा। अधिक विवरण के लिए useLocale hook documentation देखें।
      आप onLocaleChange विकल्प में एक फ़ंक्शन सेट कर सकते हैं ताकि जब लोकेल परिवर्तित हो तो एक कस्टम फ़ंक्शन को ट्रिगर किया जा सके।
      src/components/LocaleSwitcher.tsx
      "use client";

import { useRouter } from "next/navigation";
import { useLocale } from "next-intlayer";
import { getLocalizedUrl } from "intlayer";

// ... बाकी कोड

const router = useRouter();
const { setLocale } = useLocale({
  onLocaleChange: (locale) => {
    router.push(getLocalizedUrl(pathWithoutLocale, locale));
  },
});

return (
  <button onClick={() => setLocale(Locales.FRENCH)}>फ्रेंच में बदलें</button>
);

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

    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. अपने बंडल आकार को अनुकूलित करें

      वैकल्पिक

      यदि आपको एक Server Action के अंदर active locale की आवश्यकता है (उदाहरण के लिए, ईमेल को localize करने या locale-aware logic चलाने के लिए), तो next-intlayer/server से getLocale को कॉल करें:

      src/app/actions/getLocale.ts
      "use server";

import { getLocale } from "next-intlayer/server";

export const myServerAction = async () => {
  const locale = await getLocale();

  // locale के साथ कुछ करें
};

      getLocale फ़ंक्शन user के locale को निर्धारित करने के लिए एक cascading strategy का पालन करता है:

      1. पहले, यह request headers में एक locale value को check करता है जो middleware द्वारा set की गई हो सकती है
      2. यदि headers में कोई locale नहीं मिलता है, तो यह cookies में stored locale को खोजता है
      3. यदि कोई cookie नहीं मिलता है, तो यह user की browser settings से preferred language को detect करने का प्रयास करता है
      4. अंतिम उपाय के रूप में, यह application के configured default locale पर fallback करता है

      यह उपलब्ध context के आधार पर सबसे उपयुक्त locale को चुना जाता है।

    13. अपने bundle size को optimize करें

      वैकल्पिक

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

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

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

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

      14. नोट: यदि आप विकल्प को importMode: 'dynamic' या importMode: 'fetch' के रूप में सेट करते हैं (आपके dictionary कॉन्फ़िगरेशन में), तो यह Suspense पर निर्भर करेगा, इसलिए आपको अपनी useIntlayer कॉल को एक Suspense boundary में लपेटना होगा। इसका मतलब है कि आप useIntlayer को सीधे अपने Page / Layout component के शीर्ष स्तर पर उपयोग नहीं कर सकेंगे। </Step>

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

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

    Autocompletion

    Translation error

    सुनिश्चित करें कि आपकी TypeScript कॉन्फ़िगरेशन में ऑटो-जेनरेटेड टाइप्स शामिल हैं।

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

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

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

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

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

    VS कोड एक्सटेंशन

    Intlayer के साथ अपने विकास अनुभव को बेहतर बनाने के लिए, आप आधिकारिक Intlayer VS Code एक्सटेंशन इंस्टॉल कर सकते हैं।

    VS Code मार्केटप्लेस से इंस्टॉल करें

    यह एक्सटेंशन प्रदान करता है:

    • अनुवाद कुंजियों के लिए ऑटोकम्प्लीशन।
    • अनुवादों के लिए रियल-टाइम त्रुटि पहचान।
    • अनुवादित सामग्री के इनलाइन पूर्वावलोकन।
    • तेजी से क्रियाएं जो अनुवादों को आसानी से बनाने और अपडेट करने में मदद करती हैं।

    विस्तृत जानकारी के लिए, एक्सटेंशन का उपयोग कैसे करें, देखें Intlayer VS Code एक्सटेंशन दस्तावेज़।

    आगे बढ़ें

    आगे बढ़ने के लिए, आप विज़ुअल एडिटर को लागू कर सकते हैं या अपनी सामग्री को CMS का उपयोग करके बाहरी रूप से प्रबंधित कर सकते हैं।

    Next.jsNext.js 15