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

विषय-सूची

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

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

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

वीडियोCodeDemo

www.youtube.com

Open embedded page in fullscreen

ide.intlayer.org

Open embedded page in fullscreen

next-15-intlayer-template-xt83.vercel.app

Open embedded page in fullscreen

GitHub पर Application Template देखें।

1. 1

   निर्भरताएँ स्थापित करें

   npm का उपयोग करके आवश्यक पैकेज स्थापित करें:

   bash

   सामग्री कॉपी करें

   कोड कॉपी करें

   कोड को क्लिपबोर्ड पर कॉपी करें

   npx intlayer init --interactive
   

   --interactive ध्वज (flag) वैकल्पिक है। यदि आप एक AI एजेंट हैं तो intlayer-cli init का उपयोग करें।

   यह कमांड आपके एनवायरनमेंट को डिटेक्ट करेगी और आवश्यक पैकेज इंस्टॉल करेगी। उदाहरण के लिए:

   bash

   सामग्री कॉपी करें

   कोड कॉपी करें

   कोड को क्लिपबोर्ड पर कॉपी करें

   npm install intlayer next-intlayer
   

   • intlayer

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

   • next-intlayer

   • next-intlayer

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

2. 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

   सामग्री कॉपी करें

   कोड कॉपी करें

   कोड को क्लिपबोर्ड पर कॉपी करें

   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. 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() फ़ंक्शन एक promise फ़ंक्शन है। यह बिल्ड शुरू होने से पहले intlayer dictionaries को तैयार करने की अनुमति देता है। यदि आप इसे अन्य plugins के साथ उपयोग करना चाहते हैं, तो आप इसे await कर सकते हैं। उदाहरण:

   tsx

   सामग्री कॉपी करें

   कोड कॉपी करें

   कोड को क्लिपबोर्ड पर कॉपी करें

   const nextConfig = await withIntlayer(nextConfig);
   const nextConfigWithOtherPlugins = withOtherPlugins(nextConfig);
   
   export default nextConfigWithOtherPlugins;
   

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

   tsx

   सामग्री कॉपी करें

   कोड कॉपी करें

   कोड को क्लिपबोर्ड पर कॉपी करें

   const nextConfig = withIntlayerSync(nextConfig);
   const nextConfigWithOtherPlugins = withOtherPlugins(nextConfig);
   
   export default nextConfigWithOtherPlugins;
   

4. 4

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

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

   src/app/layout.tsx

   सामग्री कॉपी करें

   कोड कॉपी करें

   कोड को क्लिपबोर्ड पर कॉपी करें

   import type { PropsWithChildren, FC } from "react";
   import "./globals.css";
   
   const RootLayout: FC<PropsWithChildren> = ({ children }) => children;
   
   export default RootLayout;
   

   RootLayout घटक को खाली रखने से आप lang और dir विशेषताओं को <html> टैग पर सेट कर सकते हैं।

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

   Intlayer >=9.4Intlayer <9.4

   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;
   

   एक single IntlayerProvider tree के दोनों हिस्सों को cover करता है: यह request-scoped server context को seed करता है जिसे server hooks द्वारा read किया जाता है, और client provider को mount करता है ताकि client components को same locale प्राप्त हो।

   src/app/[locale]/layout.tsx

   सामग्री कॉपी करें

   कोड कॉपी करें

   कोड को क्लिपबोर्ड पर कॉपी करें

   import { type NextLayoutIntlayer, IntlayerClientProvider } from "next-intlayer";
   import { Inter } from "next/font/google";
   import { IntlayerClientProvider } from "next-intlayer";
   import { getHTMLTextDir } from "intlayer";
   
   const inter = Inter({ subsets: ["latin"] });
   
   // `LocaleLayout` एक लेआउट कंपोनेंट है जो स्थानीय भाषा के अनुसार HTML टैग के `lang` और `dir` एट्रिब्यूट सेट करता है।
   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 में middleware सेटअप देखें।

   फिर, अपने एप्लिकेशन लेआउट में 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'; के साथ काम करता है ताकि पृष्ठ सभी locales के लिए पहले से निर्मित हों।

5. 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. 6

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

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

   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 किया जाता है। यह server और client दोनों components को locale प्रदान करता है, इसलिए pages अब अपने आप को wrap नहीं करते हैं।
   • Server hooks locale को इसी क्रम में resolve करते हैं: call site पर पास किया गया locale, फिर provider द्वारा seeded किया गया server context, फिर request के साथ किया गया locale (Intlayer proxy द्वारा सेट किया गया x-intlayer-locale header, फिर locale cookie)। यह अंतिम चरण वह है जो client-side navigation पर content को सही रखता है जो केवल page segment को re-render करता है, जहां layout — और इसके साथ provider — दोबारा नहीं चलता है।

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

   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 तंत्र के माध्यम से) पर आधारित है, जिससे एप्लिकेशन के विभिन्न सेगमेंट के लिए प्रत्येक "संदर्भ" पुनः बनाया जाता है। प्रदाता को साझा लेआउट में रखने से यह पृथक्करण टूट जाएगा, जिससे आपके सर्वर कंपोनेंट्स को सही सर्वर संदर्भ मानों का प्रसार नहीं हो पाएगा।

     लेआउट और पेज एक सामान्य सर्वर संदर्भ साझा नहीं कर सकते क्योंकि सर्वर संदर्भ प्रणाली प्रति अनुरोध डेटा स्टोर (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>
     );
   };
   

   Intlayer >=9.4Intlayer <9.4

   src/components/ServerComponentExample.tsx

   सामग्री कॉपी करें

   कोड कॉपी करें

   कोड को क्लिपबोर्ड पर कॉपी करें

   import type { FC } from "react";
   import { useIntlayer } from "next-intlayer";
   
   export 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 सर्वर 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 हुक के बारे में अधिक जानने के लिए, प्रलेखन देखें।

