Next.js ilovasida, App Router dan foydalanayotganingizda xalqarolashtirishni (i18n) qanday amalga oshirish

Dunyo tobora globalizatsiyalanib borayotgan sayin, veb-ishlab chiquvchilar uchun turli mamlakat va madaniyat vakillariga mos ilovalar yaratishning ahamiyati ortib bormoqda. Bunga erishishning asosiy usullaridan biri — xalqarolashtirish (i18n), bu ilovangizni turli tillar, valyutalar va sana formatlariga moslashtirish imkonini beradi.

Ushbu maqolada biz React Next.js ilovangizga server tomonida renderlash bilan birga xalqarolashtirishni qanday qo‘shishni o‘rganamiz. TL;DR: To‘liq misolni bu yerdan ko‘ring.

Ushbu qo'llanma App Router dan foydalanadigan Next.js ilovalari uchun.
Agar siz Pages Router dan foydalanayotgan bo'lsangiz, uning o'rniga bu qo'llanmaga qarang.

1-qadam: i18n kutubxonasini o'rnating

Next.js ilovangizda xalqarolashtirishni amalga oshirish uchun avvalo i18n kutubxonasini tanlaymiz. Bir nechta mashhur kutubxonalar mavjud, jumladan next-intl. Ammo ushbu misolda biz TacoTranslate dan foydalanamiz.

TacoTranslate zamonaviy AI yordamida satrlaringizni istalgan tilga avtomatik tarjima qiladi va JSON fayllarini zerikarli boshqarishdan sizni ozod qiladi.

Keling, terminalingizda npm orqali uni o'rnatamiz:

npm install tacotranslate

2-qadam: Bepul TacoTranslate hisobini yarating

Modulni o'rnatganingizdan so'ng, TacoTranslate hisobingizni, tarjima loyihangizni va unga tegishli API kalitlarini yaratish vaqti keldi. Bu yerda hisob yarating. Bu bepul va kredit karta qo'shishingizni talab qilmaydi.

TacoTranslate ilovasining foydalanuvchi interfeysida loyiha yarating va uning API kalitlari bo'limiga o'ting. Bir dona read kalit va bir dona read/write kalit yarating. Ularni muhit o'zgaruvchilari sifatida saqlaymiz. read kalitni biz public deb ataymiz va read/write kalit secret hisoblanadi. Masalan, ularni loyihangiz ildizidagi .env fayliga qo'shishingiz mumkin.

TACOTRANSLATE_PUBLIC_API_KEY=123456
TACOTRANSLATE_SECRET_API_KEY=789010

Sirli read/write API kalitini mijoz tomonidagi ishlab chiqarish muhitlariga hech qachon oshkor qilmasligingizga ishonch hosil qiling.

Shuningdek, yana ikkita muhit o'zgaruvchisini qo'shamiz: TACOTRANSLATE_DEFAULT_LOCALE va TACOTRANSLATE_ORIGIN.

• TACOTRANSLATE_DEFAULT_LOCALE: Sukut bo‘yicha zaxira (fallback) lokal kodi. Ushbu misolda uni ingliz tili uchun en deb belgilaymiz.
• TACOTRANSLATE_ORIGIN: Satrlaringiz saqlanadigan “papka”, masalan veb-saytingizning URL manzili. Originlar haqida batafsil ma'lumotni bu yerdan o‘qing.

TACOTRANSLATE_DEFAULT_LOCALE=en
TACOTRANSLATE_ORIGIN=your-website-url.com

3-qadam: TacoTranslate-ni sozlash

TacoTranslate'ni ilovangizga integratsiya qilish uchun, avvalgi API kalitlaridan foydalanib mijoz (client) yaratishingiz kerak bo'ladi. Masalan, /tacotranslate-client.js nomli fayl yarating.

const {default: createTacoTranslateClient} = require('tacotranslate');

