Next.js xalqaro tillar qo‘llab-quvvatlashi (i18n)
next-intl — bu Next.js uchun mo‘ljallangan xalqaro tillar kutubxonasi bo‘lib, u sizga quyidagilarda yordam beradi:

• Tarjimalarni boshqarish

• Sana, raqam va boshqa formatlarni sozlash

• Xalqaro yo‘nalish (routing)ni boshqarish

Bularning barchasi sizga haqiqatan ham mahalliylashtirilgan (localized) ilovalar yaratish uchun mustahkam asos yaratadi.

------------------------------------------------

App Router’ni i18n routing bilan sozlash

Ilovangiz qo‘llaydigan har bir til uchun alohida URL manzillar ishlatish uchun next-intl yordamida quyidagi routing usullarini qo‘llash mumkin:

• Prefiksga asoslangan routing (masalan: /en/about)

• Domen asosidagi routing (masalan: en.example.com/about)

Har ikkala holatda ham next-intl, App Router bilan [locale] nomli yuqori darajadagi dinamik segment orqali integratsiya qilinadi. Bu segment turli tillarda kontent berish imkonini yaratadi.

Boshlash

Agar hali qilmagan bo‘lsangiz, App Router’dan foydalanuvchi Next.js ilovasini yarating va quyidagini ishga tushiring:

npm install next-intl

Endi esa quyidagi fayl tuzilmasini yaratamiz:

├── messages

│ ├── en.json

│ └── ...

├── next.config.ts

└── src

├── i18n

│ ├── routing.ts

│ ├── navigation.ts

│ └── request.ts

├── middleware.ts

└── app

└── [locale]

├── layout.tsx

└── page.tsx

Agar siz mavjud ilovani next-intl’ga o‘tkazayotgan bo‘lsangiz, odatda mavjud sahifalaringizni sozlash jarayonida [locale] papkasiga ko‘chirasiz.

Fayllarni sozlash

messages/en.json

"Messages" (xabarlar) — har bir til uchun mavjud bo‘lgan tarjimalarni anglatadi. Ularni loyihangiz ichida lokal fayl sifatida saqlashingiz yoki masofaviy (remote) ma’lumot manbaidan yuklashingiz mumkin.

Eng oddiy usul — loyihangiz papkasida .json fayllar yaratish:

messages/en.json

{ "HomePage": { "title": "Hello world!", "about": "Go to the about page" } } 

Bu misolda ingliz tili (en) uchun HomePage bo‘limidagi matnlar saqlangan:

• title — sahifa sarlavhasi

• about — "about" sahifasiga o‘tish uchun tugma yoki havola matni

next.config.ts

Endi next-intl plaginini sozlaymiz. Bu plagin so‘rovga (request) xos bo‘lgan i18n konfiguratsiyasini — masalan, tarjimalarni — Server Components’ga yetkazib berish uchun alias yaratadi. (Buning tafsilotlari keyingi bosqichlarda keltiriladi.)

next.config.ts

import {NextConfig} from 'next';
import createNextIntlPlugin from 'next-intl/plugin';
 
const nextConfig: NextConfig = {};
 
const withNextIntl = createNextIntlPlugin();
export default withNextIntl(nextConfig);

src/i18n/routing.ts

Biz Next.js routing tizimiga ikki joyda integratsiya qilamiz:

1. Middleware — foydalanuvchining tilini aniqlaydi va kerak bo‘lsa / manzilini /en kabi mos yo‘nalishga o‘tkazadi (redirect) yoki qayta yozadi (rewrite).

2. Navigation API’lar — <Link /> kabi Next.js’ning navigatsiya komponentlari uchun engil (lightweight) qadoqlar, i18n prefikslarini avtomatik qo‘shib ishlaydi.

Bu usul yordamida siz /about kabi soddalashtirilgan path’lar bilan ishlaysiz, lekin tilga oid prefikslar avtomatik tarzda qo‘shiladi.

Har ikkala joy uchun bir xil konfiguratsiyani ishlatishimiz uchun routing.ts faylini yaratamiz:

src/i18n/routing.ts

