Next.js ilovasida App Router dan foydalangan holda xalqarolashtirishni qanday amalga oshirish mumkin

Dunyo tobora globalizatsiyalashgani sayin, veb dasturchilar uchun turli mamlakatlar va madaniyatlardan kelgan foydalanuvchilarga mos keladigan ilovalarni yaratish muhimroq bo‘lmoqda. Bunga erishishning asosiy yo‘llaridan biri – bu ixtiloflashtirish (i18n), ya'ni ilovangizni turli tillarga, valyutalarga va sana formatlariga moslashtirish imkonini beradi.

Ushbu maqolada biz React Next.js ilovangizga server tomonida render qilish bilan birga ixtiloflashtirishni qanday qo‘shish mumkinligini o‘rganamiz. TL;DR: To‘liq misolni shu yerdan ko‘ring.

Ushbu qo'llanma App Router dan foydalangan Next.js ilovalari uchun mo'ljallangan.
Agar siz Pages Router dan foydalansangiz, uning o'rniga ushbu qo'llanmani ko'ring.

1-qadam: i18n kutubxonasini o'rnating

Next.js ilovangizda xalqaro tillashtirishni 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 AI texnologiyasi yordamida 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-qadam: Bepul TacoTranslate akkauntini yarating

Endi modulni o‘rnatganingiz uchun, TacoTranslate hisobingizni, tarjima loyihangizni va bog‘langan API kalitlarini yaratish vaqti keldi. Bu yerdan hisob yaratishingiz mumkin. Bu bepul va kredit karta qo‘shishni talab qilmaydi.

TacoTranslate ilovasi foydalanuvchi interfeysida loyiha yarating va uning API kalitlari bo‘limiga o'ting. Bir dona read kalit va bir dona read/write kalit yarating. Ularni atrof-muhit o‘zgaruvchilari sifatida saqlaymiz. read kalitni biz public deb ataymiz, 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 mijoz tomonidagi ishlab chiqarish muhiti uchun hech qachon oshkor qilmaslikka ishonch hosil qiling.

Shuningdek, ikkita qo‘shimcha atrof-muhit o‘zgaruvchilarini qo‘shamiz: TACOTRANSLATE_DEFAULT_LOCALE va TACOTRANSLATE_ORIGIN.

• TACOTRANSLATE_DEFAULT_LOCALE: Sukut bo‘yicha qo‘llaniladigan til kodi. Ushbu misolda, uni ingliz tili uchun en ga o‘rnatamiz.
• TACOTRANSLATE_ORIGIN: Sizning matnlaringiz saqlanadigan “papka”, masalan, veb-saytingiz URL manzili. Asollar haqida batafsil o‘qing.

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

3-qadam: TacoTranslate sozlamalari

To integrate TacoTranslate with your application, you’ll need to create a client using the API keys from earlier. For example, create a file named /tacotranslate-client.js.

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_LOCALE ni avtomatik ravishda belgilaymiz.

Mijozni alohida faylda yaratish uni keyinchalik qayta ishlatishni osonlashtiradi. getLocales bu faqat ba'zi ichki xatoliklarni boshqarish funktsiyasidir. 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 mijoz komponenti ekanligini bildiruvchi 'use client'; ga e'tibor bering.

Endi kontekst provayder tayyor bo'lgani uchun, ilovamizdagi ildiz tartibini yaratish uchun /app/[locale]/layout.tsx nomli fayl yarating. Ushbu yo'lda Dynamic Routes dan foydalaniladigan papka borligini va [locale] — bu dinamik parametr ekanligini unutmang.

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 yerdagi birinchi e'tibor berilishi kerak bo'lgan nuqta shundaki, biz Dynamic Route parametri [locale] yordamida o'sha til uchun tarjimalarni olishimizdir. Bundan tashqari, generateStaticParams sizning loyihangiz uchun faollashtirilgan barcha lokal kodlarning oldindan yaratilishini ta'minlayapti.

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

Next.js ga sahifani 60 soniyadan so‘ng qayta qurishni va tarjimalaringizni yangilab turishni aytuvchi revalidate o‘zgaruvchisiga e'tibor bering.

4-qadam: Server tomonida renderingni amalga oshirish

TacoTranslate server tomoni renderingni qo‘llab-quvvatlaydi. Bu foydalanuvchi tajribasini sezilarli darajada yaxshilaydi, chunki tarjima qilingan kontentni darhol ko‘rsatiladi, avvaliga tarjima qilinmagan kontentning qisqa paydo bo‘lishi o‘rniga. Bundan tashqari, mijoz tomonidagi tarmoq so‘rovlarini o'tkazib yuborishimiz mumkin, chunki foydalanuvchi ko‘rayotgan sahifa uchun kerakli tarjimalar allaqachon mavjud.

Server tarafdagi renderingni 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};
};

O'zingizning sozlamangizga mos ravishda isProduction tekshiruvini o'zgartiring. Agar truebo'lsa, TacoTranslate ochiq API kalitini yuzaga chiqaradi. Agar biz mahalliy, test yoki bosqich muhitida bo'lsak (isProduction is false), yangi satrlar tarjima uchun yuborilganligiga ishonch hosil qilish uchun maxfiy read/write API kalitidan foydalanamiz.

Yo'naltirish va qayta yo'naltirish kutilganidek ishlashini ta’minlash uchun, bizga /middleware.ts nomli fayl yaratish kerak bo‘ladi. Middleware dan foydalanib, foydalanuvchilarni ularning afzal ko'rgan tilida taqdim etilgan sahifalarga yo'naltira olamiz.

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 hujjatlari ga muvofiq sozlashga ishonch hosil qiling.

Mijoz tomonida, foydalanuvchining afzal ko‘rilgan tilini o‘zgartirish uchun locale cookie faylini o‘zgartirishingiz mumkin. Buni qanday qilish bo‘yicha g‘oyalar uchun iltimos, to‘liq misol kodini ko‘rib chiqing!

5-qadam: Joylashtiring va sinovdan o'tkazing!

Ish tugadi! Endi siz istalgan matnni Translate komponentiga qo‘shganingizda, React ilovangiz avtomatik tarzda tarjima qilinadi. Faqatgina API kalitida read/write huquqlariga ega bo‘lgan muhitlar yangi tarjima qilinadigan matnlarni yaratish imkoniga ega ekanligini unutmang. Biz sizga yopiq va xavfsiz staging muhitini tashkil etishni tavsiya qilamiz, bu yerda siz ishlab chiqarish ilovangizni shunday API kaliti bilan sinab ko‘rishingiz mumkin, yangi matnlarni jonli holatga o‘tkazishdan oldin qo‘shish uchun. Bu esa sirli API kalitingizni o‘g‘irlashdan va tarjima loyihangizni muvofiqsiz, keraksiz matnlar bilan to‘ldirishdan himoya qiladi.

Albatta, to‘liq misolni GitHub profilimizda ko‘rib chiqing. U yerda siz Pages Router yordamida buni qanday qilish mumkinligi haqidagi misolni ham topasiz! Agar biror muammo yuzaga kelsa, bemalol bog‘laning, va biz yordam berishdan mamnun bo‘lamiz.

TacoTranslate sizga React ilovalarni har qanday tilga tez va oson avtomatik ravishda moslashtirish imkonini beradi. Bugunoq boshlang!