const tacoTranslate = createTacoTranslateClient({
	apiKey:
		process.env.TACOTRANSLATE_SECRET_API_KEY ??
		process.env.TACOTRANSLATE_PUBLIC_API_KEY ??
		process.env.TACOTRANSLATE_API_KEY,
	projectLocale:
		process.env.TACOTRANSLATE_IS_PRODUCTION === 'true'
			? process.env.TACOTRANSLATE_PROJECT_LOCALE
			: undefined,
});

module.exports = tacoTranslate;

Biz tez orada TACOTRANSLATE_API_KEY va TACOTRANSLATE_PROJECT_LOCALEni avtomatik ravishda belgilaymiz.

Clientni alohida faylga yaratish uni keyinchalik qayta ishlatishni osonlashtiradi. getLocales — bu ichida xatoliklarni qayta ishlash mexanizmi mavjud bo‘lgan oddiy yordamchi funksiya. Endi /app/[locale]/tacotranslate.tsx nomli fayl yarating; shu yerda biz TacoTranslate provayderini amalga oshiramiz.

'use client';

import React, {type ReactNode} from 'react';
import {
	type TranslationContextProperties,
	TacoTranslate as ImportedTacoTranslate,
} from 'tacotranslate/react';
import tacoTranslateClient from '@/tacotranslate-client';

export default function TacoTranslate({
	locale,
	origin,
	localizations,
	children,
}: TranslationContextProperties & {
	readonly children: ReactNode;
}) {
	return (
		<ImportedTacoTranslate
			client={tacoTranslateClient}
			locale={locale}
			origin={origin}
			localizations={localizations}
		>
			{children}
		</ImportedTacoTranslate>
	);
}

Bu 'use client'; klient komponenti ekanligini bildirayotganiga e'tibor bering.

Kontekst provayderi tayyor bo'lgach, ilovamizdagi ildiz layout sifatida /app/[locale]/layout.tsx nomli fayl yarating. E'tibor bering, bu yo'l Dynamic Routes dan foydalanadigan papkani o'z ichiga oladi, bunda [locale] dinamik parametrdir.

import React, {type ReactNode} from 'react';
import {type Locale, isRightToLeftLocaleCode} from 'tacotranslate';
import './global.css';
import tacoTranslateClient from '@/tacotranslate-client';
import TacoTranslate from './tacotranslate';

export async function generateStaticParams() {
	const locales = await tacoTranslateClient.getLocales();
	return locales.map((locale) => ({locale}));
}

type RootLayoutParameters = {
	readonly params: Promise<{locale: Locale}>;
	readonly children: ReactNode;
};

export default async function RootLayout({params, children}: RootLayoutParameters) {
	const {locale} = await params;
	const origin = process.env.TACOTRANSLATE_ORIGIN;
	const localizations = await tacoTranslateClient.getLocalizations({
		locale,
		origins: [origin /* , other origins to fetch */],
	});

	return (
		<html lang={locale} dir={isRightToLeftLocaleCode(locale) ? 'rtl' : 'ltr'}>
			<body>
				<TacoTranslate
					locale={locale}
					origin={origin}
					localizations={localizations}
				>
					{children}
				</TacoTranslate>
			</body>
		</html>
	);
}

Bu yerda birinchi e'tiborga loyiq jihat shundaki, biz ushbu til uchun tarjimalarni olishda Dynamic Route parametrimiz [locale]dan foydalanayapmiz. Bundan tashqari, generateStaticParams loyiha uchun faollashtirgan barcha lokal kodlarining oldindan render qilinganligiga ishonch hosil qiladi.

Endi keling, birinchi sahifamizni yarataylik! /app/[locale]/page.tsx nomli fayl yarating.

import React from 'react';
import {Translate} from 'tacotranslate/react';

export const revalidate = 60;
export default async function Page() {
	return (
		<Translate string="Hello, world!" />
	);
}

Sahifani 60 soniyadan so'ng qayta qurishni va tarjimalaringizni yangilab turishni Next.js-ga buyuruvchi revalidate o'zgaruvchisiga e'tibor bering.

4-qadam: Server tomonida renderlashni amalga oshirish

