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

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

    www.youtube.com
    ide.intlayer.org
    intlayer-next-16-template.vercel.app

    GitHub पर एप्लिकेशन टेम्प्लेट देखें।

    विषय-सूची

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

    नेक्स्ट-इंटल या आई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 सेटअप करने के लिए चरण-दर-चरण मार्गदर्शिका

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

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

      यहाँ अंतिम संरचना है जो हम बनाएंगे:

      bash
      .
├── src
│   ├── app
│   │   ├── [locale]
│   │   │   ├── layout.tsx            # Intlayer प्रदाता के लिए लोकल लेआउट
│   │   │   ├── page.content.ts
│   │   │   └── page.tsx
│   │   └── layout.tsx                # शैली और वैश्विक प्रदाताओं के लिए रूट लेआउट
│   ├── components
│   │   ├── client-component-example.content.ts
│   │   ├── ClientComponentExample.tsx
│   │   ├── LocaleSwitcher
│   │   │   ├── localeSwitcher.content.ts
│   │   │   └── LocaleSwitcher.tsx
│   │   ├── server-component-example.content.ts
│   │   └── ServerComponentExample.tsx
│   └── proxy.ts
├── intlayer.config.ts
├── next.config.ts
├── package.json
└── tsconfig.json
      यदि आप लोकल रूटिंग नहीं चाहते हैं, तो intlayer को एक साधारण प्रदाता / हुक के रूप में उपयोग किया जा सकता है। अधिक जानकारी के लिए यह मार्गदर्शिका देखें।

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

      intlayer.config.ts
      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 को एकीकृत करें

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

      next.config.ts
      import type { NextConfig } from "next";
import { withIntlayer } from "next-intlayer/server";

const nextConfig: NextConfig = {/* यहाँ कॉन्फ़िग विकल्प */};

export default withIntlayer(nextConfig);
      withIntlayer() Next.js प्लगइन का उपयोग Intlayer को Next.js के साथ एकीकृत करने के लिए किया जाता है। यह कंटेंट डिक्लेरेशन फाइलों के निर्माण को सुनिश्चित करता है और विकास मोड में उनकी निगरानी करता है। यह Webpack या Turbopack वातावरण के भीतर Intlayer पर्यावरण चर को परिभाषित करता है। इसके अतिरिक्त, यह प्रदर्शन को अनुकूलित करने के लिए उपनाम प्रदान करता है और सर्वर कंपोनेंट्स के साथ संगतता सुनिश्चित करता है।

      withIntlayer() फ़ंक्शन एक प्रॉमिस फ़ंक्शन है। यह बिल्ड शुरू होने से पहले Intlayer शब्दकोशों को तैयार करने की अनुमति देता है। यदि आप इसे अन्य प्लगइन्स के साथ उपयोग करना चाहते हैं, तो आप इसे await कर सकते हैं। उदाहरण:

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

export default nextConfigWithOtherPlugins;

      यदि आप इसे सिंक्रोनसली उपयोग करना चाहते हैं, तो आप withIntlayerSync() फ़ंक्शन का उपयोग कर सकते हैं। उदाहरण:

      ts
      const nextConfig = withIntlayerSync(nextConfig);
const nextConfigWithOtherPlugins = withOtherPlugins(nextConfig);

export default nextConfigWithOtherPlugins;

      Intlayer स्वचालित रूप से पता लगाता है कि आपका प्रोजेक्ट कमांड-लाइन फ्लैग --webpack, --turbo, या --turbopack के साथ-साथ आपके वर्तमान Next.js संस्करण के आधार पर webpack या Turbopack का उपयोग कर रहा है या नहीं।

      चूँकि next>=16 है, यदि आप Rspack का उपयोग कर रहे हैं, तो आपको Turbopack को अक्षम करके Intlayer को स्पष्ट रूप से webpack कॉन्फ़िगरेशन का उपयोग करने के लिए बाध्य करना होगा:

      ts
      withRspack(withIntlayer(nextConfig, { enableTurbopack: false }));

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

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

      src/app/layout.tsx
      import type { PropsWithChildren, FC } from "react";
import "./globals.css";

const RootLayout: FC<PropsWithChildren> = ({ children }) => (
  // आप अभी भी बच्चों को अन्य प्रोवाइडर्स के साथ लपेट सकते हैं, जैसे `next-themes`, `react-query`, `framer-motion`, आदि।
  <>{children}</>
);

export default RootLayout;
      RootLayout कॉम्पोनेंट को खाली रखने से <html> टैग में lang और dir एट्रिब्यूट्स सेट करने की अनुमति मिलती है।

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

      src/app/[locale]/layout.tsx
      import { type NextLayoutIntlayer } from "next-intlayer";
