M

MLOG

O'zbek

Global auditoriyaga yetib borish uchun Next.js ilovalaringizda uzluksiz internatsionalizatsiyani (i18n) joriy qilishni o'rganing. Marshrutlash, kontent tarjimasi va eng yaxshi amaliyotlarni o'z ichiga oladi.

Next.js Internatsionalizatsiyasi: Global Auditoriya uchun Ko'p Tilli Ilovalar Yaratish

Bugungi o'zaro bog'langan dunyoda global auditoriyaga mo'ljallangan ilovalarni yaratish endi hashamat emas, balki zaruratdir. Kuchli React freymvorki bo'lgan Next.js internatsionalizatsiyani (i18n) amalga oshirish uchun mustahkam xususiyatlarni taqdim etadi, bu sizga butun dunyo bo'ylab foydalanuvchilarga mahalliylashtirilgan tajribani taqdim etadigan ko'p tilli ilovalarni yaratishga imkon beradi. Ushbu keng qamrovli qo'llanma sizga internatsionalizatsiya qilingan Next.js ilovalarini yaratish uchun muhim tushunchalar, texnikalar va eng yaxshi amaliyotlar bilan tanishtiradi.

Internatsionalizatsiya va Lokalizatsiyani Tushunish

Next.js i18n ning o'ziga xos xususiyatlariga sho'ng'ishdan oldin, keling, asosiy atamalarga aniqlik kiritaylik:

Aslini olganda, i18n ilovangizni lokalizatsiyaga tayyorlaydi. Tilga bog'liq elementlarni asosiy koddan ajratib, siz ilovani turli bozorlar uchun lokalizatsiya qilishni osonlashtirasiz.

Nima uchun Next.js da Internatsionalizatsiyani Amalga Oshirish Kerak?

Next.js ilovangizda i18n ni joriy qilish ko'plab afzalliklarni taqdim etadi:

Next.js i18n Xususiyatlari va Konfiguratsiyasi

Next.js o'zining marshrutlash va kontentni boshqarish xususiyatlari orqali i18n uchun o'rnatilgan qo'llab-quvvatlashni taklif qiladi. Quyida muhim xususiyatlarning tahlili keltirilgan:

1. next.config.js da i18n ni sozlash

i18n uchun asosiy konfiguratsiya next.config.js fayli ichida joylashgan. Mana bir misol:


/** @type {import('next').NextConfig} */
const nextConfig = {
  i18n: {
    locales: ['en', 'es', 'fr'], // Qo'llab-quvvatlanadigan lokallar (til kodlari) massivi
    defaultLocale: 'en', // Foydalanish uchun standart lokal
    localeDetection: true, // Brauzer sozlamalariga asoslangan avtomatik lokalni aniqlashni yoqish/o'chirish (ixtiyoriy)
    //  domains: [
    //  {
    //    domain: 'example.com',
    //    defaultLocale: 'en',
    //  },
    //  {
    //    domain: 'example.es',
    //    defaultLocale: 'es',
    //  },
    //  ],
  },
}

module.exports = nextConfig;

Tushuntirish:

2. Lokal Prefikslari bilan Marshrutlash

Next.js avtomatik ravishda marshrutlarga lokal prefiksini qo'shadi. Masalan, agar sizda /about sahifasi bo'lsa va lokal 'es' (ispancha) bo'lsa, URL /es/about ga aylanadi. Bu sahifalarning turli til versiyalarini yaratishga va qidiruv tizimlariga har bir lokal uchun kontentni indekslashga imkon beradi. Freymvork qayta yo'naltirish va marshrutlashni siz uchun boshqaradi.

3. useRouter Hookidan Foydalanish

next/router dan olingan useRouter hooki joriy lokal va boshqa marshrutlash ma'lumotlariga kirishni ta'minlaydi.


import { useRouter } from 'next/router';

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

  return (
    

      
Joriy lokal: {locale}

      
Mavjud lokallar: {locales.join(', ')}

      
Standart lokal: {defaultLocale}

    

  );
}

export default MyComponent;

router ob'ekti quyidagi asosiy xususiyatlarni taklif qiladi:

Kontent Tarjimasi Strategiyalari

