Next.js ilovasida App Routerdan foydalanayotgan holda xalqarolashtirishni (i18n) qanday amalga oshirish

Dunyo globalizatsiyalashgani sayin, veb-ishlab chiquvchilar uchun turli mamlakatlar va madaniyatlardan kelgan foydalanuvchilar ehtiyojlarini qondira oladigan ilovalarni yaratish muhimroq bo‘lib bormoqda. Bunga erishishning asosiy yo‘llaridan biri — xalqaro qo‘llab-quvvatlash (internationalization, i18n), u sizga ilovangizni turli tillarga, valyutalarga va sana formatlariga moslashtirish imkonini beradi.

Ushbu maqolada biz server tomonlama renderlash bilan React Next.js ilovangizga xalqaro qo‘llab-quvvatlashni qanday qo‘shishni ko‘rib chiqamiz. TL;DR: To‘liq misolni bu yerda ko‘ring.

Ushbu qo'llanma App Router dan foydalanayotgan Next.js ilovalari uchun mo'ljallangan.
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 joriy etish uchun avvalo i18n kutubxonasini tanlaymiz. Bir nechta mashhur kutubxonalar mavjud, jumladan next-intl. Biroq, ushbu misolda biz TacoTranslatedan foydalanamiz.

TacoTranslate ilg‘or sun'iy intellektdan foydalangan holda matnlaringizni har qanday tilga avtomatik tarjima qiladi va JSON fayllarini mashaqqatli boshqarishdan sizni ozod qiladi.

Terminalingizda npm orqali o‘rnatamiz:

npm install tacotranslate

2-qadam: TacoTranslate hisobini bepul yarating

Modulni o'rnatganingizdan so'ng, TacoTranslate hisobingizni, tarjima loyihangizni va 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, read/write kalit esa secret hisoblanadi. Masalan, ularni loyihangiz ildizidagi .env faylga qo'shishingiz mumkin.

TACOTRANSLATE_PUBLIC_API_KEY=123456
TACOTRANSLATE_SECRET_API_KEY=789010

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

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

• TACOTRANSLATE_DEFAULT_LOCALE: Standart zaxira lokal kodi. Ushbu misolda uni ingliz tili uchun en ga o'rnatamiz.
• TACOTRANSLATE_ORIGIN: Satrlaringiz saqlanadigan “papka”, masalan sayt URL manzili. Originlar haqida bu yerdan 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 avval olingan 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;

Biz tez orada avtomatik ravishda TACOTRANSLATE_API_KEY va TACOTRANSLATE_PROJECT_LOCALEni belgilaymiz.

Klientni alohida faylga yaratish uni keyinroq qayta ishlatishni osonlashtiradi. getLocales — bu ichki xato ishlov berish bilan ta'minlangan oddiy yordamchi funksiyadir. Endi /app/[locale]/tacotranslate.tsx nomli fayl yarating; u 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>
	);
}

E'tibor bering: 'use client'; bu mijoz tomonidagi komponent ekanligini ko'rsatadi.

Kontekst provayderi tayyor bo'lgach, /app/[locale]/layout.tsx nomli fayl yarating — bu ilovamizdagi asosiy (root) layout. E'tibor bering, ushbu yo'lda Dynamic Routes dan foydalanadigan papka mavjud bo'lib, 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‘sha til uchun tarjimalarni olish uchun Dynamic Route parametri [locale]dan foydalanmoqdamiz. Bundan tashqari, generateStaticParams loyihangiz uchun faollashtirilgan barcha locale kodlarining oldindan render qilinishini ta’minlaydi.

Endi, keling, birinchi sahifamizni yarataylik! Nomi /app/[locale]/page.tsx bo‘lgan 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 bildiruvchi revalidate o'zgaruvchisiga e'tibor bering.

4-qadam: Server tomonida renderlashni amalga oshirish

TacoTranslate server tomonli renderlashni qo‘llab-quvvatlaydi. Bu foydalanuvchi tajribasini keskin yaxshilaydi: tarjima qilingan mazmunni darhol ko‘rsatadi, avval tarjima qilinmagan mazmunning qisqa muddatli paydo bo‘lishi o‘rniga. Bundan tashqari, biz mijoz tomonida tarmoq so‘rovlarini o‘tkazmaymiz, 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 ravishda isProduction tekshiruvini o'zgartiring. Agar true, TacoTranslate ommaviy API kalitini taqdim etadi. 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.

Yo'nalish va qayta 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);
}

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 kodini ko'ring!

5-qadam: Joylashtiring va sinab ko'ring!

Tayyor! Endi siz Translate komponentiga har qanday satr qo‘shganingizda, React ilovangiz avtomatik ravishda tarjima qilinadi. E'tibor bering, API kalitiga read/write ruxsatlari berilgan muhitlargina yangi tarjima qilinadigan satrlarni yaratish imkoniga ega bo‘ladi. Biz bunday API kaliti bilan ishlab chiqarish ilovangizni sinab ko‘rish va jonli chiqishdan oldin yangi satrlarni qo‘shish uchun yopiq va xavfsiz staging muhitiga ega bo‘lishingizni tavsiya qilamiz. Bu sizning maxfiy API kalitingizni hech kim o‘g‘irlashidan va yangi, aloqasiz satrlarni qo‘shib tarjima loyihangizni keraksiz ravishda kattalashtirishdan himoya qiladi.

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!