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

Dunyo globallashtirib borar ekan, web dasturchilar uchun turli mamlakatlar va madaniyatlardan bo‘lgan foydalanuvchilar ehtiyojiga mos keladigan ilovalar yaratish tobora muhimlashmoqda. Buni amalga oshirishning asosiy usullaridan biri — internationalizatsiya (i18n) bo‘lib, bu sizga ilovangizni turli tillar, valyutalar va sana formatlariga moslashtirish imkonini beradi.

Ushbu maqolada, React Next.js ilovangizga server tomonida rendering bilan internationalizatsiyani qanday qo‘shishni ko‘rib chiqamiz. TL;DR: To‘liq misolni shu yerda 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'llanmaga murojaat qiling.

1-qadam: i18n kutubxonasini o‘rnatish

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

TacoTranslate ilg‘or sun’iy intellekt yordamida matnlaringizni avtomatik ravishda har qanday tilga tarjima qiladi va JSON fayllarini zerikarli boshqarishdan ozod qiladi.

Keling, uni terminalingizda npm yordamida o‘rnatamiz:

npm install tacotranslate

2-qadam: Bepul TacoTranslate hisobini yarating

Endi modulni o‘rnatdingiz, TacoTranslate hisobingizni, tarjima loyihangizni va tegishli API kalitlarini yaratish vaqti keldi. Bu y yerda hisob yaratishingiz mumkin. Bu bepul va kredit karta qo‘shishni talab qilmaydi.

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

TACOTRANSLATE_PUBLIC_API_KEY=123456
TACOTRANSLATE_SECRET_API_KEY=789010

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

Biz yana ikkita muhit o‘zgaruvchilarini qo‘shamiz: TACOTRANSLATE_DEFAULT_LOCALE va TACOTRANSLATE_ORIGIN.

• TACOTRANSLATE_DEFAULT_LOCALE: Standart orqa joylashuv kodidir. Ushbu misolda, biz uni ingliz tili uchun en ga o’rnatamiz.
• TACOTRANSLATE_ORIGIN: Sizning satrlaringiz saqlanadigan “papka”, masalan, sayt URL manzilingiz. Bu yerda originlar haqida batafsil 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.

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 avtomatik ravishda TACOTRANSLATE_API_KEY va TACOTRANSLATE_PROJECT_LOCALE ni belgilaymiz.

Clientni alohida faylda yaratish uni keyinchalik qayta ishlatishni osonlashtiradi. getLocales faqat ba'zi ichki xatoliklarni qayta ishlash imkoniyatiga ega yordamchi funksiyadir. Endi /app/[locale]/tacotranslate.tsx nomli fayl yarating, u yerda 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 komponent ekanligini bildiruvchi 'use client'; ga e’tibor bering.

Endi kontekst provideri tayyor bo‘lgach, ilovamizdagi ildiz tartibini yaratish uchun /app/[locale]/layout.tsx nomli fayl yarating. Ushbu yo‘lda Dynamic Routes ishlatilgan qatlam mavjudligini unutmang, bunda [locale] dinamik parametr hisoblanadi.

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 narsa shuki, biz o‘zimizning Dynamic Route parametri [locale]dan ushbu til uchun tarjimalarni olish uchun foydalanayapmiz. Bundan tashqari, generateStaticParams sizning loyihangiz uchun faollashtirilgan barcha locale kodlari oldindan yaratilishini ta’minlamoqda.

Endi, birinchi sahifamizni yaratamiz! /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!" />
	);
}

revalidate o‘zgaruvchisiga e’tibor bering, u Next.js ga sahifani 60 soniyadan keyin qayta qurishni va tarjimalaringizni yangilangan holda saqlashni bildiradi.

4-qadam: Server tomonida render qilishni amalga oshirish

TacoTranslate server tomonlama renderingni qo'llab-quvvatlaydi. Bu foydalanuvchi tajribasini sezilarli darajada yaxshilaydi, chunki foydalanuvchiga avval tarjima qilinmagan kontentning flash ko‘rinishi o‘rniga tarjima qilingan kontent darhol ko‘rsatiladi. Bundan tashqari, mijoz tomondagi tarmoq so‘rovlarini o'tkazib yuborishimiz mumkin, chunki foydalanuvchi ko‘rib turgan sahifa uchun bizda allaqachon kerakli tarjimalar mavjud.

Server tomonlama renderingni sozlash uchun, /next.config.js faylini yarating yoki tahrir qiling:

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};
};

isProduction tekshiruvini o‘zingizning sozlamalaringizga moslang. Agar true bo‘lsa, TacoTranslate jamoatchilik API kalitini ko‘rsatadi. Agar biz mahalliy, test yoki staging muhitida bo‘lsak (isProduction is false), yangi satrlar tarjimaga yuborilishi uchun maxfiy read/write API kalitidan foydalanamiz.

Yo'naltirish va qayta yo'naltirish kutilganidek ishlashini ta'minlash uchun, /middleware.ts nomli fayl 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 sozlashga ishonch hosil qiling.

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

5-qadam: Joylashtiring va sinovdan o'tkazing!

Tugatdik! Endi sizning React ilovangizda har qanday matnni Translate komponentiga qo‘shganingizda u avtomatik ravishda tarjima qilinadi. E’tibor bering, faqat read/write huquqiga ega bo‘lgan muhitlar API kalit yordamida yangi tarjima qilinadigan matnlarni yaratishi mumkin. Biz sizga yopiq va xavfsiz staging muhitini tashkil etishni tavsiya qilamiz, bu yerda siz ishlab chiqarish ilovangizni shunday API kalit bilan sinab ko‘rishingiz va jonli ishlashdan oldin yangi matnlarni qo‘shishingiz mumkin. Bu esa sizning maxfiy API kalitingiz o‘g‘irlanishini oldini oladi va tarjima loyihangizga hech qanday aloqasi bo‘lmagan ortiqcha matnlar qo‘shilishining 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!