M

MLOG

हिन्दी

अपने Next.js एप्लिकेशन में सहज अंतर्राष्ट्रीयकरण (i18n) लागू करना सीखें ताकि आप वैश्विक दर्शकों तक पहुंच सकें। इसमें रूटिंग, सामग्री अनुवाद और सर्वोत्तम प्रथाएं शामिल हैं।

Next.js अंतर्राष्ट्रीयकरण: वैश्विक दर्शकों के लिए बहु-भाषी ऐप्स बनाना

आज की जुड़ी हुई दुनिया में, वैश्विक दर्शकों को पूरा करने वाले एप्लिकेशन बनाना अब कोई विलासिता नहीं है – यह एक आवश्यकता है। Next.js, एक शक्तिशाली React फ्रेमवर्क, अंतर्राष्ट्रीयकरण (i18n) को लागू करने के लिए मजबूत सुविधाएँ प्रदान करता है, जिससे आप बहु-भाषी एप्लिकेशन बना सकते हैं जो दुनिया भर के उपयोगकर्ताओं को एक स्थानीयकृत अनुभव प्रदान करते हैं। यह व्यापक गाइड आपको अंतर्राष्ट्रीयकृत Next.js एप्लिकेशन बनाने के लिए आवश्यक अवधारणाओं, तकनीकों और सर्वोत्तम प्रथाओं के बारे में बताएगा।

अंतर्राष्ट्रीयकरण और स्थानीयकरण को समझना

Next.js i18n की बारीकियों में जाने से पहले, आइए प्रमुख शब्दों को स्पष्ट करें:

संक्षेप में, i18n आपके एप्लिकेशन को स्थानीयकरण के लिए तैयार करता है। भाषा-निर्भर तत्वों को कोर कोड से अलग करके, आप एप्लिकेशन को विभिन्न बाजारों के लिए स्थानीयकृत करना आसान बनाते हैं।

Next.js में अंतर्राष्ट्रीयकरण क्यों लागू करें?

अपने Next.js एप्लिकेशन में i18n लागू करने से कई लाभ मिलते हैं:

Next.js i18n सुविधाएँ और कॉन्फ़िगरेशन

Next.js अपनी रूटिंग और सामग्री प्रबंधन सुविधाओं के माध्यम से i18n के लिए अंतर्निहित समर्थन प्रदान करता है। महत्वपूर्ण सुविधाओं का विवरण निम्नलिखित है:

1. next.config.js में i18n कॉन्फ़िगर करना

i18n के लिए कोर कॉन्फ़िगरेशन next.config.js फ़ाइल के भीतर रहता है। यहाँ एक उदाहरण है:


/** @type {import('next').NextConfig} */
const nextConfig = {
  i18n: {
    locales: ['en', 'es', 'fr'], // समर्थित लोकेल (भाषा कोड) की एक सारणी
    defaultLocale: 'en', // उपयोग करने के लिए डिफ़ॉल्ट लोकेल
    localeDetection: true, // ब्राउज़र सेटिंग्स के आधार पर स्वचालित लोकेल डिटेक्शन को सक्षम/अक्षम करें (वैकल्पिक)
    //  domains: [
    //  {
    //    domain: 'example.com',
    //    defaultLocale: 'en',
    //  },
    //  {
    //    domain: 'example.es',
    //    defaultLocale: 'es',
    //  },
    //  ],
  },
}

module.exports = nextConfig;

स्पष्टीकरण:

2. लोकेल उपसर्गों के साथ रूटिंग

Next.js स्वचालित रूप से रूट्स को लोकेल के साथ उपसर्ग करता है। उदाहरण के लिए, यदि आपके पास /about पर एक पेज है और लोकेल 'es' (स्पेनिश) है, तो URL /es/about हो जाएगा। यह पेजों के विभिन्न भाषा संस्करणों को सक्षम बनाता है और सर्च इंजनों को प्रत्येक लोकेल के लिए सामग्री को इंडेक्स करने में सक्षम बनाता है। फ्रेमवर्क आपके लिए रीडायरेक्ट और रूटिंग को संभालता है।

3. useRouter हुक का उपयोग करना

next/router से useRouter हुक वर्तमान लोकेल और अन्य रूटिंग जानकारी तक पहुंच प्रदान करता है।


import { useRouter } from 'next/router';

function MyComponent() {
  const router = useRouter();
  const { locale, locales, defaultLocale } = router;

  return (
    

      
Current locale: {locale}

      
Available locales: {locales.join(', ')}

      
Default locale: {defaultLocale}

    

  );
}

export default MyComponent;

router ऑब्जेक्ट निम्नलिखित प्रमुख गुण प्रदान करता है:

