Next.js ilovasida App Router dan foydalanayotganda xalqaro tillashtirishni qanday amalga oshirish

Dunyo tobora globallashib borar ekan, veb-ishlab chiquvchilar uchun turli mamlakatlar va madaniyat vakillariga mos keladigan ilovalarni yaratish tobora muhimlashmoqda. Bunga erishishning asosiy yoʻllaridan biri — ilovangizni turli tillarga, valyutalarga va sana formatlariga moslashtirish imkonini beruvchi xalqaro moslashtirish (i18n).

Ushbu maqolada biz React Next.js ilovangizga server tarafdan renderlash bilan xalqaro moslashtirishni qanday qoʻshishni koʻrib chiqamiz. TL;DR: To'liq misolni bu yerda koʻring.

Bu qo'llanma App Routerdan foydalanayotgan Next.js ilovalari uchun mo'ljallangan.
Agar siz Pages Routerdan foydalanayotgan bo'lsangiz, uning o'rniga ushbu qo'llanmaga qarang.

1-qadam: i18n kutubxonasini o'rnating

Next.js ilovangizda xalqaro moslashuvni (i18n) amalga oshirish uchun avvalo i18n kutubxonasini tanlaymiz. Bir nechta mashhur kutubxonalar mavjud, jumladan next-intl. Biroq, ushbu misolda biz TacoTranslate-dan foydalanamiz.

TacoTranslate ilg‘or sun’iy intellektdan foydalangan holda matnlaringizni avtomatik ravishda istalgan tilga tarjima qiladi va JSON fayllarini zerikarli boshqarishdan sizni ozod qiladi.

Keling, uni terminalingizda npm yordamida o'rnatamiz:

npm install tacotranslate

2-bosqich: Bepul TacoTranslate hisob qaydnomasini yarating.

Modulni o'rnatib bo'lgach, TacoTranslate hisobingizni, tarjima loyihangizni va unga tegishli API kalitlarini yaratish vaqti keldi. Bu yerda hisob yarating. Bu bepul va kredit karta kiritishingiz 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, read/write kalit esa secret hisoblanadi. Masalan, ularni loyiha ildizidagi .env faylga 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.

Biz shuningdek yana ikkita muhit o'zgaruvchisini qo'shamiz: TACOTRANSLATE_DEFAULT_LOCALE va TACOTRANSLATE_ORIGIN.

• TACOTRANSLATE_DEFAULT_LOCALE: Sukut bo'yicha foydalaniladigan lokal kodi. Ushbu misolda biz uni ingliz tili uchun en ga o'rnatamiz.
• TACOTRANSLATE_ORIGIN: Sizning 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 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 TACOTRANSLATE_API_KEY va TACOTRANSLATE_PROJECT_LOCALE ni avtomatik ravishda belgilaymiz.

Klientni alohida faylda yaratish uni keyinchalik qayta ishlatishni osonlashtiradi. getLocales — bu ichki xatoliklarni ushlash bilan ta'minlangan yordamchi funksiya. Endi /app/[locale]/tacotranslate.tsx nomli fayl yarating, bu 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 klient komponenti ekanini bildiruvchi 'use client';ga e'tibor bering.

Kontekst provayderi endi ishga tayyor bo'lgani uchun, ilovamizning ildiz layouti bo‘lgan /app/[locale]/layout.tsx nomli faylni yarating. E'tibor bering, bu yo‘l Dynamic Routes dan foydalanadigan papkani o‘z ichiga oladi; bu yerda [locale] — dinamik parametr.

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 olish kerak bo'lgan narsa shundaki, biz shu til uchun tarjimalarni olish uchun Dynamic Route parametri [locale] dan foydalanmoqdamiz. Bundan tashqari, generateStaticParams loyihangiz uchun siz 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 yaratishini va tarjimalaringizni yangilab turishini bildiruvchi revalidate o'zgaruvchisiga e'tibor bering.

4-qadam: Server tomonida render qilishni amalga oshirish

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

Server tomonida render qilishni 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 kelishi uchun isProduction tekshiruvini o'zgartiring. Agar true, TacoTranslate ommaviy API kalitini ko'rsatadi. Agar biz mahalliy, 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, biz /middleware.ts nomli fayl yaratishimiz kerak. Middleware-dan foydalanib, foydalanuvchilarni ularning afzal tilida ko'rsatilgan 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 sozlanganligiga ishonch hosil qiling.

Klient tomonda, foydalanuvchining afzal tilini o'zgartirish uchun locale cookie-ni o'zgartirishingiz mumkin. Buni qanday amalga oshirish haqida g'oyalar olish uchun to'liq misol kodini ko'rib chiqing!

5-qadam: Joylashtiring va sinab ko'ring!

Tayyor! Siz Translate komponentiga har qanday satr qo‘shganingizda, React ilovangiz endi avtomatik tarzda tarjima qilinadi. E’tibor bering, yangi tarjima qilinadigan satrlarni yaratish imkoniyati faqat API kalitida read/write ruxsatlariga ega bo‘lgan muhitlarga beriladi. Bunday API kalit bilan ishlab chiqarish ilovangizni sinab ko‘rish va jonli rejimga chiqishdan avval yangi satrlarni qo‘shish uchun yopiq va xavfsiz staging muhitiga ega bo‘lishingizni tavsiya qilamiz. Bu sirli API kalitingizni o‘g‘irlashdan himoya qiladi va yangi, mavzuga aloqasi yo‘q satrlarni qo‘shib, tarjima loyihangizning ortiqcha yuklanishining 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!