M

MLOG

తెలుగు

మీ Next.js అప్లికేషన్‌లలో ప్రపంచవ్యాప్త ప్రేక్షకులను చేరుకోవడానికి అంతర్జాతీయీకరణ (i18n)ను ఎలా అమలు చేయాలో తెలుసుకోండి. రౌటింగ్, కంటెంట్ అనువాదం, మరియు ఉత్తమ పద్ధతులు ఇందులో ఉన్నాయి.

Next.js ఇంటర్నషనలైజేషన్: గ్లోబల్ ఆడియన్స్ కోసం బహుళ-భాషా యాప్‌లను నిర్మించడం

నేటి ప్రపంచంలో, గ్లోబల్ ప్రేక్షకులను దృష్టిలో ఉంచుకుని అప్లికేషన్‌లను నిర్మించడం ఇకపై విలాసం కాదు – ఇది ఒక అవసరం. Next.js, ఒక శక్తివంతమైన రియాక్ట్ ఫ్రేమ్‌వర్క్, అంతర్జాతీయీకరణ (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'], // An array of supported locales (language codes)
    defaultLocale: 'en', // The default locale to use
    localeDetection: true, // Enable/disable automatic locale detection based on browser settings (optional)
    //  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. అనువాద లైబ్రరీని ఉపయోగించడం

అనేక జావాస్క్రిప్ట్ లైబ్రరీలు మీ రియాక్ట్ కాంపోనెంట్లలో కంటెంట్ అనువాదాన్ని క్రమబద్ధీకరిస్తాయి.

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(); // Fetch blog posts data

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

  return {
    paths,
    fallback: false, // or 'blocking' if you want to show loading state
  };
}

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 }) {
  // Fetch content based on the locale and params
  const { post } = await getPostBySlug(params.slug, locale);

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

getPostBySlug ఫంక్షన్ ఇచ్చిన స్లగ్ మరియు లోకేల్ కోసం అనువదించబడిన కంటెంట్‌ను పొందాలి, ఇది మీ అనువాద ఫైల్స్, డేటాబేస్, లేదా ఒక CMS నుండి తిరిగి పొందబడవచ్చు.

3. getServerSidePropsతో సర్వర్-సైడ్ రెండరింగ్ (SSR)

అభ్యర్థన సమయంలో పొందవలసిన కంటెంట్ కోసం, getServerSideProps ఉపయోగించండి. కంటెంట్ తరచుగా మారినప్పుడు లేదా ప్రతి వినియోగదారు కోసం వ్యక్తిగతీకరించబడినప్పుడు ఇది ఉపయోగపడుతుంది.


export async function getServerSideProps({ params, locale, req, res }) {
  // Fetch data based on the locale and params (e.g., from a database)
  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 యొక్క ప్రాథమికాలను మాస్టరింగ్ చేయడం అనేది నేటి గ్లోబల్ డెవలప్‌మెంట్ ల్యాండ్‌స్కేప్‌లో మీ విలువను పెంచే ఒక విలువైన నైపుణ్యం.