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 (
    

      
सध्याचा लोकेल: {locale}

      
उपलब्ध लोकेल्स: {locales.join(', ')}

      
डीफॉल्ट लोकेल: {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. एक भाषांतर लायब्ररी वापरणे

अनेक JavaScript लायब्ररी तुमच्या 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 च्या मूलभूत गोष्टींवर प्रभुत्व मिळवणे हे एक मौल्यवान कौशल्य आहे जे आजच्या जागतिक विकास लँडस्केपमध्ये तुमचे मूल्य वाढवेल.