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'], // ஆதரவளிக்கப்படும் லோகேல்களின் (மொழி குறியீடுகள்) வரிசை
    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. மொழிபெயர்ப்பு நூலகத்தைப் பயன்படுத்துதல்

பல ஜாவாஸ்கிரிப்ட் நூலகங்கள் உங்கள் ரியாக்ட் கூறுகளுக்குள் உள்ளடக்க மொழிபெயர்ப்பை நெறிப்படுத்துகின்றன.

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'],
  },
  // பிற உள்ளமைவுகள்
}

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 }) {
  // லோகேல் மற்றும் 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 }) {
  // லோகேல் மற்றும் params அடிப்படையில் தரவைப் பெறுக (எ.கா., ஒரு தரவுத்தளத்திலிருந்து)
  const data = await fetchData(params.slug, locale);

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

Next.js சர்வதேசியமயமாக்கலுக்கான சிறந்த நடைமுறைகள்

இந்த சிறந்த நடைமுறைகளைப் பின்பற்றுவது, வலுவான, பராமரிக்கக்கூடிய மற்றும் பயனர்-நட்பு பன்மொழி பயன்பாடுகளை உருவாக்க உதவும்:

சர்வதேசியமயமாக்கப்பட்ட வலைத்தளங்களுக்கான எஸ்இஓ பரிசீலனைகள்

உங்கள் சர்வதேசியமயமாக்கப்பட்ட வலைத்தளத்தை தேடுபொறிகளுக்கு உகப்பாக்குவது உலகெங்கிலும் இருந்து ஆர்கானிக் ட்ராஃபிக்கை ஈர்ப்பதற்கு அவசியம். இங்கே சில முக்கிய எஸ்இஓ சிறந்த நடைமுறைகள்:

உதாரணம்: ஒரு எளிய பன்மொழி வலைப்பதிவை உருவாக்குதல்

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-இன் அடிப்படைகளை மாஸ்டரிங் செய்வது இன்றைய உலகளாவிய மேம்பாட்டு சூழலில் உங்கள் மதிப்பை மேம்படுத்தும் ஒரு மதிப்புமிக்க திறமையாகும்.