Next.js ilovangizni i18n uchun sozlaganingizdan so'ng, kontentingizni tarjima qilish uchun strategiyalarni amalga oshirishingiz kerak bo'ladi. Mana bir nechta mashhur yondashuvlar:

1. Maxsus Tarjimani Boshqarish Tizimidan (TMS) Foydalanish

Ko'p tilli yirik loyihalar uchun TMS dan foydalanish tavsiya etiladi. Mashhur variantlar quyidagilarni o'z ichiga oladi:

Afzalliklari:

2. JSON Tarjima Fayllarini Yaratish

Kichikroq loyihalar uchun tarjimalarni saqlash uchun JSON fayllaridan foydalanish oddiy va samarali usuldir.

Direktoriya tuzilmasi misoli:


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

en.json misoli:


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

es.json misoli:


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

MyComponent.js misoli:


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;

Ushbu yondashuv moslashuvchanlikni ta'minlaydi va kichikroq loyihalar uchun tushunarli. Odatda yangilash va saqlash oson.

3. Tarjima Kutubxonasidan Foydalanish

Bir nechta JavaScript kutubxonalari React komponentlaringiz ichidagi kontent tarjimasini soddalashtiradi.

next-i18next bilan misol (O'rnatish: npm install next-i18next i18next react-i18next):

I18n konfiguratsiya faylini yarating (masalan, ildiz katalogingizda 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 uchun Next.js konfiguratsiyangizni yarating.


// 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'],
  },
  // boshqa konfiguratsiyalar
}

module.exports = nextConfig

Konfiguratsiyani va tarjima importini _app.js faylingizga qo'shing:


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

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

export default appWithTranslation(MyApp);

Jild yarating va uni tarjimalaringiz uchun lokallar bilan to'ldiring.


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

en/common.json misoli:


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

Komponentda tarjimadan foydalanish:


import { useTranslation } from 'next-i18next';

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

  return (
    

      
{t('greeting')}

      
{t('welcomeMessage')}

    

  );
}

export default MyComponent;

Ushbu misol joriy lokalga asoslangan tarjimalarni olish uchun useTranslation hookidan foydalanadi.

Dinamik Marshrutlar va Statik Sayt Generatsiyasi (SSG) bilan Ishlash

Dinamik marshrutlar (masalan, blog postlari, mahsulot sahifalari) va statik sayt generatsiyasi (SSG) bilan ishlaganda internatsionalizatsiya murakkablashadi.

1. Dinamik Marshrutlar (masalan, /blog/[slug])

Dinamik marshrutlar uchun siz getStaticPaths yordamida qurilish vaqtida har bir lokal uchun to'g'ri yo'llarni yaratishingiz kerak bo'ladi. Ushbu funksiya Next.js oldindan render qilishi kerak bo'lgan yo'llar massivini qaytaradi.


export async function getStaticPaths() {
  const paths = [];
  const locales = ['en', 'es', 'fr'];
  const posts = await fetchPosts(); // Blog postlari ma'lumotlarini olish

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

  return {
    paths,
    fallback: false, // yoki yuklanish holatini ko'rsatmoqchi bo'lsangiz 'blocking'
  };
}

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

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

Tushuntirish:

2. getStaticProps bilan Statik Sayt Generatsiyasi (SSG)

getStaticProps da siz locale parametriga asoslanib tarjima qilingan kontentni olishingiz mumkin.


