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

वीडियोकोड

www.youtube.com

Open embedded page in fullscreen

ide.intlayer.org

Open embedded page in fullscreen

GitHub पर Application Template देखें।

सामग्री सूची

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

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

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

1. 1

   Dependencies इंस्टॉल करें

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

   bash

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

   कोड कॉपी करें

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

   npx intlayer init --interactive
   

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

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

   bash

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

   कोड कॉपी करें

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

   npm install intlayer next-intlayer
   

   • intlayer

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

   • next-intlayer

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

2. 2

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

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

   bash

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

   कोड कॉपी करें

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

   .
   ├── src
   │   ├── app
   │   │   ├── layout.tsx
   │   │   ├── page.content.ts
   │   │   └── page.tsx
   │   ├── components
   │   │   ├── clientComponentExample
   │   │   │   ├── client-component-example.content.ts
   │   │   │   └── ClientComponentExample.tsx
   │   │   ├── localeSwitcher
   │   │   │   ├── localeSwitcher.content.ts
   │   │   │   └── LocaleSwitcher.tsx
   │   │   └── serverComponentExample
   │   │       ├── server-component-example.content.ts
   │   │       └── ServerComponentExample.tsx
   │   └── proxy.ts
   ├── intlayer.config.ts
   ├── next.config.ts
   ├── package.json
   └── tsconfig.json
   

   अगर आप locale routing नहीं चाहते हैं, तो intlayer को एक सरल provider / hook के रूप में उपयोग किया जा सकता है। अधिक जानकारी के लिए इस गाइड देखें।

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

   intlayer.config.ts

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

   कोड कॉपी करें

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

   import { Locales, type IntlayerConfig } from "intlayer";
   
   const config: IntlayerConfig = {
     internationalization: {
       locales: [
         Locales.ENGLISH,
         Locales.FRENCH,
         Locales.SPANISH,
         // आपके अन्य locales
       ],
       defaultLocale: Locales.ENGLISH,
     },
     routing: {
       mode: "search-params", // या `no-prefix` - middleware का पता लगाने के लिए उपयोगी
     },
   };
   
   export default config;
   

   इस कॉन्फ़िगरेशन फाइल के माध्यम से, आप localized URLs, proxy redirection, cookie नाम, अपनी सामग्री घोषणाओं का स्थान और एक्सटेंशन, कंसोल में 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 फ़ंक्शन है। यह build शुरू होने से पहले intlayer dictionaries को तैयार करने की अनुमति देता है। यदि आप इसे अन्य plugins के साथ उपयोग करना चाहते हैं, तो आप इसे await कर सकते हैं। उदाहरण:

   ts

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

   कोड कॉपी करें

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

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

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

   ts

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

   कोड कॉपी करें

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

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

   withIntlayer() Next.js प्लगइन का उपयोग Intlayer को Next.js के साथ इंटीग्रेट करने के लिए किया जाता है। यह content declaration files के निर्माण को सुनिश्चित करता है और development मोड में उनका मॉनिटरिंग करता है। यह Webpack या Turbopack वातावरण में Intlayer के environment variables को परिभाषित करता है। साथ ही यह performance को ऑप्टिमाइज़ करने के लिए aliases प्रदान करता है और server components के साथ संगतता सुनिश्चित करता है।

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

   ts

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

   कोड कॉपी करें

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

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

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

   ts

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

   कोड कॉपी करें

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

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

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

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

   ts

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

   कोड कॉपी करें

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

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

