अंतर्राष्ट्रीयकरण (i18n) इंजीनियरिंग परिवर्तनों के बिना विभिन्न भाषाओं और क्षेत्रों के लिए आसानी से अनुकूलनीय होने के लिए एक एप्लिकेशन को डिजाइन करने की प्रक्रिया है। इस लेख में, आप सीखेंगे कि नेक्स्ट.जेएस एप्लिकेशन में i18n कैसे सेट करें और नेक्स्ट-इंटल का उपयोग करके अंग्रेजी और स्पेनिश के बीच टॉगल करने के लिए एक भाषा स्विचर कैसे बनाएं।

इंस्टालेशन

सबसे पहले, आपको नेक्स्ट-इंटल लाइब्रेरी स्थापित करने की आवश्यकता है, जो नेक्स्ट.जेएस में अंतर्राष्ट्रीयकरण के प्रबंधन की सुविधा प्रदान करती है। अपने टर्मिनल में निम्नलिखित कमांड चलाएँ:

npm install next-intl

परियोजना संरचना

प्रोजेक्ट संरचना इस प्रकार होगी:

├── messages
│   ├── en.json
│   └── es.json
├── next.config.mjs
└── src
    ├── i18n.ts
    ├── middleware.ts
    └── app
        └── [locale]
            ├── layout.tsx
            └── page.tsx

1. अनुवाद संदेश सेट करना

अपने प्रोजेक्ट के मूल में एक संदेश निर्देशिका बनाएं। इस निर्देशिका के अंदर, उस प्रत्येक भाषा के लिए JSON फ़ाइलें जोड़ें जिसका आप समर्थन करना चाहते हैं।

messages/en.json

{
  "greeting": "Hello Codú",
  "farewell": "Goodbye Codú"
}

संदेश/es.json

{
  "greeting": "Hola Codú",
  "farewell": "Adiós Codú"
}

इन फ़ाइलों में उन वाक्यांशों के अनुवाद शामिल हैं जिनका उपयोग आपका एप्लिकेशन करेगा।

2. Next.js को कॉन्फ़िगर करना

Next.config.mjs में अंतर्राष्ट्रीयकरण का समर्थन करने के लिए Next.js को कॉन्फ़िगर करें।

Next.config.mjs

import { getRequestConfig } from 'next-intl/server';

// List of supported languages
const locales = ['en', 'es'];

export default getRequestConfig(async ({ locale }) => {
  // Validate that the incoming `locale` parameter is valid
  if (!locales.includes(locale)) {
    return { notFound: true };
  }

  return {
    messages: (await import(`./messages/${locale}.json`)).default
  };
});

यह फ़ाइल अनुरोधित भाषा के आधार पर सही अनुवाद संदेशों को लोड करने के लिए Next.js को कॉन्फ़िगर करती है।

3. अंतर्राष्ट्रीयकरण मिडलवेयर

पुनर्निर्देशन को संभालने और डिफ़ॉल्ट भाषा सेट करने के लिए मिडलवेयर बनाएं।

src/middleware.ts

import createMiddleware from 'next-intl/middleware';

export default createMiddleware({
  // List of all supported languages
  locales: ['en', 'es'],

  // Default language
  defaultLocale: 'en'
});

export const config = {
  // Only match internationalised pathnames
  matcher: ['/', '/(en|es)/:path*']
};

यदि कोई निर्दिष्ट नहीं है तो यह मिडलवेयर डिफ़ॉल्ट भाषा पर पुनर्निर्देशन को संभालता है।

4. अंतर्राष्ट्रीयकरण विन्यास

अंतर्राष्ट्रीयकरण सेटिंग्स प्रबंधित करने के लिए एक कॉन्फ़िगरेशन फ़ाइल बनाएं।

src/i18n.ts

import { notFound } from 'next/navigation';
import { getRequestConfig } from 'next-intl/server';

const locales = ['en', 'es'];

export default getRequestConfig(async ({ locale }) => {
  if (!locales.includes(locale as any)) notFound();

  return {
    messages: (await import(`../messages/${locale}.json`)).default
  };
});

यह फ़ाइल स्थानों को मान्य करती है और संबंधित संदेशों को लोड करती है।

5. लेआउट और पेज सेट करना

अंतर्राष्ट्रीयकरण का समर्थन करने के लिए लेआउट और मुख्य पृष्ठ कॉन्फ़िगर करें।

src/app/[locale]/layout.tsx

import { useLocale } from 'next-intl';
import { ReactNode } from 'react';

export default function Layout({ children }: { children: ReactNode }) {
  const locale = useLocale();
  return (
    
      {children}
    
  );
}

src/app/[locale]/page.tsx

import { useTranslations } from 'next-intl';

export default function Page() {
  const t = useTranslations();
  return (
    

      
{t('greeting')}
      
{t('farewell')}
    
  );
}

ये फ़ाइलें अनुवाद का उपयोग करने के लिए लेआउट और मुख्य पृष्ठ को कॉन्फ़िगर करती हैं।

6. भाषा स्विचर बनाना

अंत में, अंग्रेजी और स्पेनिश के बीच टॉगल करने के लिए एक भाषा स्विचर बनाएं।

src/app/[locale]/switcher.tsx

'use client';

import { useLocale } from 'next-intl';
import { useRouter } from 'next/navigation';
import { ChangeEvent, useTransition } from 'react';

export default function LocalSwitcher() {
  const [isPending, startTransition] = useTransition();
  const router = useRouter();
  const localActive = useLocale();

  const onSelectChange = (e: ChangeEvent) => {
    const nextLocale = e.target.value;
    startTransition(() => {
      router.replace(`/${nextLocale}`);
    });
  };

  return (
    
      
Change language
      EnglishSpanish
  );
}

यह घटक उपयोगकर्ताओं को इंटरफ़ेस भाषा बदलने की अनुमति देता है।

निष्कर्ष

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