सामग्री अनुवाद रणनीतियाँ

जब आपने अपने Next.js एप्लिकेशन को i18n के लिए कॉन्फ़िगर कर लिया है, तो आपको अपनी सामग्री का अनुवाद करने के लिए रणनीतियों को लागू करने की आवश्यकता होगी। यहाँ कई लोकप्रिय दृष्टिकोण दिए गए हैं:

1. एक समर्पित अनुवाद प्रबंधन प्रणाली (TMS) का उपयोग करना

कई भाषाओं वाली बड़े पैमाने की परियोजनाओं के लिए, एक TMS की अत्यधिक अनुशंसा की जाती है। लोकप्रिय विकल्पों में शामिल हैं:

लाभ:

2. JSON अनुवाद फ़ाइलें बनाना

छोटी परियोजनाओं के लिए, अनुवादों को संग्रहीत करने के लिए JSON फ़ाइलों का उपयोग करना एक सरल और प्रभावी तरीका है।

उदाहरण डायरेक्टरी संरचना:


/src
├── locales
│   ├── en.json
│   └── es.json
├── components
│   └── MyComponent.js
└── pages
    └── index.js

उदाहरण en.json:


{
  "greeting": "Hello, world!",
  "welcomeMessage": "Welcome to our website."
}

उदाहरण es.json:


{
  "greeting": "¡Hola, mundo!",
  "welcomeMessage": "Bienvenido a nuestro sitio web."
}

उदाहरण MyComponent.js:


import { useRouter } from 'next/router';
import en from '../locales/en.json';
import es from '../locales/es.json';

function MyComponent() {
  const { locale } = useRouter();
  const t = locale === 'es' ? es : en;

  return (
    

      
{t.greeting}

      
{t.welcomeMessage}

    

  );
}

export default MyComponent;

यह दृष्टिकोण लचीलापन प्रदान करता है और छोटी परियोजनाओं के लिए सीधा है। इसे अपडेट और बनाए रखना आम तौर पर आसान होता है।

3. एक अनुवाद लाइब्रेरी का उपयोग करना

कई जावास्क्रिप्ट लाइब्रेरी आपके React घटकों के भीतर सामग्री अनुवाद को सुव्यवस्थित करती हैं।

next-i18next के साथ उदाहरण (इंस्टॉलेशन: npm install next-i18next i18next react-i18next):

एक i18n कॉन्फ़िगरेशन फ़ाइल बनाएँ (जैसे, आपके रूट डायरेक्टरी में i18n.js):


// i18n.js
import { createServerSideHelpers } from 'next-i18next'
import { i18n } from './next-i18next.config'

export function initI18next(req, res, namespaces = ['common']) {
  const helpers = createServerSideHelpers(
    req, 
    res, 
    i18n, 
    namespaces
  )

  return helpers
}

export { appWithTranslation } from 'next-i18next'
export { i18n }

next-i18next के लिए अपनी Next.js कॉन्फ़िगरेशन बनाएँ।


// next-i18next.config.js
const { i18n } = require('./next-i18next.config');

/** @type {import('next').NextConfig} */
const nextConfig = {
  reactStrictMode: true,
  i18n: {
    defaultLocale: 'en',
    locales: ['en', 'es', 'fr'],
  },
  // other configuration
}

module.exports = nextConfig

अपनी _app.js में कॉन्फ़िगरेशन और अनुवाद आयात जोड़ें:


import { appWithTranslation } from 'next-i18next';
import '../styles/globals.css';

function MyApp({ Component, pageProps }) {
  return ;
}

export default appWithTranslation(MyApp);

एक फ़ोल्डर बनाएँ और इसे अपने अनुवादों के लिए लोकेल से भरें।


/public
└── locales
    ├── en
    │   └── common.json
    ├── es
    │   └── common.json
    └── fr
        └── common.json

उदाहरण en/common.json:


{
  "greeting": "Hello, world!",
  "welcomeMessage": "Welcome to our website."
}

एक घटक में अनुवाद का उपयोग करना:


import { useTranslation } from 'next-i18next';

function MyComponent() {
  const { t } = useTranslation('common');

  return (
    

      
{t('greeting')}

      
{t('welcomeMessage')}

    

  );
}

export default MyComponent;

यह उदाहरण वर्तमान लोकेल के आधार पर अनुवाद प्राप्त करने के लिए useTranslation हुक का उपयोग करता है।

डायनामिक रूट्स और स्टेटिक साइट जनरेशन (SSG) को संभालना

जब डायनामिक रूट्स (जैसे, ब्लॉग पोस्ट, उत्पाद पृष्ठ) और स्टेटिक साइट जनरेशन (SSG) से निपटना होता है, तो अंतर्राष्ट्रीयकरण अधिक जटिल हो जाता है।