4. 4

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

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

   Intlayer >=9.4Intlayer <9.4

   src/app/layout.tsx

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

   कोड कॉपी करें

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

   import type { Metadata } from "next";
   import type { ReactNode } from "react";
   import "./globals.css";
   import { getHTMLTextDir, getIntlayer } from "intlayer";
   import { getLocale, IntlayerProvider } from "next-intlayer/server";
   export { generateStaticParams } from "next-intlayer";
   
   export const generateMetadata = async (): Promise<Metadata> => {
     const locale = await getLocale();
     const { title, description, keywords } = getIntlayer("metadata", locale);
   
     return {
       title,
       description,
       keywords,
     };
   };
   
   const RootLayout = async ({
     children,
   }: Readonly<{
     children: ReactNode;
   }>) => {
     const locale = await getLocale();
   
     return (
       <html lang={locale} dir={getHTMLTextDir(locale)}>
         <body>
           <IntlayerProvider locale={locale}>{children}</IntlayerProvider>
         </body>
       </html>
     );
   };
   
   export default RootLayout;
   

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

   src/app/layout.tsx

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

   कोड कॉपी करें

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

   import type { Metadata } from "next";
   import type { ReactNode } from "react";
   import "./globals.css";
   import { IntlayerProvider, LocalPromiseParams } from "next-intlayer";
   import { getHTMLTextDir, getIntlayer } from "intlayer";
   import { getLocale } from "next-intlayer/server";
   export { generateStaticParams } from "next-intlayer";
   
   export const generateMetadata = async (): Promise<Metadata> => {
     const locale = await getLocale();
     const { title, description, keywords } = getIntlayer("metadata", locale);
   
     return {
       title,
       description,
       keywords,
     };
   };
   
   const RootLayout = async ({
     children,
   }: Readonly<{
     children: ReactNode;
   }>) => {
     const locale = await getLocale();
   
     return (
       <html lang={locale} dir={getHTMLTextDir(locale)}>
         <body>
           <IntlayerProvider defaultLocale={locale}>{children}</IntlayerProvider>
         </body>
       </html>
     );
   };
   
   export default RootLayout;
   

5. 5

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

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

   src/app/metadata.content.ts

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

   कोड कॉपी करें

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

   import { t, type Dictionary } from "intlayer";
   import { Metadata } from "next";
   
   const metadataContent = {
     key: "metadata",
     content: {
       title: t({
         hi: "मेरा प्रोजेक्ट शीर्षक",
         en: "My Project Title",
         fr: "Le Titre de mon Projet",
         es: "El Título de mi Proyecto",
       }),
   
       description: t({
         hi: "हमारा अभिनव प्लेटफ़ॉर्म खोजें जिसे आपके वर्कफ़्लो को सुव्यवस्थित करने और उत्पादकता बढ़ाने के लिए डिज़ाइन किया गया है।",
         en: "Discover our innovative platform designed to streamline your workflow and boost productivity.",
         fr: "Découvrez notre plateforme innovante conçue pour simplifier votre flux de travail et booster votre productivité.",
         es: "Descubra nuestra plataforma innovadora diseñada para simplificar su flujo de trabajo y aumentar su productividad.",
       }),
   
       keywords: t({
         hi: ["नवाचार", "उत्पादकता", "वर्कफ़्लो", "SaaS"],
         en: ["innovation", "productivity", "workflow", "SaaS"],
         hi: ["नवाचार", "उत्पादकता", "कार्यप्रवाह", "SaaS"],
         fr: ["innovation", "productivité", "flux de travail", "SaaS"],
         es: ["innovación", "productividad", "flujo de trabajo", "SaaS"],
       }),
     },
   } as Dictionary<Metadata>;
   
   export default metadataContent;
   

   src/app/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;
   

   आपकी content घोषणाएँ आपकी एप्लिकेशन में कहीं भी परिभाषित की जा सकती हैं, बशर्ते वे contentDir निर्देशिका (डिफ़ॉल्ट: ./src) में शामिल हों। और content declaration फ़ाइल एक्सटेंशन से मेल खानी चाहिए (डिफ़ॉल्ट: .content.{json,ts,tsx,js,jsx,mjs,cjs,md,mdx,yaml,yml})।

   अधिक जानकारी के लिए, content declaration दस्तावेज़ देखें।

   अधिक विवरण के लिए, content declaration documentation को देखें।

