next-i18next VS next-intl VS Intlayer | Next.js अंतर्राष्ट्रीयकरण (i18n)

नीचे तीन लोकप्रिय पुस्तकालयों की संक्षिप्त तुलना दी गई है जो Next.js एप्लिकेशन के अंतर्राष्ट्रीयकरण (i18n) के लिए हैं: next-intl, next-i18next, और Intlayer।

यह दस्तावेज़ मुख्य मानदंडों पर प्रकाश डालता है:

1. आर्किटेक्चर (अनुवादों को उनके घटकों के करीब रखना)
2. TypeScript समर्थन
3. गायब अनुवादों का प्रबंधन
4. सर्वर घटकों का समर्थन
5. Next.js के लिए उन्नत रूटिंग और मिडलवेयर
6. सेटअप की सादगी

यह मार्गदर्शिका Intlayer पर एक गहन नज़र भी प्रदान करती है, यह दिखाते हुए कि यह एक मजबूत विकल्प क्यों हो सकता है—विशेष रूप से Next.js 13+ के लिए, जिसमें App Router और Server Components शामिल हैं।

---

प्रत्येक पुस्तकालय का अवलोकन

1. next-intl

मुख्य ध्यान: स्थानीयकरण के लिए हल्के दृष्टिकोण के साथ त्वरित और आसान सेटअप।

• आर्किटेक्चर: एकल फ़ोल्डर (जैसे, locales/) में अनुवादों को सह-स्थान देने को प्रोत्साहित करता है लेकिन कई रणनीतियों की अनुमति भी देता है। "प्रत्येक घटक के लिए अनुवाद" आर्किटेक्चर को सख्ती से लागू नहीं करता है।
• TypeScript समर्थन: आधारभूत TypeScript एकीकरण। कुछ प्रकार की श्रेष्ठताएँ मौजूद हैं, लेकिन ये आपके अनुवाद फ़ाइलों से TypeScript परिभाषाओं को स्वचालित रूप से उत्पन्न करने पर केंद्रित नहीं हैं।
• गायब अनुवाद: आधारभूत फ़ॉलबैक तंत्र। डिफ़ॉल्ट रूप से, एक कुंजी या डिफ़ॉल्ट स्थानीयकरण स्ट्रिंग पर वापस जाता है। उन्नत गायब अनुवाद परीक्षणों के लिए किसी प्रकार का सुसंगत उपकरण नहीं है।
• सर्वर घटकों का समर्थन: सामान्य तौर पर Next.js 13+ के साथ काम करता है, लेकिन पैटर्न गहरे सर्वर-साइट उपयोग के लिए कम विशेषज्ञ है (जैसे, जटिल गतिशील रूटिंग के साथ सर्वर घटक)।
• रूटिंग और मिडलवेयर: मिडलवेयर समर्थन संभव है लेकिन सीमित। आमतौर पर Next.js Middleware पर स्थानीयकरण पहचान के लिए या स्थानीयकरण पथ को फिर से लिखने के लिए मैनुअल कॉन्फ़िगरेशन पर भरोसा करता है।
• सेटअप की सादगी: बहुत सीधा है। न्यूनतम बॉयलरप्लेट की आवश्यकता है।

का उपयोग करें जब: आप एक सरल दृष्टिकोण चाहते हैं या अपने अनुवादों का प्रबंधन करने में आरामदायक हैं (जैसे कि एक फ़ोल्डर JSON फ़ाइलों के साथ)।

---

2. next-i18next

मुख्य ध्यान: i18next का उपयोग करने वाला एक समय-परीक्षणित समाधान, जो Next.js परियोजनाओं में व्यापक रूप से अपनाया गया है।