export async function getStaticProps({ params, locale }) {
  // Lokal va parametrlarga asoslanib kontentni olish
  const { post } = await getPostBySlug(params.slug, locale);

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

getPostBySlug funksiyasi berilgan slug va lokal uchun tarjima qilingan kontentni olishi kerak, uni tarjima fayllaringizdan, ma'lumotlar bazasidan yoki CMSdan olish mumkin.

3. getServerSideProps bilan Server Tomonida Renderlash (SSR)

So'rov vaqtida olinishi kerak bo'lgan kontent uchun getServerSideProps dan foydalaning. Bu kontent tez-tez o'zgarib tursa yoki har bir foydalanuvchi uchun shaxsiylashtirilgan bo'lsa foydalidir.


export async function getServerSideProps({ params, locale, req, res }) {
  // Lokal va parametrlarga asoslanib ma'lumotlarni olish (masalan, ma'lumotlar bazasidan)
  const data = await fetchData(params.slug, locale);

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

Next.js Internatsionalizatsiyasi uchun Eng Yaxshi Amaliyotlar

Ushbu eng yaxshi amaliyotlarga rioya qilish sizga mustahkam, saqlashga oson va foydalanuvchiga qulay ko'p tilli ilovalarni yaratishga yordam beradi:

Internatsionalizatsiya qilingan Veb-saytlar uchun SEO Mulohazalari

Internatsionalizatsiya qilingan veb-saytingizni qidiruv tizimlari uchun optimallashtirish butun dunyodan organik trafikni jalb qilish uchun muhimdir. Mana bir nechta asosiy SEO eng yaxshi amaliyotlari:

Misol: Oddiy Ko'p Tilli Blog Yaratish

Keling, Next.js yordamida ko'p tilli blogni soddalashtirilgan misolini yarataylik. Bu yuqorida muhokama qilingan tushunchalarni qanday qo'llashni aniqroq ko'rsatib beradi.

1. Loyihani Sozlash

Yangi Next.js loyihasini yarating:


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

2. i18n ni sozlash (next.config.js)


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

module.exports = nextConfig

3. Tarjima Fayllarini Yaratish

Ildiz katalogida locales jildini yarating va quyidagi JSON fayllarini qo'shing:

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. Blog Posti Komponentini Yaratish (masalan, 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. Asosiy Sahifani Yaratish (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;

Ushbu soddalashtirilgan misol Next.js internatsionalizatsiyasining asosiy tamoyillarini namoyish etadi. Siz bu asosiy freymvorkni kengaytirib, dinamik marshrutlar va tarjimani boshqarish tizimlari bilan integratsiya kabi murakkabroq xususiyatlarni qo'shishingiz mumkin. Yuqoridagi havolalarni Link komponenti bilan yaxshilashni va tegishli locale atributini qo'shishni ko'rib chiqing.

6. Ilovani Ishga Tushirish

Ilovani quyidagi buyruq bilan ishga tushiring:


npm run dev

Endi siz blogingizga http://localhost:3000 (inglizcha), http://localhost:3000/es (ispancha) va http://localhost:3000/fr (fransuzcha) manzillari orqali kirishingiz mumkin. Siz tanlangan lokalga qarab sarlavha va blog posti mazmuni tarjima qilinganini ko'rishingiz kerak.

Xulosa

Next.js veb-ilovalaringizda internatsionalizatsiyani amalga oshirish uchun keng qamrovli xususiyatlar to'plamini taqdim etadi. Ushbu qo'llanmada ko'rsatilgan tamoyillar va texnikalarga rioya qilish orqali siz butun dunyo bo'ylab foydalanuvchilarga mahalliylashtirilgan tajribalarni taqdim etadigan ko'p tilli ilovalarni yaratishingiz mumkin. I18n strategiyangizni erta rejalashtirishni, ehtiyojlaringiz uchun to'g'ri tarjima usulini tanlashni va foydalanuvchi tajribasini birinchi o'ringa qo'yishni unutmang. Puxta rejalashtirish va ijro etish bilan siz global auditoriya bilan rezonanslashadigan va o'sish uchun yangi imkoniyatlarni ochadigan ilovalarni yaratishingiz mumkin. Uzluksiz o'rganish, eng so'nggi nashrlar va eng yaxshi amaliyotlardan xabardor bo'lish sizning vositalaringiz va texnologiyalaringizdan samarali foydalanayotganingizni ta'minlaydi.

Texnologiya rivojlangan sari, yanada ilg'or i18n xususiyatlari paydo bo'lishini kuting. Turli madaniyatlar va lingvistik guruhlardagi foydalanuvchilarga yetib borish qobiliyati butun dunyo bo'ylab ilova ishlab chiquvchilar uchun asosiy ustuvorlik bo'lib qoladi. Shu sababli, i18n asoslarini o'zlashtirish bugungi global rivojlanish landshaftida sizning qadringizni oshiradigan qimmatli mahoratdir.