6. 6

   अपने कोड में Content का उपयोग करें

   अपने एप्लिकेशन के दौरान अपने content dictionaries को access करें:

   Intlayer >=9.4

   src/app/page.tsx

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

   कोड कॉपी करें

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

   import type { FC } from "react";
   import { ClientComponentExample } from "@components/clientComponentExample/ClientComponentExample";
   import { ServerComponentExample } from "@components/serverComponentExample/ServerComponentExample";
   import { useIntlayer } from "next-intlayer";
   import { NextPage } from "next";
   
   const PageContent: FC = () => {
     // पृष्ठ सामग्री प्राप्त करें
     const content = useIntlayer("page");
   
     return (
       <>
         <p>{content.getStarted.main}</p>
         <code>{content.getStarted.pageLink}</code>
       </>
     );
   };
   
   const Page: NextPage = () => (
     <>
       <PageContent />
       <ServerComponentExample />
       <ClientComponentExample />
     </>
   );
   
   export default Page;
   

   • IntlayerProvider को एक बार root layout में mount किया जाता है। यह server और client दोनों components को locale प्रदान करता है, इसलिए pages अब खुद को wrap नहीं करते हैं।
   • [locale] path segment के बिना locale हमेशा request से आता है — x-intlayer-locale header जो Intlayer proxy द्वारा सेट किया जाता है, फिर locale cookie — जिसे server hooks अपने आप पढ़ते हैं जब provider नहीं चला हो।

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

   src/app/page.tsx

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

   कोड कॉपी करें

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

   import type { FC } from "react";
   import { ClientComponentExample } from "@components/clientComponentExample/ClientComponentExample";
   import { ServerComponentExample } from "@components/serverComponentExample/ServerComponentExample";
   import {
     IntlayerServerProvider,
     useIntlayer,
     getLocale,
   } from "next-intlayer/server";
   import { NextPage } from "next";
   import { headers, cookies } from "next/headers";
   
   const PageContent: FC = () => {
     const content = useIntlayer("page");
   
     return (
       <>
         <p>{content.getStarted.main}</p>
         <code>{content.getStarted.pageLink}</code>
       </>
     );
   };
   
   const Page: NextPage = async () => {
     const locale = await getLocale();
   
     return (
       <IntlayerServerProvider locale={locale}>
         <PageContent />
         <ServerComponentExample />
         <ClientComponentExample />
       </IntlayerServerProvider>
     );
   };
   
   export default Page;
   

   • IntlayerClientProvider क्लाइंट-साइड कॉम्पोनेंट्स को locale प्रदान करने के लिए उपयोग किया जाता है। इसे किसी भी पैरेंट कॉम्पोनेंट में रखा जा सकता है, जिसमें layout भी शामिल है। हालांकि, इसे layout में रखना अनुशंसित है क्योंकि Next.js पृष्ठों के बीच layout को साझा करता है, जिससे यह अधिक कुशल हो जाता है। layout में IntlayerClientProvider का उपयोग करने से आप इसे हर पृष्ठ के लिए फिर से इनिशियलाइज़ करने से बचते हैं, प्रदर्शन में सुधार होता है और आपके एप्लिकेशन में एक सुसंगत localization context बना रहता है।

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

     Layout और page एक सामान्य server context साझा नहीं कर सकते क्योंकि server context सिस्टम per-request data store (via React's cache mechanism) पर आधारित है, जिससे एप्लिकेशन के अलग-अलग segments के लिए हर "context" पुनः बनाया जाता है। provider को किसी साझा layout में रखने से यह isolation टूट जाएगी, और आपके server components तक server context मानों का सही propagation असंभव हो जाएगा।

   src/components/clientComponentExample/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/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 implementation मिलता है। यही call दोनों तरफ से काम करती है।

   src/components/serverComponentExample/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

   लोकल की पहचान के लिए प्रॉक्सी कॉन्फ़िगर करें

   वैकल्पिक

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

   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 का उपयोग उपयोगकर्ता की पसंदीदा locale का पता लगाने और उन्हें उस उपयुक्त URL पर रीडायरेक्ट करने के लिए किया जाता है जैसा कि configuration में निर्दिष्ट है। इसके अतिरिक्त, यह उपयोगकर्ता की पसंदीदा locale को कुकी में सहेजने की सुविधा भी देता है।

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

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

   वैकल्पिक

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

   src/components/localeSwitcher/LocaleSwitcher.tsx

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

   कोड कॉपी करें

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

   "use client";
   
   import type { FC } from "react";
   import { Locales, getHTMLTextDir, getLocaleName } from "intlayer";
   import { useLocale } from "next-intlayer";
   
   export const LocaleSwitcher: FC = () => {
     const { locale, availableLocales, setLocale } = useLocale();
   
     return (
       <div>
         <button popoverTarget="localePopover">{getLocaleName(locale)}</button>
         <div id="localePopover" popover="auto">
           {availableLocales.map((localeItem) => (
             <button
               key={localeItem}
               aria-current={locale === localeItem ? "page" : undefined}
               onClick={() => setLocale(localeItem)}
             >
               <span>
                 {/* Locale - उदाहरण: FR */}
                 {localeItem}
               </span>
               <span>
                 {/* Language in its own Locale - उदाहरण: Français */}
                 {getLocaleName(localeItem, locale)}
               </span>
               <span dir={getHTMLTextDir(localeItem)} lang={localeItem}>
                 {/* Language in current Locale - उदाहरण: Francés (वर्तमान Locale: Locales.SPANISH) */}
                 {getLocaleName(localeItem)}
               </span>
               <span dir="ltr" lang={Locales.ENGLISH}>
                 {/* अंग्रेज़ी में भाषा - उदाहरण: French */}
                 {getLocaleName(localeItem, Locales.ENGLISH)}
               </span>
             </button>
           ))}
         </div>
       </div>
     );
   };
   

   एक वैकल्पिक तरीका है useLocale हुक द्वारा प्रदान किए गए setLocale फ़ंक्शन का उपयोग करना। यह फ़ंक्शन पेज को prefetch करने की अनुमति नहीं देगा। अधिक जानकारी के लिए useLocale हुक दस्तावेज़ देखें।

   डॉक्यूमेंटेशन संदर्भ:

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

9. 9

   Server Actions में वर्तमान locale प्राप्त करें

   वैकल्पिक

   यदि आपको Server Action के अंदर सक्रिय locale की आवश्यकता है (उदा., ईमेल लोकलाइज़ करने या locale-aware लॉजिक चलाने के लिए), तो 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 निर्धारित करने के लिए एक क्रमिक रणनीति का पालन करता है:

   1. सबसे पहले, यह प्रॉक्सी द्वारा सेट किए गए संभव locale मान के लिए request headers की जाँच करता है
   2. अगर headers में कोई locale नहीं मिलता, तो यह cookies में संग्रहीत locale की तलाश करता है
   3. यदि कोई cookie नहीं मिलता, तो यह उपयोगकर्ता की पसंदीदा भाषा का पता लगाने का प्रयास करता है, जो उनके ब्राउज़र सेटिंग्स से ली जाती है
   4. अंततः, यह एप्लिकेशन में कॉन्फ़िगर किए गए डिफ़ॉल्ट locale पर लौट आता है

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

10. 10

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

    वैकल्पिक

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

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

    bash

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

    कोड कॉपी करें

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

    npm install @intlayer/swc --save-dev
    

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

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

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

Turbopack पर डिक्शनरी परिवर्तनों की निगरानी

जब आप Turbopack को अपने development server के रूप में next dev कमांड के साथ उपयोग करते हैं, तो dictionary में किए गए परिवर्तन डिफ़ॉल्ट रूप से स्वतः पहचान में नहीं आते।

यह सीमा इसलिए होती है क्योंकि Turbopack आपके content files में बदलावों की निगरानी करने के लिए webpack plugins को parallel रूप से नहीं चला सकता। इस समस्याओं का समाधान करने के लिए, आपको intlayer watch कमांड का उपयोग करना होगा ताकि development server और Intlayer build watcher दोनों एक ही समय पर चल सकें।

{
  // ... Your existing package.json configurations
  "scripts": {
    // ... Your existing scripts configurations
    "dev": "intlayer watch --with 'next dev'",
  },
}

यदि आप next-intlayer@<=6.x.x का उपयोग कर रहे हैं, तो Next.js 16 ऐप्लिकेशन को Turbopack के साथ सही ढंग से कार्य करने के लिए --turbopack फ्लैग बनाए रखना आवश्यक है। इस सीमा से बचने के लिए हम next-intlayer@>=7.x.x का उपयोग करने की सलाह देते हैं।

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

Intlayer TypeScript के फायदे उठाने और आपके कोडबेस को मजबूत बनाने के लिए module augmentation का उपयोग करता है।

सुनिश्चित करें कि आपका TypeScript कॉन्फ़िगरेशन autogenerated types को शामिल करता है।

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

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

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

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

# Intlayer द्वारा जनरेट की गई फ़ाइलों को नज़रअंदाज़ करें
.intlayer

VS Code एक्सटेंशन

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

Install from the VS Code Marketplace

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

• Autocompletion अनुवाद कुंजियों के लिए।
• गायब अनुवादों के लिए Real-time error detection।
• इनलाइन प्रीव्यू अनुवादित सामग्री का पूर्वावलोकन।
• क्विक एक्शन्स अनुवादों को आसानी से बनाने और अपडेट करने के लिए।

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

आगे बढ़ें

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