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 ಸ್ವಯಂಚಾಲಿತವಾಗಿ ಮಾರ್ಗಗಳನ್ನು (routes) ಲೋಕೇಲ್‌ನೊಂದಿಗೆ ಪೂರ್ವಪ್ರತ್ಯಯ ಮಾಡುತ್ತದೆ. ಉದಾಹರಣೆಗೆ, ನೀವು /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 ಲೈಬ್ರರಿಗಳು ನಿಮ್ಮ ರಿಯಾಕ್ಟ್ ಕಾಂಪೊನೆಂಟ್‌ಗಳಲ್ಲಿ ವಿಷಯ ಅನುವಾದವನ್ನು ಸುಗಮಗೊಳಿಸುತ್ತವೆ.

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 ಅಂತರಾಷ್ಟ್ರೀಕರಣಕ್ಕಾಗಿ ಉತ್ತಮ ಅಭ್ಯಾಸಗಳು

ಈ ಉತ್ತಮ ಅಭ್ಯಾಸಗಳನ್ನು ಅನುಸರಿಸುವುದರಿಂದ ದೃಢವಾದ, ನಿರ್ವಹಿಸಬಲ್ಲ ಮತ್ತು ಬಳಕೆದಾರ ಸ್ನೇಹಿ ಬಹು-ಭಾಷಾ ಅಪ್ಲಿಕೇಶನ್‌ಗಳನ್ನು ನಿರ್ಮಿಸಲು ನಿಮಗೆ ಸಹಾಯ ಮಾಡುತ್ತದೆ:

ಅಂತರಾಷ್ಟ್ರೀಕೃತ ವೆಬ್‌ಸೈಟ್‌ಗಳಿಗೆ ಎಸ್‌ಇಒ ಪರಿಗಣನೆಗಳು

ವಿಶ್ವಾದ್ಯಂತ ಸಾವಯವ ದಟ್ಟಣೆಯನ್ನು ಹೆಚ್ಚಿಸಲು ನಿಮ್ಮ ಅಂತರಾಷ್ಟ್ರೀಕೃತ ವೆಬ್‌ಸೈಟ್ ಅನ್ನು ಸರ್ಚ್ ಇಂಜಿನ್‌ಗಳಿಗಾಗಿ ಆಪ್ಟಿಮೈಜ್ ಮಾಡುವುದು ಅತ್ಯಗತ್ಯ. ಇಲ್ಲಿ ಕೆಲವು ಪ್ರಮುಖ ಎಸ್‌ಇಒ ಉತ್ತಮ ಅಭ್ಯಾಸಗಳಿವೆ:

ಉದಾಹರಣೆ: ಸರಳ ಬಹು-ಭಾಷಾ ಬ್ಲಾಗ್ ನಿರ್ಮಿಸುವುದು

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 ನ ಮೂಲಭೂತ ಅಂಶಗಳನ್ನು ಕರಗತ ಮಾಡಿಕೊಳ್ಳುವುದು ಇಂದಿನ ಜಾಗತಿಕ ಅಭಿವೃದ್ಧಿ ಭೂದೃಶ್ಯದಲ್ಲಿ ನಿಮ್ಮ ಮೌಲ್ಯವನ್ನು ಹೆಚ್ಚಿಸುವ ಒಂದು ಅಮೂಲ್ಯವಾದ ಕೌಶಲ್ಯವಾಗಿದೆ.