• आर्किटेक्चर: अक्सर public/locales फ़ोल्डर में अनुवादों को व्यवस्थित करता है। विशेष रूप से अनुवादों को "निकट" रखने के लिए डिज़ाइन नहीं किया गया है, हालांकि आप मैन्युअल रूप से एक अलग ढाँचा अपना सकते हैं।
• TypeScript समर्थन: उचित TypeScript कवरेज लेकिन टाइपेड अनुवादों और टाइपेड हुक के लिए कस्टम कॉन्फ़िगरेशन की आवश्यकता होती है।
• गायब अनुवाद: i18next इंटरपोलेशन/फ़ॉलबैक प्रदान करता है। हालाँकि, गायब अनुवाद पहचान अक्सर अतिरिक्त सेटअप या थर्ड-पार्टी प्लगइन्स की आवश्यकता होती है।
• सर्वर घटकों का समर्थन: Next.js 13 के साथ बुनियादी उपयोग का दस्तावेज़ है, लेकिन जटिल उपयोग (जैसे, सर्वर घटकों के साथ गहरे एकीकरण, गतिशील रूट जेनरेशन) कठिन हो सकता है।
• रूटिंग और मिडलवेयर: स्थानीयकरण उपपथों के लिए Next.js Middleware और पुनर्लेखन पर भारी निर्भर करता है। अधिक जटिल सेटअप के लिए, आपको उन्नत i18next कॉन्फ़िगरेशन में गोताखोरी करने की आवश्यकता हो सकती है।
• सेटअप की सादगी: i18next का उपयोग करने वाले लोगों के लिए परिचित दृष्टिकोण। हालाँकि, जब उन्नत i18n सुविधाओं (नेमस्पेस, कई फ़ॉलबैक स्थान) की आवश्यकता होती है, तो यह और अधिक बॉयलरप्लेट-गहन हो सकता है।

का उपयोग करें जब: आप पहले से ही i18next पारिस्थितिकी तंत्र के लिए प्रतिबद्ध हैं या आपके पास मौजूदा i18next-आधारित अनुवाद हैं।

---

3. Intlayer

मुख्य ध्यान: Next.js App Router (12, 13, 14, और 15) के लिए विशेष रूप से अनुकूलित एक आधुनिक, ओपन-सोर्स i18n पुस्तकालय जिसमें Server Components और Turbopack का अंतर्निहित समर्थन है।

प्रमुख लाभ

1. आर्किटेक्चर

   • अनुवादों को उनके घटकों के ठीक बगल में रखने को प्रोत्साहित करता है। प्रत्येक पृष्ठ या घटक में अपनी स्वयं की .content.ts (या JSON) फ़ाइल हो सकती है—अब विशाल अनुवाद फ़ोल्डर के माध्यम से बिखरकर खोजने की आवश्यकता नहीं है।
   • यह आपके कोड को अधिक मॉड्यूलर और बनाए रखने योग्य बनाता है, विशेष रूप से बड़े कोड बेस में।

2. TypeScript समर्थन

   • स्वचालित रूप से उत्पन्न प्रकार की परिभाषाएँ: जिस क्षण आप अपनी सामग्री को परिभाषित करते हैं, Intlayer उन प्रकारों को उत्पन्न करता है जो ऑटोकम्पलीट को पावर देते हैं और अनुवाद संबंधित त्रुटियों को पकड़ते हैं।
   • गायब कुंजियों जैसी रनटाइम में त्रुटियों को कम करता है और आपके IDE में सीधे उन्नत ऑटोकम्पलीट प्रदान करता है।

3. गायब अनुवादों का प्रबंधन

   • निर्माण के दौरान, Intlayer गायब अनुवाद कुंजियों का पता लगा सकता है और चेतावनियाँ या त्रुटियाँ फेंक सकता है।
   • यह सुनिश्चित करता है कि आप कभी भी अनुवादों के बीच गायब पाठ के साथ शिप न करें।

4. सर्वर घटकों के लिए ऑप्टिमाइज्ड

   • Next.js App Router और नए Server Components पैराजाइम के साथ पूरी तरह से संगत।
   • सर्वर संदर्भ को आइसोलेट करने के लिए विशेषज्ञ प्रदाता (IntlayerServerProvider, IntlayerClientProvider) प्रदान करता है (Next.js 13+ के साथ काम करते समय महत्वपूर्ण)।