1. डायनामिक रूट्स (जैसे, /blog/[slug])

डायनामिक रूट्स के लिए, आपको बिल्ड टाइम के दौरान getStaticPaths का उपयोग करके प्रत्येक लोकेल के लिए सही पथ उत्पन्न करने की आवश्यकता होगी। यह फ़ंक्शन पथों की एक सारणी लौटाता है जिसे Next.js को प्री-रेंडर करना चाहिए।


export async function getStaticPaths() {
  const paths = [];
  const locales = ['en', 'es', 'fr'];
  const posts = await fetchPosts(); // ब्लॉग पोस्ट डेटा प्राप्त करें

  posts.forEach(post => {
    locales.forEach(locale => {
      paths.push({
        params: {
          slug: post.slug,
        },
        locale,
      });
    });
  });

  return {
    paths,
    fallback: false, // या 'blocking' यदि आप लोडिंग स्थिति दिखाना चाहते हैं
  };
}

export async function getStaticProps({ params, locale }) {
  const post = await getPostBySlug(params.slug, locale);

  return {
    props: {
      post,
    },
  };
}

स्पष्टीकरण:

2. getStaticProps के साथ स्टेटिक साइट जनरेशन (SSG)

getStaticProps में, आप locale पैरामीटर के आधार पर अनुवादित सामग्री प्राप्त कर सकते हैं।


export async function getStaticProps({ params, locale }) {
  // लोकेल और पैरामीटर के आधार पर सामग्री प्राप्त करें
  const { post } = await getPostBySlug(params.slug, locale);

  return {
    props: {
      post,
    },
  };
}

getPostBySlug फ़ंक्शन को दिए गए स्लग और लोकेल के लिए अनुवादित सामग्री प्राप्त करनी चाहिए, जिसे आपकी अनुवाद फ़ाइलों, डेटाबेस, या CMS से प्राप्त किया जा सकता है।

3. getServerSideProps के साथ सर्वर-साइड रेंडरिंग (SSR)

उन सामग्रियों के लिए जिन्हें अनुरोध के समय प्राप्त करने की आवश्यकता होती है, getServerSideProps का उपयोग करें। यह तब उपयोगी होता है जब सामग्री बार-बार बदलती है या प्रत्येक उपयोगकर्ता के लिए व्यक्तिगत होती है।


export async function getServerSideProps({ params, locale, req, res }) {
  // लोकेल और पैरामीटर के आधार पर डेटा प्राप्त करें (जैसे, डेटाबेस से)
  const data = await fetchData(params.slug, locale);

  return {
    props: {
      data,
    },
  };
}

Next.js अंतर्राष्ट्रीयकरण के लिए सर्वोत्तम प्रथाएं

इन सर्वोत्तम प्रथाओं का पालन करने से आपको मजबूत, रखरखाव योग्य और उपयोगकर्ता-अनुकूल बहु-भाषी एप्लिकेशन बनाने में मदद मिलेगी:

अंतर्राष्ट्रीयकृत वेबसाइटों के लिए SEO संबंधी विचार

खोज इंजनों के लिए अपनी अंतर्राष्ट्रीयकृत वेबसाइट को अनुकूलित करना दुनिया भर से जैविक ट्रैफ़िक चलाने के लिए आवश्यक है। यहाँ कुछ प्रमुख SEO सर्वोत्तम प्रथाएं हैं:

उदाहरण: एक सरल बहु-भाषी ब्लॉग बनाना

आइए Next.js का उपयोग करके एक बहु-भाषी ब्लॉग का एक सरलीकृत उदाहरण बनाएं। यह ऊपर चर्चा की गई अवधारणाओं को कैसे लागू किया जाए, इसका एक और ठोस उदाहरण प्रदान करेगा।

1. प्रोजेक्ट सेटअप

एक नया Next.js प्रोजेक्ट बनाएं:


npx create-next-app my-multi-lang-blog
cd my-multi-lang-blog

2. i18n कॉन्फ़िगर करें (next.config.js)


/** @type {import('next').NextConfig} */
const nextConfig = {
  reactStrictMode: true,
  i18n: {
    locales: ['en', 'es', 'fr'],
    defaultLocale: 'en',
  },
}

module.exports = nextConfig

3. अनुवाद फ़ाइलें बनाएँ

रूट डायरेक्टरी में एक locales फ़ोल्डर बनाएँ और निम्नलिखित JSON फ़ाइलें जोड़ें:

locales/en.json:


{
  "title": "Welcome to My Blog",
  "postTitle": "My First Post",
  "postContent": "This is the content of my first blog post."
}

