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

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.

Ushbu qo'llanma Next.js ilovalari uchun mo'ljallangan, ular App Routerdan foydalanadi.
Agar siz Pages Routerdan foydalanayotgan bo'lsangiz, uning o'rniga ushbu qo'llanmani ko'rib chiqing.

1-qadam: i18n kutubxonasini o'rnating

Next.js ilovangizga xalqarolashtirishni joriy etish uchun avvalo i18n kutubxonasini tanlaymiz. Bir nechta mashhur kutubxonalar mavjud, jumladan next-intl. Biroq, ushbu misolda biz TacoTranslate ishlatamiz.

TacoTranslate zamonaviy sun'iy intellekt yordamida matnlaringizni istalgan tilda avtomatik tarjima qiladi va JSON fayllarini zerikarli boshqarishdan xalos etadi.

Uni terminalingizda npm yordamida o'rnatamiz:

npm install tacotranslate

2-qadam: Bepul TacoTranslate hisobini yarating

Modulni o‘rnatib bo‘lgach, TacoTranslate hisobingizni, tarjima loyihangizni va unga tegishli API kalitlarini yaratish vaqti keldi. Hisob yaratish uchun shu yerni bosing. Bu bepul va kredit karta qo‘shishni talab qilmaydi.

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

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

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

• TACOTRANSLATE_DEFAULT_LOCALE: Standart zaxira (fallback) lokal kodi. Ushbu misolda biz uni ingliz tili uchun en ga o'rnatamiz.
• TACOTRANSLATE_ORIGIN: Satrlaringiz saqlanadigan “papka”, masalan veb-saytingizning 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 ilgari 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_LOCALE ni 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>
	);
}

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

Kontekst provayderi endi tayyor bo'lgach, ilovamizda ildiz layout sifatida /app/[locale]/layout.tsx nomli fayl yarating. E'tibor bering, ushbu yo'l Dynamic Routes-ni ishlatadigan papkani o'z ichiga oladi; bu yerda [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'tibor berish kerak bo'lgan narsa shundaki, biz o'sha til uchun tarjimalarni olish uchun Dynamic Route parametrimiz [locale]dan foydalanmoqdamiz. Bundan tashqari, generateStaticParams loyihangiz uchun faollashtirilgan barcha locale kodlari oldindan-render qilingan bo'lishini 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 sahifani 60 soniyadan keyin qayta qurishini va tarjimalaringizni yangilangan holda saqlashni bildiruvchi revalidate o'zgaruvchisiga e'tibor bering.

4-qadam: Server tomonida render qilishni amalga oshirish

TacoTranslate server tomonida renderlashni qo‘llab‑quvvatlaydi. Bu foydalanuvchi tajribasini sezilarli darajada yaxshilaydi: avval tarjima qilinmagan kontentning bir zumda ko‘rinib qolishi o‘rniga, tarjima qilingan mazmun darhol ko‘rsatiladi. Bundan tashqari, mijoz tomonidagi tarmoqqa so‘rovlarni o‘tkazishimiz shart emas, chunki foydalanuvchi ko‘rib turgan 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 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, /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);
}

matcher ni Next.js Middleware dokumentatsiyasiga muvofiq sozlaganingizga ishonch hosil qiling.

Klient tomonida, foydalanuvchining afzal tilini o'zgartirish uchun locale cookie-ni o'zgartirishingiz mumkin. Buni qanday qilish haqida g'oyalar uchun to'liq namunaviy kodga qarang!

5-qadam: Joylashtiring va sinab ko'ring!

Tugatdik! Endi Translate komponentiga har qanday matn qo‘shganingizda, sizning React ilovangiz avtomatik tarzda tarjima qilinadi. E’tibor bering, API kalitiga read/write ruxsatlari berilgan muhitlardagina yangi tarjima qilinadigan matnlarni yaratish mumkin bo‘ladi. Biz bunday API kalitidan foydalanib ishlab chiqarish ilovangizni sinab ko‘rishingiz uchun yopiq va xavfsiz staging muhitiga ega bo‘lishingizni tavsiya qilamiz — yangi matnlarni jonli chiqishdan oldin qo‘shing. Bu maxfiy API kalitingizni hech kim o‘g‘irlashining oldini oladi va, shuningdek, yangi, aloqasiz matnlarni qo‘shib tarjima loyihangizni ortiqcha to‘ldirib yuborilishiga yo‘l qo‘ymaydi.

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!