5. उन्नत रूटिंग और मिडलवेयर

   • intlayerMiddleware के लिए एक समर्पित फ़ाइल है जो स्वचालित स्थानीयकरण पहचान (कुकीज़ या ब्राउज़र हैडर के माध्यम से) और उन्नत रूट जेनरेशन करती है।
   • न्यूनतम कॉन्फ़िगरेशन के साथ स्थानीयकृत पथों को गतिशील रूप से संभालता है (जैसे, /en-US/about बनाम /fr/about)।
   • वैकल्पिक भाषा लिंक बनाने के लिए getMultilingualUrls जैसी सहायक विधियाँ प्रदान करता है (SEO के लिए शानदार)।

6. सरलीकृत सेटअप

   • आपकी स्थानीयताओं, डिफ़ॉल्ट स्थानीयता, और एकीकरण प्राथमिकताओं को परिभाषित करने के लिए एकल कॉन्फ़िग फ़ाइल (intlayer.config.ts)।
   • एक रैपर प्लगइन withIntlayer(nextConfig) जो आपके सभी पर्यावरण चर और आपकी सामग्री के लिए वॉचर को इंजेक्ट करता है।
   • कोई बड़ा फ़ॉलबैक कॉन्फ़िगरेशन नहीं—सिस्टम को न्यूनतम घर्षण के साथ "बस काम करना" के लिए बनाया गया है।

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

---

साइड-बाय-साइड फीचर तुलना

---

Intlayer क्यों?

Next.js App Router (संस्करण 13, 14, या 15) पर आधारित टीमों के लिए जो सर्वर घटकों के साथ काम कर रही हैं, Intlayer प्रदान करता है:

1. एक सरलीकृत आर्किटेक्चर

   • प्रत्येक रूट या घटक अपने अनुवादों को रखता है। यह स्पष्टता और बनाए रखने की सुविधा को बढ़ावा देता है।

2. शक्तिशाली TypeScript एकीकरण

   • आपको कम्पाइलर-स्तरीय सुरक्षा मिलती है, "टाइपो-भरे" या गायब अनुवाद कुंजियों से बचना।

3. वास्तविक गायब अनुवाद चेतावनियाँ

   • यदि आप एक कुंजी या भाषा के अनुवाद को भूल जाते हैं, तो आपको निर्माण के समय चेतावनी दी जाएगी (पूर्ण UI के साथ शिप करने के बजाय)।

4. इन-बिल्ट उन्नत रूटिंग

   • स्वचालित स्थानीयकरण पहचान, गतिशील मार्ग निर्माण, और आसान स्थानीयकृत URL प्रबंधन शामिल हैं।
   • मानक intlayerMiddleware को गहरी कस्टम पुनर्लेखन की आवश्यकता नहीं होती है।

5. एक-स्टॉप सेटअप

   • न्यूनतम बॉयलरप्लेट: बस अपने intlayer.config.ts को परिभाषित करें, next.config को withIntlayer के साथ लपेटें, और आधिकारिक मिडलवेयर जोड़ें।
   • दोनों सर्वर और क्लाइंट घटकों के लिए स्पष्ट, सीधी उपयोगिता IntlayerServerProvider और IntlayerClientProvider के माध्यम से।

6. SEO के अनुकूल

   • अंतर्निहित सहायक (getMultilingualUrls, hrefLang गुण, आदि) SEO-अनुपालन पृष्ठों और साइटमैप बनाने को आसान बनाते हैं।

---

उदाहरण: Intlayer कार्रवाई में

नीचे Next.js 15 परियोजना में Intlayer का उपयोग करके एक बहुत संक्षिप्त स्निपेट दर्शाया गया है। पूर्ण विवरण और कोड उदाहरणों के लिए, पूर्ण Intlayer गाइड देखें。

