Intlayer और Next.js 14 के साथ अंतर्राष्ट्रीयकरण (i18n) शुरू करना

Intlayer क्या है?

Intlayer एक अभिनव, ओपन-सोर्स अंतर्राष्ट्रीयकरण (i18n) लाइब्रेरी है, जिसे आधुनिक वेब अनुप्रयोगों में बहुभाषी समर्थन को सरल बनाने के लिए डिज़ाइन किया गया है। Intlayer नवीनतम Next.js 14 फ्रेमवर्क के साथ सहजता से एकीकृत होता है, जिसमें इसका शक्तिशाली App Router शामिल है। यह Server Components के साथ कुशल रेंडरिंग के लिए अनुकूलित है और Turbopack (Next.js >= 15 से) के साथ पूरी तरह संगत है।

Intlayer के साथ, आप कर सकते हैं:

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

Intlayer Next.js 12, 13, 14, और 15 के साथ संगत है। यदि आप Next.js Page Router का उपयोग कर रहे हैं, तो इस गाइड को देखें। Next.js 15 के साथ या बिना turbopack के लिए, इस गाइड को देखें।

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

चरण 1: डिपेंडेंसी इंस्टॉल करें

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

npm install intlayer next-intlayer

• intlayer

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

• next-intlayer

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

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

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

// भाषाओं और कॉन्फ़िगरेशन के लिए Intlayer आयात करेंimport { Locales, type IntlayerConfig } from "intlayer";const config: IntlayerConfig = {  internationalization: {    locales: [      Locales.ENGLISH,      Locales.FRENCH,      Locales.SPANISH,      // आपकी अन्य भाषाएं    ],    defaultLocale: Locales.ENGLISH,  },};export default config;

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

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

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

// Intlayer को Next.js के साथ एकीकृत करने के लिए आयात करेंimport { withIntlayer } from "next-intlayer/server";/** @type {import('next').NextConfig} */const nextConfig = {};export default withIntlayer(nextConfig);

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

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

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

// Intlayer मिडलवेयर को आयात और निर्यात करेंexport { intlayerMiddleware as middleware } from "next-intlayer/middleware";export const config = {  matcher:    "/((?!api|static|assets|robots|sitemap|sw|service-worker|manifest|.*\..*|_next).*)",};

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

अपने एप्लिकेशन के रूट्स से मेल खाने के लिए matcher पैरामीटर को अनुकूलित करें। अधिक विवरण के लिए, Next.js दस्तावेज़ देखें।

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

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

// रूट लेआउट घटक को परिभाषित करेंimport type { PropsWithChildren, FC } from "react";import "./globals.css";const RootLayout: FC<PropsWithChildren> = ({ children }) => children;export default RootLayout;

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

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

// डायनामिक लोकेल लेआउट घटक को परिभाषित करेंimport type { Next14LayoutIntlayer } from "next-intlayer";import { Inter } from "next/font/google";import { getHTMLTextDir } from "intlayer";const inter = Inter({ subsets: ["latin"] });const LocaleLayout: Next14LayoutIntlayer = ({  children,  params: { locale },}) => (  <html lang={locale} dir={getHTMLTextDir(locale)}>    <body className={inter.className}>{children}</body>  </html>);import { Inter } from "next/font/google";import { getHTMLTextDir } from "intlayer";const inter = Inter({ subsets: ["latin"] });const LocaleLayout = ({ children, params: { locale } }) => (  <html lang={locale} dir={getHTMLTextDir(locale)}>    <body className={inter.className}>{children}</body>  </html>);export default LocaleLayout;

[locale] पथ खंड का उपयोग लोकेल को परिभाषित करने के लिए किया जाता है। उदाहरण: /en-US/about en-US को संदर्भित करेगा और /fr/about fr को।

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

export { generateStaticParams } from "next-intlayer"; // डालने के लिए पंक्तिconst LocaleLayout: Next14LayoutIntlayer = ({  children,  params: { locale },}) => {  /*... कोड का शेष भाग*/};export default LocaleLayout;

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

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

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

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

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

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

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

import { ClientComponentExample } from "@components/ClientComponentExample";import { ServerComponentExample } from "@components/ServerComponentExample";import { type Next14PageIntlayer, IntlayerClientProvider } from "next-intlayer";import { IntlayerServerProvider, useIntlayer } from "next-intlayer/server";const Page: Next14PageIntlayer = ({ params: { locale } }) => {  const content = useIntlayer("page", locale);  return (    <>      <p>        {content.getStarted.main}        <code>{content.getStarted.pageLink}</code>      </p>      <IntlayerServerProvider locale={locale}>        <IntlayerClientProvider locale={locale}>          <ServerComponentExample />          <ClientComponentExample />        </IntlayerClientProvider>      </IntlayerServerProvider>    </>  );};export default Page;

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