7. 7

   स्थान पहचान के लिए मिडलवेयर कॉन्फ़िगर करें

   वैकल्पिक

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

   src/middleware.ts

   सामग्री कॉपी करें

   कोड कॉपी करें

   कोड को क्लिपबोर्ड पर कॉपी करें

   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 विकल्प को सम्मानित करता है (true डिफ़ॉल्ट रूप से)। इसे pass-through में बदलने के लिए अपने कॉन्फ़िगरेशन में routing.enableProxy: false सेट करें बिना इस फ़ाइल को हटाए। v9 release notes देखें।

   यदि आपको कई middlewares को एक साथ chain करने की आवश्यकता है (उदाहरण के लिए, authentication या custom middlewares के साथ intlayerMiddleware), Intlayer अब multipleMiddlewares नामक एक helper प्रदान करता है।

   ts

   सामग्री कॉपी करें

   कोड कॉपी करें

   कोड को क्लिपबोर्ड पर कॉपी करें

   import {
     multipleMiddlewares,
     intlayerMiddleware,
   } from "next-intlayer/middleware";
   import { customMiddleware } from "@utils/customMiddleware";
   
   export const middleware = multipleMiddlewares([
     intlayerMiddleware,
     customMiddleware,
   ]);
   

8. 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 फ़ंक्शन आपके कंटेंट को सीधे बिना अतिरिक्त गुणों के लौटाता है।

   मेटाडेटा अनुकूलन के बारे में अधिक जानें आधिकारिक Next.js दस्तावेज़ में।

9. 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";
   
   // सभी बहुभाषी URL प्राप्त करें
   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 दस्तावेज़ पर। robots.txt अनुकूलन के बारे में अधिक जानें आधिकारिक Next.js दस्तावेज़ पर।

10. 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)}
                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 हुक द्वारा प्रदान किया गया setLocale फ़ंक्शन उपयोग करना। यह फ़ंक्शन पेज को प्रीफ़ेच करने की अनुमति नहीं देगा और पेज को पुनः लोड करेगा।

    इस मामले में, router.push का उपयोग किए बिना पुनर्निर्देशन के, केवल आपका सर्वर-साइड कोड सामग्री की भाषा को बदल देगा।

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

    प्रलेखन संदर्भ:

    • useLocale हुक
    • getLocaleName हुक
    • getLocalizedUrl हुक
    • getHTMLTextDir हुक
    • hrefLang attribute
    • lang attribute
    • dir attribute
    • aria-current attribute

11. 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 type { PropsWithChildren, FC } from "react";
    
    /**
     * उपयोगिता फ़ंक्शन यह जांचने के लिए कि दिया गया URL बाहरी है या नहीं।
     * यदि URL http:// या https:// से शुरू होता है, तो इसे बाहरी माना जाता है।
     */
    export const checkIsExternalLink = (href?: string): boolean =>
      /^https?:\/\//.test(href ?? "");
    
    /**
     * एक कस्टम Link कॉम्पोनेंट जो वर्तमान लोकल के आधार पर href एट्रिब्यूट को अनुकूलित करता है।
     * आंतरिक लिंक के लिए, यह `getLocalizedUrl` का उपयोग करता है ताकि URL के आगे लोकल जोड़ा जा सके (जैसे, /fr/about)।
     * यह सुनिश्चित करता है कि नेविगेशन उसी लोकल संदर्भ के भीतर रहे।
     */
    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 का स्थानीयकरण:
      आंतरिक लिंक (अर्थात् गैर-बाहरी) के लिए, getLocalizedUrl का उपयोग वर्तमान भाषा के साथ URL को स्वचालित रूप से उपसर्गित करने के लिए किया जाता है। इसका मतलब है कि यदि आपका उपयोगकर्ता फ्रेंच में है, तो /about को href के रूप में पास करने पर यह /fr/about में बदल जाएगा।

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

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

12. 12

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

    वैकल्पिक

    यदि आपको Server Action के अंदर सक्रिय locale की आवश्यकता है (उदाहरण के लिए, ईमेल को स्थानीयकृत करने या 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 फ़ंक्शन उपयोगकर्ता के locale को निर्धारित करने के लिए एक cascading strategy का पालन करता है:

    1. सबसे पहले, यह request headers में एक locale value की जांच करता है जो middleware द्वारा सेट की गई हो सकती है
    2. यदि headers में कोई locale नहीं मिलता है, तो यह cookies में संग्रहीत locale को खोजता है
    3. यदि कोई cookie नहीं मिलता है, तो यह उपयोगकर्ता की browser settings से पसंदीदा भाषा का पता लगाने का प्रयास करता है
    4. अंतिम उपाय के रूप में, यह application के कॉन्फ़िगर किए गए default locale पर वापस आता है

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

13. 13

    अपने bundle size को अनुकूलित करें

    वैकल्पिक

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

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

    bash

    सामग्री कॉपी करें

    कोड कॉपी करें

    कोड को क्लिपबोर्ड पर कॉपी करें

    npm install @intlayer/swc --save-dev
    

    नोट: यह अनुकूलन केवल Next.js 13 और उससे ऊपर के लिए उपलब्ध है।

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

एक्सटेंशन का उपयोग कैसे करें इसके बारे में अधिक विवरण के लिए, Intlayer VS Code Extension documentation देखें।

आगे बढ़ें

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