Next.js

next-intl या सीधे i1n SDK का उपयोग करके Next.js के साथ i1n को एकीकृत करें।

सेटअप

अपने Next.js प्रोजेक्ट में i1n init चलाएँ। CLI आपके लोकेल/ डायरेक्टरी में नेस्टेड JSON फॉर्मेट को कॉन्फ़िगर करता है, यदि next-intl मौजूद है तो उसे ऑटो-डिटेक्ट करता है।

i1n ऐप राउटर और पेज राउटर दोनों के साथ काम करता है। आप i1n SDK को स्टैंडअलोन मोड में उपयोग कर सकते हैं या इसे ब्रिज मोड के माध्यम से next-intl से कनेक्ट कर सकते हैं।

स्टैंडअलोन मोड

i1n से init और t आयात करें, अपने अनुवाद संसाधन लोड करें, और सीधे अपने घटकों में t() का उपयोग करें। स्वचालित रूप से उत्पन्न i1n.d.ts फ़ाइल पूर्ण प्रकार सुरक्षा और IDE ऑटो-कंप्लीट प्रदान करती है।

यह दृष्टिकोण next-intl को पूरी तरह से बदल देता है। संसाधनों को लोड करने के लिए init() का उपयोग करें और भाषाओं को स्विच करने के लिए setLocale() का उपयोग करें। किसी अतिरिक्त i18n लाइब्रेरी की आवश्यकता नहीं है।

next-intl के साथ ब्रिज मोड

यदि आपकी परियोजना में पहले से ही next-intl का उपयोग हो रहा है, तो इसे एक ही पंक्ति में i1n से कनेक्ट करें: registerI1n((key, params) => nextIntlT(key, params))। यह आपकी मौजूदा next-intl सेटअप को बनाए रखता है, साथ ही i1n की टाइप-सेफ ऑटो-कम्प्लीट सुविधा भी जोड़ता है।

i1n अनुवाद फ़ाइलों, AI अनुवाद और टाइप जनरेशन का प्रबंधन करता है। next-intl रनटाइम लोडिंग, सर्वर कंपोनेंट्स और रूटिंग को संभालना जारी रखता है। आपको दोनों सिस्टम के लाभ शून्य माइग्रेशन लागत पर मिलते हैं।

परिनियोजन

परिनियोजन से पहले अनुवाद हमेशा सिंक में रहें, यह सुनिश्चित करने के लिए अपने बिल्ड स्टेप या CI/CD पाइपलाइन में i1n पुल जोड़ें।

Next.js की स्टैटिक जनरेशन (SSG) और सर्वर-साइड रेंडरिंग (SSR) दोनों i1n-मैनेज्ड ट्रांसलेशन फ़ाइलों के साथ सहजता से काम करती हैं।

app/[locale]/page.tsx

import { t } from 'i1n'

export default function HomePage() {
  return (
    <main>
      <h1>{t('home.title')}</h1>
      <p>{t('home.subtitle')}</p>
    </main>
  )
}

Bridge Mode — src/i18n.ts

import { registerI1n } from 'i1n'
import { useTranslations } from 'next-intl'

const t = useTranslations()
registerI1n((key, params) => t(key, params))

Next.js

सेटअप

स्टैंडअलोन मोड

next-intl के साथ ब्रिज मोड

परिनियोजन

संबंधित

डैशबोर्ड

ब्रिज मोड