TacoTranslate server tarafdan renderlashni qo‘llab‑quvvatlaydi. Bu foydalanuvchi tajribasini sezilarli darajada yaxshilaydi, chunki avvaliga tarjima qilinmagan kontentning yorqincha ko‘rinishi o‘rniga tarjima qilingan mazmunni darhol ko‘rsatadi. Bundan tashqari, mijoz tomonida tarmoq so‘rovlarini o‘tkazib yuborishimiz mumkin, chunki foydalanuvchi ko‘rayotgan sahifa uchun kerakli tarjimalarimiz allaqachon mavjud.

Server tomonida renderlashni sozlash uchun /next.config.js faylini yarating yoki o'zgartiring:

const withTacoTranslate = require('tacotranslate/next/config').default;
const tacoTranslateClient = require('./tacotranslate-client');

module.exports = async () => {
	const config = await withTacoTranslate(
		{},
		{
			client: tacoTranslateClient,
			isProduction:
				process.env.TACOTRANSLATE_ENV === 'production' ||
				process.env.VERCEL_ENV === 'production' ||
				(!(process.env.TACOTRANSLATE_ENV || process.env.VERCEL_ENV) &&
					process.env.NODE_ENV === 'production'),
		}
	);

	// NOTE: Remove i18n from config when using the app router
	return {...config, i18n: undefined};
};

Sozlamalaringizga mos ravishda isProduction tekshiruvini o'zgartiring. Agar true, TacoTranslate ommaviy API kalitini taqdim etadi. Agar biz lokal, test yoki staging muhitida bo'lsak (isProduction is false), yangi satrlar tarjimaga yuborilishini ta'minlash uchun maxfiy read/write API kalitidan foydalanamiz.

Yo'naltirish va qayta yo'naltirish kutilganidek ishlashini ta'minlash uchun, /middleware.ts nomli faylni yaratishimiz kerak bo'ladi. Middleware yordamida foydalanuvchilarni ularning afzal ko'rgan tilida taqdim etilgan sahifalarga yo'naltirishimiz mumkin.

import {type NextRequest} from 'next/server';
import {middleware as tacoTranslateMiddleware} from 'tacotranslate/next';
import tacoTranslate from '@/tacotranslate-client';

export const config = {
	matcher: ['/((?!api|_next|favicon.ico).*)'],
};

export async function middleware(request: NextRequest) {
	return tacoTranslateMiddleware(tacoTranslate, request);
}

Iltimos, matcher ni Next.js Middleware hujjatlariga muvofiq sozlaganingizga ishonch hosil qiling.

Klient tomonida foydalanuvchining afzal tilini o'zgartirish uchun locale cookie'ni o'zgartirishingiz mumkin. Buni qanday qilish bo'yicha g'oyalar uchun to'liq misol kodiga qarang!

5-qadam: Joylashtiring va sinab ko'ring!

Tugatdik! Endi siz Translate komponentiga har qanday satrlarni qo‘shganingizda, React ilovangiz avtomatik tarzda tarjima qilinadi. E'tibor bering, faqat API kalitida read/write ruxsatlari bo‘lgan muhitlar yangi tarjima qilinadigan satrlarni yaratishi mumkin. Bunday API kalit bilan ishlab chiqarish ilovangizni sinab ko‘rish uchun yopiq va himoyalangan staging muhitiga ega bo‘lishingizni tavsiya qilamiz; bu orqali jonli chiqishdan oldin yangi satrlarni qo‘shishingiz mumkin. Bu sirli API kalitingizni hech kim o‘g‘irlashining oldini oladi va tarjima loyihangizga yangi, aloqasiz satrlar qo‘shib loyihani ortiqcha yuklanishidan saqlaydi.

Be sure to check out the complete example over at our GitHub profile. There, you’ll also find an example of how to do this using the Pages Router! If you encounter any problems, feel free to reach out, and we’ll be more than happy to help.

TacoTranslate lets you automatically localize your React applications quickly to and from over 75 languages. Get started today!