import { IntlayerProvider } from "next-intlayer/server";
import { Inter } from "next/font/google";
import { getHTMLTextDir } from "intlayer";

const inter = Inter({ subsets: ["latin"] });

const LocaleLayout: NextLayoutIntlayer = async ({ children, params }) => {
  const { locale } = await params;
  return (
    <html lang={locale} dir={getHTMLTextDir(locale)}>
      <body className={inter.className}>
        <IntlayerProvider locale={locale}>{children}</IntlayerProvider>
      </body>
    </html>
  );
};

export default LocaleLayout;
      एक एकल IntlayerProvider पेड़ के दोनों हिस्सों को कवर करता है: यह request-scoped server context को seed करता है जिसे server hooks द्वारा पढ़ा जाता है, और client provider को mount करता है ताकि client components को समान locale प्राप्त हो।
      src/app/[locale]/layout.tsx
      import { type NextLayoutIntlayer, IntlayerClientProvider } from "next-intlayer";
import { Inter } from "next/font/google";
import { getHTMLTextDir } from "intlayer";

const inter = Inter({ subsets: ["latin"] });

const LocaleLayout: NextLayoutIntlayer = async ({ children, params }) => {
  const { locale } = await params;
  return (
    <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 जैसे पाथ के माध्यम से सुलभ होंगे। डिफ़ॉल्ट लोकल को रूट पेज के रूप में सेट करने के लिए, चरण 7 में proxy सेटअप को देखें।

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

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

const LocaleLayout: NextLayoutIntlayer = async ({ children, params }) => {
  /*... बाकी कोड */
};

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

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

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

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

const pageContent = {
  key: "page",
  content: {
    getStarted: {
      main: t({
        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})।
      अधिक विवरण के लिए, सामग्री घोषणा प्रलेखन देखें।

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

      अपने पूरे एप्लिकेशन में अपने content dictionaries को access करें:

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

const PageContent: FC = () => {
  // पेज कंटेंट प्राप्त करें
  const content = useIntlayer("page");

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

const Page: NextPageIntlayer = () => (
  <>
    <PageContent />
    <ServerComponentExample />

    <ClientComponentExample />
  </>
);

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

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

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

const PageContent: FC = () => {
  const content = useIntlayer("page");

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

const Page: NextPageIntlayer = async ({ params }) => {
  const { locale } = await params;

  return (
    <IntlayerServerProvider locale={locale}>
      <PageContent />
      <ServerComponentExample />

      <ClientComponentExample />
    </IntlayerServerProvider>
  );
};

export default Page;
      • IntlayerClientProvider क्लाइंट-साइड कंपोनेंट्स को लोकल प्रदान करने के लिए उपयोग किया जाता है। इसे किसी भी पैरेंट कंपोनेंट में रखा जा सकता है, जिसमें लेआउट भी शामिल है। हालांकि, इसे लेआउट में रखना अनुशंसित है क्योंकि Next.js पेजों के बीच लेआउट कोड साझा करता है, जिससे यह अधिक कुशल हो जाता है। लेआउट में IntlayerClientProvider का उपयोग करके, आप हर पेज के लिए इसे पुनः आरंभ करने से बचते हैं, प्रदर्शन में सुधार करते हैं और आपके एप्लिकेशन में एक सुसंगत स्थानीयकरण संदर्भ बनाए रखते हैं।

      • IntlayerServerProvider सर्वर चाइल्ड्स को लोकल प्रदान करने के लिए उपयोग किया जाता है। इसे लेआउट में सेट नहीं किया जा सकता।

        लेआउट और पेज एक सामान्य सर्वर संदर्भ साझा नहीं कर सकते क्योंकि सर्वर संदर्भ प्रणाली प्रति अनुरोध डेटा स्टोर (React के कैश React's cache मैकेनिज्म के माध्यम से) पर आधारित है, जिससे एप्लिकेशन के विभिन्न सेगमेंट के लिए प्रत्येक "संदर्भ" पुनः बनाया जाता है। प्रदाता को साझा लेआउट में रखना इस पृथक्करण को तोड़ देगा, जिससे आपके सर्वर कंपोनेंट्स को सर्वर संदर्भ मानों का सही प्रसार नहीं हो पाएगा।
      src/components/ClientComponentExample.tsx
      "use client";

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

export 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";

export const ServerComponentExample: FC = () => {
  const content = useIntlayer("server-component-example"); // संबंधित content declaration बनाएं

  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 वाला मिलता है। यही call दोनों तरफ़ काम करती है।
      src/components/ServerComponentExample.tsx
      import type { FC } from "react";
import { useIntlayer } from "next-intlayer/server";

export 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 हुक के बारे में अधिक जानने के लिए, डॉक्यूमेंटेशन देखें।
      यदि आपका ऐप पहले से मौजूद है, तो आप हजारों घटकों को एक सेकंड में बदलने के लिए Intlayer कंपाइलर को एक्सट्रैक्ट कमांड के साथ उपयोग कर सकते हैं।

    7. लोकल डिटेक्शन के लिए प्रॉक्सी कॉन्फ़िगर करें

      वैकल्पिक

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

      src/proxy.ts
      export { intlayerProxy as proxy } from "next-intlayer/proxy";

export const config = {
  matcher:
    "/((?!api|static|assets|robots|sitemap|sw|service-worker|manifest|.*\\..*|_next).*)",
};
      intlayerProxy का उपयोग उपयोगकर्ता की पसंदीदा भाषा का पता लगाने और उन्हें उपयुक्त URL पर पुनर्निर्देशित करने के लिए किया जाता है जैसा कि कॉन्फ़िगरेशन में निर्दिष्ट है। इसके अतिरिक्त, यह उपयोगकर्ता की पसंदीदा भाषा को कुकी में सहेजने की सुविधा भी प्रदान करता है।
      Intlayer v9 के बाद से, यह middleware routing.enableProxy विकल्प को सम्मान करता है (true डिफ़ॉल्ट रूप से)। इस फ़ाइल को हटाए बिना इसे pass-through में बदलने के लिए अपने कॉन्फ़िगरेशन में routing.enableProxy: false सेट करें। v9 release notes देखें।
      यदि आपको कई प्रॉक्सी को एक साथ जोड़ने की आवश्यकता है (उदाहरण के लिए, प्रमाणीकरण या कस्टम प्रॉक्सी के साथ intlayerProxy), तो Intlayer अब multipleProxies नामक एक सहायक प्रदान करता है।
      ts
      import { multipleProxies, intlayerProxy } from "next-intlayer/proxy";
import { customProxy } from "@utils/customProxy";

export const proxy = multipleProxies([intlayerProxy, customProxy]);

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

      वैकल्पिक

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

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

const metadataContent = {
  key: "page-metadata",
  content: {
    title: t({
      en: "Create Next App",
      fr: "Créer une application Next.js",
      es: "Crear una aplicación Next.js",
    }),
    description: t({
      en: "Generated by create next app",
      fr: "Généré par create next app",
      es: "Generado por create next app",
    }),
  },
} satisfies Dictionary<Metadata>;

export default metadataContent;
      src/app/[locale]/layout.tsx or src/app/[locale]/page.tsx
      import { getIntlayer, getMultilingualUrls } from "intlayer";
import type { Metadata } from "next";
import type { LocalPromiseParams } from "next-intlayer";

export const generateMetadata = async ({
  params,
}: LocalPromiseParams): Promise<Metadata> => {
  const { locale } = await params;

  const metadata = getIntlayer("page-metadata", locale);

  /**
   * प्रत्येक लोकल के लिए सभी URL वाले ऑब्जेक्ट को जनरेट करता है।
   *
   * उदाहरण:
   * ```ts
   *  getMultilingualUrls('/about');
   *
   *  // रिटर्न करता है
   *  // {
   *  //   en: '/about',
   *  //   fr: '/fr/about',
   *  //   es: '/es/about',
   *  // }
   * ```
   */
  const multilingualUrls = getMultilingualUrls("/");
  const localizedUrl =
    multilingualUrls[locale as keyof typeof multilingualUrls];

  return {
    ...metadata,
    alternates: {
      canonical: localizedUrl,
      languages: { ...multilingualUrls, "x-default": "/" },
    },
    openGraph: {
      url: localizedUrl,
    },
  };
};

// ... बाकी कोड
      ध्यान दें कि next-intlayer से आयातित getIntlayer फ़ंक्शन आपकी सामग्री को IntlayerNode में लपेट कर लौटाता है, जो विज़ुअल एडिटर के साथ एकीकरण की अनुमति देता है। इसके विपरीत, intlayer से आयातित getIntlayer फ़ंक्शन आपकी सामग्री को सीधे बिना अतिरिक्त गुणों के लौटाता है।

      वैकल्पिक रूप से, आप अपने मेटाडेटा को घोषित करने के लिए 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 { LocalPromiseParams } from "next-intlayer";

export const generateMetadata = async ({
  params,
}: LocalPromiseParams): Promise<Metadata> => {
  const { locale } = await params;
  const t = <T>(content: IConfigLocales<T>) => getTranslation(content, locale);

  return {
    title: t<string>({
      en: "My title",
      fr: "Mon titre",
      es: "Mi título",
    }),
    description: t({
      en: "My description",
      fr: "Ma description",
      es: "Mi descripción",
    }),
  };
};

// ... बाकी कोड
      आधिकारिक 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"),
        "x-default": "https://example.com",
      },
    },
  },
  {
    url: "https://example.com/login",
    alternates: {
      languages: {
        ...getMultilingualUrls("https://example.com/login"),
        "x-default": "https://example.com/login",
      },
    },
  },
  {
    url: "https://example.com/register",
    alternates: {
      languages: {
        ...getMultilingualUrls("https://example.com/register"),
        "x-default": "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(["/login", "/register"]),
  },
  host: "https://example.com",
  sitemap: `https://example.com/sitemap.xml`,
});

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

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

      वैकल्पिक

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

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

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

export 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)}
            key={localeItem}
            aria-current={locale === localeItem ? "page" : undefined}
            onClick={() => setLocale(localeItem)}
            replace // यह सुनिश्चित करेगा कि ब्राउज़र का "पीछे जाएँ" बटन पिछले पृष्ठ पर पुनर्निर्देशित करेगा
          >
            <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 हुक द्वारा प्रदान किए गए setLocale फ़ंक्शन का उपयोग करना है। यह फ़ंक्शन पृष्ठ के प्रीफ़ेचिंग की अनुमति नहीं देगा। अधिक जानकारी के लिए useLocale हुक दस्तावेज़ देखें।
      आप भाषा बदलने पर कस्टम फ़ंक्शन को ट्रिगर करने के लिए 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" पृष्ठ के लिंक पर क्लिक करता है, तो उन्हें /about के बजाय /fr/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 type { PropsWithChildren, FC } from "react";

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

/**
 * एक कस्टम लिंक घटक जो वर्तमान लोकल के आधार पर href विशेषता को अनुकूलित करता है।
 * आंतरिक लिंक के लिए, यह URL को लोकल (उदा. /fr/about) के साथ प्रीफ़िक्स करने के लिए `getLocalizedUrl` का उपयोग करता है।
 * यह सुनिश्चित करता है कि नेविगेशन उसी लोकल संदर्भ के भीतर रहे।
 */
export const Link: FC<PropsWithChildren<NextLinkProps>> = ({
  href,
  children,
  ...props
}) => {
  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} {...props}>
      {children}
    </NextLink>
  );
};

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

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

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

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

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

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

    12. सर्वर एक्शन्स (Server Actions) में वर्तमान लोकेल प्राप्त करें

      वैकल्पिक

      यदि आपको सर्वर एक्शन (Server Action) के भीतर सक्रिय लोकेल की आवश्यकता है (उदाहरण के लिए, ईमेल को स्थानीयकृत करने या लोकेल-जागरूक लॉजिक चलाने के लिए), तो 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();

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

      getLocale फ़ंक्शन उपयोगकर्ता के लोकेल को निर्धारित करने के लिए एक कैस्केडिंग रणनीति का पालन करता है:

      1. सबसे पहले, यह अनुरोध हेडर में एक लोकेल मान की जांच करता है जो प्रॉक्सी द्वारा सेट किया गया हो सकता है
      2. यदि हेडर में कोई लोकेल नहीं मिलता है, तो यह कुकीज़ में संग्रहीत लोकेल की तलाश करता है
      3. यदि कोई कुकी नहीं मिलती है, तो यह उनके ब्राउज़र सेटिंग्स से उपयोगकर्ता की पसंदीदा भाषा का पता लगाने का प्रयास करता है
      4. अंतिम उपाय के रूप में, यह एप्लिकेशन के कॉन्फ़िगर किए गए डिफ़ॉल्ट लोकेल पर वापस आ जाता है

      यह उपलब्ध संदर्भ के आधार पर सबसे उपयुक्त लोकेल का चयन सुनिश्चित करता है।

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

      वैकल्पिक

      जब आप 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 में wrap करना होगा। इसका मतलब है कि आप अपने Page / Layout component के top level पर useIntlayer का सीधे use नहीं कर सकेंगे।

      </Step>

    14. अपने घटकों की सामग्री निकालें

      वैकल्पिक

      15. यदि आपके पास मौजूदा कोडबेस है, तो हजारों फ़ाइलों को बदलना समय लेने वाला हो सकता है।

      इस प्रक्रिया को आसान बनाने के लिए, Intlayer आपके घटकों को बदलने और सामग्री निकालने के लिए एक कंपाइलर / एक्सट्रैक्टर का प्रस्ताव करता है।

      इसे सेट करने के लिए, आप अपनी intlayer.config.ts फ़ाइल में एक compiler अनुभाग जोड़ सकते हैं:

      intlayer.config.ts
      import { type IntlayerConfig } from "intlayer";

const config: IntlayerConfig = {
  // ... आपका शेष कॉन्फ़िगरेशन
  compiler: {
    /**
     * इंगित करता है कि क्या कंपाइलर सक्षम होना चाहिए।
     */
    enabled: true,

    /**
     * आउटपुट फ़ाइलों का पथ परिभाषित करता है
     */
    output: ({ fileName, extension }) => `./${fileName}${extension}`,

    /**
     * इंगित करता है कि क्या घटकों को बदलने के बाद सहेजा जाना चाहिए। उस तरह से, कंपाइलर को ऐप बदलने के लिए केवल एक बार चलाया जा सकता है, और फिर इसे हटाया जा सकता है।
     */
    saveComponents: false,

    /**
     * शब्दकोश कुंजी उपसर्ग
     */
    dictionaryKeyPrefix: "",
  },
};

export default config;

      अपने घटकों को बदलने और सामग्री निकालने के लिए एक्सट्रैक्टर चलाएँ

      bash
      npx intlayer extract
      v9 के बाद से, intlayerCompiler को intlayer प्लगइन में शामिल किया गया है। इसलिए आपको इसे मैन्युअली जोड़ने की आवश्यकता नहीं है।
      bash
      npm install @intlayer/babel --save-dev
      babel.config.js
      const {
  intlayerExtractBabelPlugin,
  getExtractPluginOptions,
} = require("@intlayer/babel");

module.exports = {
  presets: ["next/babel"],
  plugins: [
    // घटकों से शब्दकोशों में सामग्री निकालें
    [intlayerExtractBabelPlugin, getExtractPluginOptions()],
  ],
};
      bash
      npm run build # या npm run dev

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

    Translation error

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

    tsconfig.json
    {
  // ... आपके मौजूदा TypeScript कॉन्फ़िगरेशन
  "include": [
    // ... आपके मौजूदा TypeScript कॉन्फ़िगरेशन
    ".intlayer/**/*.ts", // स्वचालित रूप से उत्पन्न प्रकार शामिल करें
  ],
}
    यदि आप next-intlayer@<=6.x.x का उपयोग कर रहे हैं, तो आपको Next.js 16 एप्लिकेशन को Turbopack के साथ सही ढंग से काम करने के लिए --turbopack फ़्लैग रखना होगा। हम इस सीमा से बचने के लिए next-intlayer@>=7.x.x का उपयोग करने की अनुशंसा करते हैं।

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

    Intlayer module augmentation का उपयोग करता है ताकि TypeScript के लाभों को प्राप्त किया जा सके और आपके codebase को मजबूत किया जा सके।

    Autocompletion

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

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

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

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

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

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

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

    Turbopack पर शब्दकोश परिवर्तनों की निगरानी करें

    अपने Intlayer के साथ विकास अनुभव में सुधार करने के लिए, आप आधिकारिक Intlayer VS Code Extension को install कर सकते हैं।

    जब next dev --turbopack कमांड के साथ विकास सर्वर के रूप में Turbopack का उपयोग किया जाता है, तो शब्दकोश परिवर्तन डिफ़ॉल्ट रूप से स्वचालित रूप से पता नहीं चलते हैं।

    यह सीमा इसलिए होती है क्योंकि Turbopack आपकी सामग्री फ़ाइलों में परिवर्तनों की निगरानी के लिए समानांतर में webpack प्लगइन्स नहीं चला सकता है। इसके समाधान के लिए, आपको विकास सर्वर और Intlayer बिल्ड वॉचर दोनों को एक साथ चलाने के लिए intlayer watch कमांड का उपयोग करना होगा।

    package.json
    {
  // ... आपकी मौजूदा package.json कॉन्फ़िगरेशन
  "scripts": {
    // ... आपकी मौजूदा स्क्रिप्ट कॉन्फ़िगरेशन
    "dev": "intlayer watch --with 'next dev'",
  },
}

    extension के उपयोग के बारे में अधिक विवरण के लिए, Intlayer VS Code Extension documentation देखें।

    आगे बढ़ें

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

    intlayer-cliNext.js 14 और ऐप राउटर