# Intlayer और Next.js 15 App Router के साथ अंतर्राष्ट्रीयकरण (i18n) शुरू करना## Intlayer क्या है?**Intlayer** एक नवोन्मेषी, ओपन-सोर्स अंतर्राष्ट्रीयकरण (i18n) पुस्तकालय है जिसे आधुनिक वेब अनुप्रयोगों में बहुभाषी समर्थन को सरल बनाने के लिए डिज़ाइन किया गया है। Intlayer नवीनतम **Next.js 15** फ्रेमवर्क के साथ seamlessly एकीकृत होता है, जिसमें इसकी शक्तिशाली **App Router** शामिल है। यह कुशल रेंडरिंग के लिए **Server Components** के साथ काम करने के लिए अनुकूलित किया गया है और [**Turbopack**](https://nextjs.org/docs/architecture/turbopack) के साथ पूरी तरह से संगत है।Intlayer के साथ, आप कर सकते हैं:- **घटक स्तर पर स्पष्ट शब्दकोशों का उपयोग करके अनुवाद का आसानी से प्रबंधन करें।**- **धारणाओं, मार्गों और सामग्री का गतिशील रूप से स्थानीयकरण करें।**- **क्लाइंट-साइड और सर्वर-साइड घटकों में अनुवाद तक पहुँच प्राप्त करें।**- **ऑटो-जेनरेटेड प्रकारों के साथ TypeScript समर्थन सुनिश्चित करें, जो ऑटो-कम्पलीशन और त्रुटि पहचान में सुधार करता है।**- **गतिशील लोकल खोज और स्विचिंग जैसी उन्नत सुविधाओं का लाभ उठाएँ।**> Intlayer Next.js 12, 13, 14, और 15 के साथ संगत है। यदि आप Next.js Page Router का उपयोग कर रहे हैं, तो आप इस [गाइड](/hi/doc/environment/nextjs/next-with-Page-Router) को संदर्भित कर सकते हैं। Next.js 12, 13, और 14 के लिए App Router के साथ, इस [गाइड](/hi/doc/environment/nextjs/14) का संदर्भ लें।---## एक Next.js अनुप्रयोग में Intlayer सेट अप करने के लिए चरण-दर-चरण गाइड### चरण 1: निर्भरता स्थापित करेंnpm का उपयोग करके आवश्यक पैकेज स्थापित करें:```bash packageManager="npm"npm install intlayer next-intlayer```
intlayer
यह मुख्य पैकेज है जो कॉन्फ़िगरेशन प्रबंधन, अनुवाद, सामग्री घोषणा, ट्रांसपिलेशन, और CLI कमांड्स के लिए अंतर्राष्ट्रीयकरण उपकरण प्रदान करता है।
next-intlayer
यह पैकेज Intlayer को Next.js के साथ एकीकृत करता है। यह Next.js अंतर्राष्ट्रीयकरण के लिए संदर्भ प्रदाता और हुक प्रदान करता है। इसके अतिरिक्त, इसमें प्राप्त करना शामिल है कि Intlayer को Webpack या Turbopack के साथ एकीकृत करने के लिए Next.js प्लगइन, साथ ही उपयोगकर्ता की पसंदीदा लोकल का पता लगाने, कुकीज़ का प्रबंधन करने, और URL रीडायरेक्शन संभालने के लिए मिडलवेयर शामिल है।
चरण 2: अपने प्रोजेक्ट कॉन्फ़िगर करें
अपने अनुप्रयोग की भाषाओं को कॉन्फ़िगर करने के लिए एक कॉन्फ़िग फ़ाइल बनाएं:
import { Locales, type IntlayerConfig } from "intlayer";const config: IntlayerConfig = { internationalization: { locales: [ Locales.ENGLISH, Locales.FRENCH, Locales.SPANISH, // आपके अन्य स्थानीयकरण ], defaultLocale: Locales.ENGLISH, },};export default config;
इस कॉन्फ़िगरेशन फ़ाइल के माध्यम से, आप स्थानीयकृत URLs, मिडलवेयर रीडायरेक्शन, कुकी के नाम, आपकी सामग्री घोषणाओं का स्थान और एक्सटेंशन सेट कर सकते हैं, कंसोल में Intlayer लॉग को अक्षम कर सकते हैं, और अधिक। उपलब्ध पैरामीटर की पूर्ण सूची के लिए, कॉन्फ़िगरेशन दस्तावेज़ का संदर्भ लें।
चरण 3: अपने Next.js कॉन्फ़िगरेशन में Intlayer एकीकृत करें
अपने Next.js सेटअप को Intlayer का उपयोग करने के लिए कॉन्फ़िगर करें:
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: लोकल पहचान के लिए मिडलवेयर कॉन्फ़िगर करें
उपयोगकर्ता की पसंदीदा लोकल का पता लगाने के लिए मिडलवेयर सेट करें:
export { intlayerMiddleware as middleware } from "next-intlayer/middleware";export const config = { matcher: "/((?!api|static|assets|robots|sitemap|sw|service-worker|manifest|.*\\..*|_next).*)",};
intlayerMiddleware का उपयोग उपयोगकर्ता की पसंदीदा लोकल का पता लगाने और उन्हें उपयुक्त URL पर रीडायरेक्ट करने के लिए किया जाता है जैसा कि कॉन्फ़िगरेशन में निर्दिष्ट है। इसके अतिरिक्त, यह उपयोगकर्ता की पसंदीदा लोकल को एक कुकी में सहेजने में सक्षम बनाता है।
चरण 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 { NextLayoutIntlayer } 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}>{children}</body> </html> );};export default LocaleLayout;
[locale] पथ खंड का उपयोग लोकल को परिभाषित करने के लिए किया जाता है। उदाहरण: /en-US/about en-US को संदर्भित करेगा और /fr/about को fr।
फिर, अपने अनुप्रयोग लेआउट में generateStaticParams फ़ंक्शन लागू करें।
export { generateStaticParams } from "next-intlayer"; // जोड़ने के लिए लाइनconst LocaleLayout: NextLayoutIntlayer = async ({ children, params }) => { /*... Rest of the code*/};export default LocaleLayout;
generateStaticParams सुनिश्चित करता है कि आपका अनुप्रयोग सभी लोकल के लिए आवश्यक पृष्ठों का पूर्व-निर्माण करता है, रनटाइम गणना को कम करता है और उपयोगकर्ता अनुभव में सुधार करता है। अधिक जानकारी के लिए, Next.js पर generateStaticParams के बारे में दस्तावेज़ को संदर्भित करें।
चरण 6: अपनी सामग्री की घोषणा करें
अनुवादों को स्टोर करने के लिए अपनी सामग्री घोषणाओं को बनाएं और प्रबंधित करें:
import { t, type DeclarationContent } 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 DeclarationContent;export default pageContent;
आपकी सामग्री की घोषणाएँ आपके अनुप्रयोग में कहीं भी परिभाषित की जा सकती हैं जब तक कि उन्हें contentDir निर्देशिका में शामिल किया जा सके (डिफ़ॉल्ट रूप से, ./src)। और सामग्री की घोषणा फ़ाइल एक्सटेंशन का मेल खाता हो (डिफ़ॉल्ट रूप से, .content.{ts,tsx,js,jsx,mjs,cjs})। अधिक जानकारी के लिए, सामग्री घोषणा दस्तावेज़ को संदर्भित करें।
चरण 7: अपने कोड में सामग्री का उपयोग करें
अपने अनुप्रयोग में अपने सामग्री शब्दकोशों तक पहुँच प्राप्त करें:
import type { FC } from "react";import { ClientComponentExample } from "@components/ClientComponentExample";import { ServerComponentExample } from "@components/ServerComponentExample";import { type NextPageIntlayer, IntlayerClientProvider } from "next-intlayer";import { IntlayerServerProvider, useIntlayer } from "next-intlayer/server";const PageContent: FC = () => { const { title, 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 /> <IntlayerClientProvider locale={locale}> <ClientComponentExample /> </IntlayerClientProvider> </IntlayerServerProvider> </> );};export default Page;
- IntlayerClientProvider का उपयोग क्लाइंट-साइड घटकों को लोकल प्रदान करने के लिए किया जाता है। इसे किसी भी पैरेंट घटक में रखा जा सकता है, जिसमें लेआउट भी शामिल है। हालाँकि, इसे लेआउट में रखना अनुशंसित है क्योंकि Next.js लेआउट को पृष्ठों के बीच साझा करता है, जिससे यह अधिक कुशल बनता है। लेआउट में IntlayerClientProvider का उपयोग करने से आप इसे प्रत्येक पृष्ठ के लिए फिर से शुरू करने से बचते हैं, जिससे प्रदर्शन में सुधार होता है और आपके अनुप्रयोग में एक निरंतर स्थानीयकरण संदर्भ बनाए रखने में मदद मिलती है।
- IntlayerServerProvider का उपयोग सर्वर बच्चों को लोकल प्रदान करने के लिए किया जाता है। इसे लेआउट में सेट नहीं किया जा सकता है।
लेआउट और पृष्ठ एक सामान्य सर्वर संदर्भ साझा नहीं कर सकते क्योंकि सर्वर संदर्भ प्रणाली एक प्रति-अनुरोध डेटा स्टोर (@React के कैश तंत्र के माध्यम से) पर आधारित है, जिसके कारण प्रत्येक "संदर्भ" के लिए अलग हो जाता है एप्लिकेशन के विभिन्न खंडों के लिए पुन: बनाई जाती है। साझा लेआउट में प्रदाता रखना इस अलगाव को तोड़ देगा, सर्वर संदर्भ मूल्यों के सही प्रसार को रोक देगा।
"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> );};
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, आदि, तो आपको फ़ंक्शन के मान को कॉल करना होगा, जैसे:
jsx<img src={content.image.src.value} alt={content.image.value} />
useIntlayer हुक के बारे में अधिक जानने के लिए, दस्तावेज़ को देखें।
(वैकल्पिक) चरण 8: अपने मेटाडेटा का अंतर्राष्ट्रीयकरण
यदि आप अपने मेटाडेटा का अंतर्राष्ट्रीयकरण करना चाहते हैं, जैसे कि अपने पृष्ठ का शीर्षक, तो आप Next.js द्वारा प्रदान की गई generateMetadata फ़ंक्शन का उपयोग कर सकते हैं। फ़ंक्शन के अंदर, अपने मेटाडेटा का अनुवाद करने के लिए getTranslationContent फ़ंक्शन का उपयोग करें।
import { type IConfigLocales, getTranslationContent, 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>) => getTranslationContent(content, locale); /** * प्रत्येक स्थानीयकरण के लिए सभी url बनाने वाली एक वस्तु उत्पन्न करता है। * * उदाहरण: * ```ts * getMultilingualUrls('/about'); * * // लौटता है * // { * // en: '/about', * // fr: '/fr/about', * // es: '/es/about', * // } * ``` */ const multilingualUrls = getMultilingualUrls("/"); 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", }), alternates: { canonical: "/", languages: { ...multilingualUrls, "x-default": "/" }, }, openGraph: { url: multilingualUrls[locale], }, };};// ... अन्य कोड
मेटाडेटा अनुकूलन के बारे में अधिक जानने के लिए आधिकारिक Next.js दस्तावेज़ पर जाएँ।
(वैकल्पिक) चरण 9: अपने sitemap.xml और robots.txt का अंतर्राष्ट्रीयकरण
अपने sitemap.xml और robots.txt का अंतर्राष्ट्रीयकरण करने के लिए, आप Intlayer द्वारा प्रदान की गई getMultilingualUrls फ़ंक्शन का उपयोग कर सकते हैं। यह फ़ंक्शन आपके साइटमैप के लिए बहु-भाषी URLs उत्पन्न करने की अनुमति देता है।
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 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 दस्तावेज़ पर जाएँ। और robots.txt अनुकूलन के लिए आधिकारिक Next.js दस्तावेज़ पर जाएँ।
(वैकल्पिक) चरण 10: अपनी सामग्री की भाषा बदलें
अपनी सामग्री की भाषा बदलने के लिए, आप useLocale हुक द्वारा प्रदान की गई setLocale फ़ंक्शन का उपयोग कर सकते हैं। यह फ़ंक्शन आपको अनुप्रयोग की लोकल को सेट करने और उसके अनुसार सामग्री को अपडेट करने की अनुमति देता है।
"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 ( <ol> {availableLocales.map((localeItem) => ( <li key={localeItem}> <Link href={getLocalizedUrl(pathWithoutLocale, localeItem)} hrefLang={localeItem} aria-current={locale === localeItem ? "page" : /ruundefined} onClick={(e) => { e.preventDefault(); setLocale(localeItem); }} > <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> <span> {/* अपनी लोकल में भाषा - उदाहरण के लिए FR */} {localeItem} </span> </Link> </li> ))} </ol> );};
दस्तावेज़ संदर्भ:
TypeScript कॉन्फ़िगर करें
Intlayer TypeScript के फ़ायदे प्राप्त करने के लिए मॉड्यूल वृद्धि का उपयोग करता है और आपके कोडबेस को मजबूत बनाता है।
सुनिश्चित करें कि आपकी TypeScript कॉन्फ़िगरेशन में ऑटो-जेनरेटेड प्रकार शामिल हैं।
{ // ... आपकी मौजूदा TypeScript कॉन्फ़िगरेशन "include": [ // ... आपकी मौजूदा TypeScript कॉन्फ़िगरेशन "types", // ऑटो-जनरेटेड प्रकारों को शामिल करें ],}
Git कॉन्फ़िगरेशन
यह अनुशंसित है कि Intlayer द्वारा उत्पन्न फ़ाइलों को नज़रअंदाज़ करें। इससे आप उन्हें अपने Git भंडार में कमिट करने से बच सकते हैं।
इसके लिए, आप अपनी .gitignore फ़ाइल में निम्नलिखित निर्देश जोड़ सकते हैं:
# Intlayer द्वारा उत्पन्न फ़ाइलों को नज़रअंदाज़ करें.intlayer
अगर आपके पास इस दस्तावेज़ को सुधारने के लिए कोई विचार है, तो कृपया GitHub पर एक पुल अनुरोध सबमिट करके योगदान देने में संकोच न करें।
दस्तावेज़ के लिए GitHub लिंक