"use client";import type { FC } from "react";import { useIntlayer } from "next-intlayer";const ClientComponentExample: FC = () => {  const content = useIntlayer("client-component-example"); // संबंधित सामग्री घोषणा बनाएँ  return (    <div>      <h2>{content.title} </h2>      <p>{content.content}</p>    </div>  );};

import type { FC } from "react";import { useIntlayer } from "next-intlayer/server";const ServerComponentExample: FC = () => {  const content = useIntlayer("server-component-example"); // संबंधित सामग्री घोषणा बनाएँ  return (    <div>      <h2>{content.title} </h2>      <p>{content.content}</p>    </div>  );};

यदि आप अपनी सामग्री को string एट्रिब्यूट में उपयोग करना चाहते हैं, जैसे alt, title, href, aria-label, आदि, तो आपको फ़ंक्शन के मान को कॉल करना होगा, जैसे:

jsx

<img src={content.image.src.value} alt={content.image.value} />

useIntlayer हुक के बारे में अधिक जानने के लिए, डॉक्यूमेंटेशन देखें।

(वैकल्पिक) चरण 8: अपने मेटाडेटा का अंतर्राष्ट्रीयकरण

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

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

मेटाडेटा ऑप्टिमाइजेशन के बारे में अधिक जानें Next.js के आधिकारिक दस्तावेज़ पर।

(वैकल्पिक) चरण 9: अपने sitemap.xml और robots.txt का अंतर्राष्ट्रीयकरण

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

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

import type { MetadataRoute } from "next";import { getMultilingualUrls } from "intlayer";const getAllMultilingualUrls = (urls: string[]) =>  urls.flatMap((url) => Object.values(getMultilingualUrls(url)) as string[]);const robots = (): MetadataRoute.Robots => ({  rules: {    userAgent: "*",    allow: ["/"],    disallow: getAllMultilingualUrls(["/hi/login", "/hi/register"]),  },  host: "https://example.com",  sitemap: `https://example.com/sitemap.xml`,});export default robots;

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

(वैकल्पिक) चरण 10: अपनी सामग्री की भाषा बदलें

अपनी सामग्री की भाषा बदलने के लिए, आप useLocale हुक द्वारा प्रदान की गई setLocale फ़ंक्शन का उपयोग कर सकते हैं। यह फ़ंक्शन आपको एप्लिकेशन की लोकेल सेट करने और सामग्री को तदनुसार अपडेट करने की अनुमति देता है।

"use client";import {  Locales,  getHTMLTextDir,  getLocaleName,  getLocalizedUrl,} from "intlayer";import { useLocale } from "next-intlayer";import { type FC } from "react";import Link from "next/link";const LocaleSwitcher: FC = () => {  const { locale, pathWithoutLocale, availableLocales, setLocale } =    useLocale();  return (    <div>      <button popoverTarget="localePopover">{getLocaleName(locale)}</button>      <div id="localePopover" popover="auto">        {availableLocales.map((localeItem) => (          <Link            href={getLocalizedUrl(pathWithoutLocale, localeItem)}            hrefLang={localeItem}            key={localeItem}            aria-current={locale === localeItem ? "page" : undefined}            onClick={(e) => {              e.preventDefault();              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 हुक
• getLocaleName हुक
• getLocalizedUrl हुक
• getHTMLTextDir हुक
• hrefLang एट्रिब्यूट
• lang एट्रिब्यूट
• dir एट्रिब्यूट
• aria-current एट्रिब्यूट

(वैकल्पिक) चरण 11: एक स्थानीयकृत लिंक घटक बनाना

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

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

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

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

"use client";import { getLocalizedUrl } from "intlayer";import NextLink, { type LinkProps as NextLinkProps } from "next/link";import { useLocale } from "next-intlayer";import { forwardRef, PropsWithChildren, type ForwardedRef } from "react";/** * यह उपयोगिता फ़ंक्शन जांचता है कि कोई URL बाहरी है या नहीं। * यदि URL http:// या https:// से शुरू होता है, तो इसे बाहरी माना जाता है। */export const checkIsExternalLink = (href?: string): boolean =>  /^https?:///.test(href ?? "");/** * एक कस्टम लिंक घटक जो href एट्रिब्यूट को वर्तमान लोकेल के आधार पर अनुकूलित करता है। * आंतरिक लिंक के लिए, यह `getLocalizedUrl` का उपयोग करता है URL को लोकेल के साथ प्रीफिक्स करने के लिए (जैसे, /fr/about)। * यह सुनिश्चित करता है कि नेविगेशन समान लोकेल संदर्भ के भीतर बना रहे। */export const Link = forwardRef<  HTMLAnchorElement,  PropsWithChildren<NextLinkProps>>(({ href, children, ...props }, ref: ForwardedRef<HTMLAnchorElement>) => {  const { locale } = useLocale();  const isExternalLink = checkIsExternalLink(href.toString());  // यदि लिंक आंतरिक है और एक मान्य href प्रदान किया गया है, तो स्थानीयकृत URL प्राप्त करें।  const hrefI18n: NextLinkProps["href"] =    href && !isExternalLink ? getLocalizedUrl(href.toString(), locale) : href;  return (    <NextLink href={hrefI18n} ref={ref} {...props}>      {children}    </NextLink>  );});Link.displayName = "Link";

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

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

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

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

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

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

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

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

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

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

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

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

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

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

आगे बढ़ें