स्टेप-बाय-स्टेप उदाहरण

1. स्थापना और कॉन्फ़िगर करें

   bash

   npm install intlayer next-intlayer

   ts

   // intlayer.config.tsimport { Locales, type IntlayerConfig } from "intlayer";const config: IntlayerConfig = {  internationalization: {    locales: [Locales.ENGLISH, Locales.FRENCH, Locales.SPANISH],    defaultLocale: Locales.ENGLISH,  },};export default config;

2. प्लगइन का उपयोग करें

   ts

   // next.config.mjsimport { withIntlayer } from "next-intlayer/server";/** @type {import('next').NextConfig} */const nextConfig = {};export default withIntlayer(nextConfig);

3. मिडलवेयर जोड़ें

   ts

   // src/middleware.tsexport { intlayerMiddleware as middleware } from "next-intlayer/middleware";export const config = {  matcher:    "/((?!api|static|assets|robots|sitemap|sw|service-worker|manifest|.*\\..*|_next).*)",};

4. एक स्थानीयकृत लेआउट बनाएँ

   tsx

   // src/app/[locale]/layout.tsximport { getHTMLTextDir } from "intlayer";import { NextLayoutIntlayer } from "next-intlayer";const LocaleLayout: NextLayoutIntlayer = async ({ children, params }) => {  const { locale } = params;  return (    <html lang={locale} dir={getHTMLTextDir(locale)}>      <body>{children}</body>    </html>  );};export { generateStaticParams } from "next-intlayer";export default LocaleLayout;

5. सामग्री की घोषणा और उपयोग करें

   tsx

   // src/app/[locale]/page.content.tsimport { t } from "intlayer";export default {  key: "page",  content: {    getStarted: {      main: t({        en: "Get started by editing",        fr: "Commencez par éditer",        es: "Comience por editar",      }),      pageLink: "src/app/page.tsx",    },  },};

   tsx

   // src/app/[locale]/page.tsximport { IntlayerServerProvider } from "next-intlayer/server";import { IntlayerClientProvider, useIntlayer } from "next-intlayer";const PageContent = () => {  const { content } = useIntlayer("page");  return (    <>      <p>{content.getStarted.main}</p>      <code>{content.getStarted.pageLink}</code>    </>  );};export default function Page({ params }) {  return (    <IntlayerServerProvider locale={params.locale}>      <IntlayerClientProvider locale={params.locale}>        <PageContent />      </IntlayerClientProvider>    </IntlayerServerProvider>  );}

---

निष्कर्ष

प्रत्येक समाधान—next-intl, next-i18next, और Intlayer—बहुभाषी Next.js परियोजनाओं के लिए प्रभावी साबित हुआ है। हालाँकि, Intlayer आगे बढ़ता है:

• घटक-स्तरीय अनुवाद आर्किटेक्चर को प्रोत्साहित करना
• Next.js 13+ और Server Components के साथ सहज एकीकरण
• शक्तिशाली TypeScript स्वचालित उत्पन्न सुरक्षा के लिए
• निर्माण के समय गायब अनुवादों का प्रबंधन करना
• उन्नत रूटिंग और मिडलवेयर के साथ सरल, एकल कॉन्फ़िगरेशन दृष्टिकोण प्रदान करना

यदि आप आधुनिक i18n सुविधाओं की तलाश कर रहे हैं जो Next.js App Router के लिए अनुकूलित हैं और एक पूर्ण रूप से टाइप अनुभव की तलाश कर रहे हैं बिना मैन्युअल रूप से फ़ॉलबैक लॉजिक, रूट पुनर्लेखन, या जटिल निर्माण चरणों को तैयार किए, तो Intlayer एक आकर्षक विकल्प है। यह न केवल आपके सेटअप के समय को कम करता है, बल्कि आपकी टीम के लिए अनुवादों के लिए एक अधिक बनाए रखने योग्य, स्केलेबल दृष्टिकोण सुनिश्चित करता है।