locales/es.json:


{
  "title": "Bienvenido a mi Blog",
  "postTitle": "Mi Primer Post",
  "postContent": "Este es el contenido de mi primer publicación de blog."
}

locales/fr.json:


{
  "title": "Bienvenue sur Mon Blog",
  "postTitle": "Mon Premier Article",
  "postContent": "Ceci est le contenu de mon premier article de blog."
}

4. ब्लॉग पोस्ट घटक बनाएँ (जैसे, components/BlogPost.js)


import { useRouter } from 'next/router';
import en from '../locales/en.json';
import es from '../locales/es.json';
import fr from '../locales/fr.json';

function BlogPost() {
  const router = useRouter();
  const { locale } = router;

  let translations;
  switch (locale) {
    case 'es':
      translations = es;
      break;
    case 'fr':
      translations = fr;
      break;
    default:
      translations = en;
  }

  return (
    

      
{translations.postTitle}

      
{translations.postContent}

    

  );
}

export default BlogPost;

5. इंडेक्स पेज बनाएँ (pages/index.js)


import { useRouter } from 'next/router';
import BlogPost from '../components/BlogPost';
import en from '../locales/en.json';
import es from '../locales/es.json';
import fr from '../locales/fr.json';

function HomePage() {
  const router = useRouter();
  const { locale, locales } = router;

  let translations;
  switch (locale) {
    case 'es':
      translations = es;
      break;
    case 'fr':
      translations = fr;
      break;
    default:
      translations = en;
  }

  return (
    

      
{translations.title}

      
      

        {locales.map((l) => (
          
            {l.toUpperCase()}
          
        ))}
      

    

  );
}

export default HomePage;

यह सरलीकृत उदाहरण Next.js अंतर्राष्ट्रीयकरण के मूलभूत सिद्धांतों को प्रदर्शित करता है। आप इस मूल ढांचे पर विस्तार कर सकते हैं ताकि अधिक जटिल सुविधाएँ, जैसे कि डायनामिक रूट और अनुवाद प्रबंधन प्रणालियों के साथ एकीकरण शामिल हो सकें। ऊपर दिए गए लिंक को Link घटक के साथ सुधारने और उपयुक्त locale विशेषता जोड़ने पर विचार करें।

6. एप्लिकेशन चलाएँ

एप्लिकेशन को इसके साथ चलाएँ:


npm run dev

अब आप अपने ब्लॉग को http://localhost:3000 (अंग्रेजी), http://localhost:3000/es (स्पेनिश), और http://localhost:3000/fr (फ्रेंच) पर एक्सेस कर सकते हैं। आपको चयनित लोकेल के आधार पर शीर्षक और ब्लॉग पोस्ट सामग्री का अनुवादित रूप देखना चाहिए।

निष्कर्ष

Next.js आपके वेब एप्लिकेशन में अंतर्राष्ट्रीयकरण को लागू करने के लिए सुविधाओं का एक व्यापक सेट प्रदान करता है। इस गाइड में उल्लिखित सिद्धांतों और तकनीकों का पालन करके, आप बहु-भाषी एप्लिकेशन बना सकते हैं जो दुनिया भर के उपयोगकर्ताओं को स्थानीयकृत अनुभव प्रदान करते हैं। अपनी i18n रणनीति की जल्दी योजना बनाना याद रखें, अपनी आवश्यकताओं के लिए सही अनुवाद विधि चुनें, और उपयोगकर्ता अनुभव को प्राथमिकता दें। सावधानीपूर्वक योजना और निष्पादन के साथ, आप ऐसे एप्लिकेशन बना सकते हैं जो वैश्विक दर्शकों के साथ प्रतिध्वनित होते हैं और विकास के नए अवसरों को खोलते हैं। निरंतर सीखना, नवीनतम रिलीज़ और सर्वोत्तम प्रथाओं के साथ बने रहना यह सुनिश्चित करेगा कि आप अपने उपकरणों और प्रौद्योगिकियों का प्रभावी ढंग से उपयोग कर रहे हैं।

जैसे-जैसे प्रौद्योगिकी आगे बढ़ती है, और अधिक उन्नत i18n सुविधाओं के उभरने की उम्मीद है। विभिन्न संस्कृतियों और भाषाई समूहों के उपयोगकर्ताओं तक पहुंचने की क्षमता दुनिया भर के एप्लिकेशन डेवलपर्स के लिए एक प्रमुख प्राथमिकता बनी रहेगी। इसलिए, i18n के मूल सिद्धांतों में महारत हासिल करना एक मूल्यवान कौशल है जो आज के वैश्विक विकास परिदृश्य में आपके मूल्य को बढ़ाएगा।