import {defineRouting} from 'next-intl/routing';
 
export const routing = defineRouting({
  // Qo‘llab-quvvatlanadigan barcha tillar ro‘yxati locales: ['en', 'de'],
 
  // Mos keladigan til topilmasa, sukut bo‘yicha ishlatiladigan til defaultLocale: 'en'
});

⚡ Keyinchalik loyihangiz talabiga qarab routing konfiguratsiyasini kengaytirishingiz yoki o‘zgartirishingiz mumkin. Ammo hozircha sozlashni yakunlab olaylik.

1. Routing konfiguratsiyasi

src/i18n/navigation.ts

Routing sozlamalarimiz tayyor bo‘lgach, uni navigatsiya API’larida ishlatamiz:

import {createNavigation} from 'next-intl/navigation';
import {routing} from './routing';
 
// Next.js navigation API’larining yengil qadoqlari export const {Link, redirect, usePathname, useRouter, getPathname} =
  createNavigation(routing);

2. Middleware sozlash

src/middleware.ts

Routing konfiguratsiyasidan foydalanib, foydalanuvchining tilini aniqlaymiz va mos yo‘nalishga yo‘naltiramiz:

import createMiddleware from 'next-intl/middleware';
import {routing} from './i18n/routing';
 
export default createMiddleware(routing);
 
export const config = {
  matcher: '/((?!api|trpc|_next|_vercel|.*\\..*).*)'
};

Izoh:
matcher — middleware qaysi URL’larda ishlashini belgilaydi. Masalan, API chaqiruvlariga yoki statik fayllarga tegmaydi.

3. Server Components uchun request konfiguratsiyasi

src/i18n/request.ts

Bu faylda foydalanuvchining tanlangan tiliga mos xabarlar va sozlamalarni yuklaymiz:

import {getRequestConfig} from 'next-intl/server';
import {hasLocale} from 'next-intl';
import {routing} from './routing';
 
export default getRequestConfig(async ({requestLocale}) => {
  const requested = await requestLocale;
  const locale = hasLocale(routing.locales, requested)
    ? requested
    : routing.defaultLocale;
 
  return {
    locale,
    messages: (await import(`../../messages/${locale}.json`)).default
  };
});

4. Layout konfiguratsiyasi

src/app/[locale]/layout.tsx

Middleware aniqlagan tilni (locale) HTML <html> tegiga qo‘yamiz va i18n sozlamalarini NextIntlClientProvider orqali Client Components’ga uzatamiz:

import {NextIntlClientProvider, hasLocale} from 'next-intl';
import {notFound} from 'next/navigation';
import {routing} from '@/i18n/routing';
 
export default async function LocaleLayout({children, params}: {
  children: React.ReactNode;
  params: Promise<{locale: string}>;
}) {
  const {locale} = await params;
  if (!hasLocale(routing.locales, locale)) {
    notFound();
  }
 
  return (
    <html lang={locale}>
      <body>
        <NextIntlClientProvider>{children}</NextIntlClientProvider>
      </body>
    </html>
  );
}

5. Tarjimalarni komponentlarda ishlatish

Oddiy komponentlar uchun:
src/app/[locale]/page.tsx

import {useTranslations} from 'next-intl';
import {Link} from '@/i18n/navigation';
 
export default function HomePage() {
  const t = useTranslations('HomePage');
  return (
    <div>
      <h1>{t('title')}</h1>
      <Link href="/about">{t('about')}</Link>
    </div>
  );
}

Async komponentlar uchun:

import {getTranslations} from 'next-intl/server';
 
export default async function HomePage() {
  const t = await getTranslations('HomePage');
  return <h1>{t('title')}</h1>;
}

Shu bosqichlarni bajarib, siz Next.js 15 App Router bilan to‘liq ishlaydigan, bir nechta tillarni qo‘llab-quvvatlaydigan ilova yaratishingiz mumkin bo‘ladi. URL’lar /en/about yoki uz.example.com/about kabi ko‘rinadi, tarjimalar esa .json fayllardan yoki masofaviy manbalardan yuklanadi.