Next.js ilovasida App Router dan foydalangan holda xalqarolashtirishni (i18n) qanday amalga oshirish

Dunyo tobora globalizatsiyalashayotgani sababli, veb-ishlab chiquvchilar uchun turli mamlakatlar va madaniyatlardan bo‘lgan foydalanuvchilarga moslashadigan ilovalar yaratish tobora muhimlashmoqda. Buni amalga oshirishning asosiy yo‘llaridan biri — xalqarolashtirish (i18n), u 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 ushbu qo'llanmani ko'ring.

1-qadam: i18n kutubxonasini o'rnating

Next.js ilovangizda xalqaro qo'llab-quvvatlashni amalga oshirish uchun avvalo i18n kutubxonasini tanlaymiz. Bir nechta mashhur kutubxonalar mavjud, jumladan next-intl. Biroq, ushbu misolda biz TacoTranslate.

TacoTranslate eng ilg'or sun'iy intellekt yordamida satrlaringizni istalgan tilga avtomatik tarjima qiladi va JSON fayllarni zerikarli boshqarishdan xalos etadi.

Keling, terminalingizda npm orqali o'rnatamiz:

npm install tacotranslate

2-qadam: Bepul TacoTranslate hisobini yarating

Modulni o‘rnatgach, TacoTranslate hisobingizni, tarjima loyihangizni va unga tegishli API kalitlarini yaratish vaqti keldi. Bu yerda hisob yarating. Bu bepul va kredit karta qo‘shishingiz shart emas.

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

TACOTRANSLATE_PUBLIC_API_KEY=123456
TACOTRANSLATE_SECRET_API_KEY=789010

Sirli read/write API kalitini hech qachon klient tomonidagi ishlab chiqarish muhitlariga oshkor qilmang.

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

• TACOTRANSLATE_DEFAULT_LOCALE: Standart zaxira lokal kodi. Ushbu misolda biz uni ingliz tili uchun en ga o‘rnatamiz.
• TACOTRANSLATE_ORIGIN: Matnlaringiz saqlanadigan “papka”, masalan, veb-saytingizning URL manzili. Manbalar (origins) haqida bu yerda ko‘proq 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 foydalangan holda klient 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;

Tez orada biz avtomatik ravishda TACOTRANSLATE_API_KEY va TACOTRANSLATE_PROJECT_LOCALEni belgilaymiz.

Klientni alohida faylga yaratish uni keyinroq qayta ishlatishni oson qiladi. getLocales — bu faqat ba'zi ichki xatoliklarni boshqarish imkoniga ega yordamchi funktsiyadir. Endi /app/[locale]/tacotranslate.tsx nomli fayl yarating, unda 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>
	);
}

E'tibor bering: 'use client'; bu klient komponent ekanligini bildiradi.

Kontekst provayderi tayyor bo'lgach, ilovamizdagi asosiy layout sifatida /app/[locale]/layout.tsx nomli fayl yarating. E'tibor bering, bu yo'l Dynamic Routes ishlatiladigan 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 molik jihat shundaki, biz o‘sha til uchun tarjimalarni olish uchun Dynamic Route parametrimiz [locale]dan foydalanmoqdamiz. Bundan tashqari, generateStaticParams loyihangizda faollashtirgan barcha locale kodlari oldindan render qilinishini taʼminlaydi.

Endi 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!" />
	);
}

Next.js'ga sahifani 60 soniyadan so'ng qayta qurishini va tarjimalaringizni dolzarb holda saqlashini aytuvchi revalidate o'zgaruvchisiga e'tibor bering.

4-qadam: Server tomonida render qilishni amalga oshirish

TacoTranslate server tomonida renderlashni qo‘llab‑quvvatlaydi. Bu foydalanuvchi tajribasini juda yaxshilaydi, chunki avvaliga tarjima qilinmagan mazmunning bir lahzalik ko‘rinishi o‘rniga tarjima qilingan mazmun darhol ko‘rsatiladi. Bundan tashqari, mijoz tomonida tarmoq so‘rovlarini o‘tkazishimiz shart emas, 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 bo'lsa, TacoTranslate ommaviy API kalitini ko'rsatadi. Agar biz mahalliy, test yoki staging muhitida bo'lsak (isProduction is false), yangi matnlar tarjimaga yuborilishini ta'minlash uchun maxfiy read/write API kalitidan foydalanamiz.

Marshrutlash va yo'naltirish kutilganidek ishlashini ta'minlash uchun /middleware.ts nomli fayl yaratishimiz kerak bo'ladi. Middlewaredan foydalanib, 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!

Hammasi tayyor! Endi Translate komponentiga har qanday matn qo‘shganingizda, sizning React ilovangiz avtomatik ravishda tarjima qilinadi. E’tibor bering, faqat API kalitida read/write ruxsatiga ega muhitlar yangi tarjima qilinadigan matnlarni yaratishi mumkin. Shunday API kaliti bilan ishlab chiqarish ilovangizni sinab ko‘rishingiz va jonli ishga tushirishdan oldin yangi matnlarni qo‘shishingiz uchun yopiq va xavfsiz staging muhitiga ega bo‘lishingizni tavsiya qilamiz. Bu sizning maxfiy API kalitingiz o‘g‘irlanishini va tarjima loyihangizning yangi, bog‘lanmagan matnlar bilan ortiqcha to‘ldirilishini oldini oladi.

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!