Next.js ilovasida App Router ishlatilganda xalqarolashtirishni qanday amalga oshirish mumkin

Dunyo tobora globalizatsiyalashib borayotgan sari, veb dasturchilar uchun turli mamlakatlar va madaniyatlardan kelgan foydalanuvchilarga mos keladigan ilovalarni yaratish tobora muhimlashmoqda. Buni amalga oshirishning asosiy usullaridan biri bu xalqarolashtirish (i18n) bo‘lib, u sizga ilovangizni turli tillar, valyutalar va sana formatlariga moslashtirish imkonini beradi.

Ushbu maqolada biz React Next.js ilovangizga server tomonida rendering bilan xalqarolashtirishni qanday qo‘shish haqida ko‘rib chiqamiz. TL;DR: To‘liq misolni shu yerda ko‘ring.

Ushbu qo'llanma App Router dan foydalanuvchi Next.js ilovalari uchun moʻljallangan.
Agar siz Pages Router dan foydalanayotgan boʻlsangiz, uning oʻrniga ushbu qoʻllanmaga qarang.

1-qadam: i18n kutubxonasini o'rnating

Next.js ilovangizda xalqarolashtirishni amalga oshirish uchun avvalo bir i18n kutubxonasini tanlaymiz. Bir nechta mashhur kutubxonalar mavjud, jumladan next-intl. Ammo ushbu misolda biz TacoTranslatedan foydalanamiz.

TacoTranslate ilg‘or AI yordamida sizning satrlaringizni avtomatik ravishda istalgan tilga tarjima qiladi va JSON fayllarini zerikarli boshqaruvidan ozod qiladi.

Keling, uni npm yordamida terminalingizda o‘rnatamiz:

npm install tacotranslate

2-qadam: Bepul TacoTranslate hisobi yarating

Endi modul o‘rnatilgach, TacoTranslate hisobingizni, tarjima loyihangizni va bog‘langan API kalitlaringizni yaratish vaqti keldi. Bu yerda hisob yarating. Bu bepul va kredit karta qo‘shishingiz shart emas.

TacoTranslate ilovasi foydalanuvchi interfeysida loyiha yarating va uning API kalitlari bo‘limiga o‘ting. Birta read kalit va birta 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 ildizidagi .env faylga 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 shuningdek yana ikkita muhit o‘zgaruvchilarini qo‘shamiz: TACOTRANSLATE_DEFAULT_LOCALE va TACOTRANSLATE_ORIGIN.

• TACOTRANSLATE_DEFAULT_LOCALE: Standart qaytish tili kodi. Ushbu misolda biz uni ingliz tili uchun en ga o'rnatamiz.
• TACOTRANSLATE_ORIGIN: Sizning satrlaringiz saqlanadigan “papka”, masalan, veb-saytingiz URL manzili. Bu yerda originlar haqida ko'proq bilib oling.

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

3-qadam: TacoTranslate ni sozlash

TacoTranslate’ni ilovangizga integratsiya qilish uchun, oldingi API kalitlari yordamida 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 yaqinda avtomatik ravishda TACOTRANSLATE_API_KEY va TACOTRANSLATE_PROJECT_LOCALE ni belgilaymiz.

Mijozni alohida faylda yaratish keyinchalik uni qayta ishlatishni osonlashtiradi. getLocales shunchaki ba'zi ichki xatoliklarni boshqarish funksiyasi hisoblanadi. 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 'use client'; ning mijoz komponenti ekanligini ko'rsatishini unutmang.

Endi kontekst provayder tayyor bo'lganligi sababli, ilovamizdagi ildiz tartibini yaratish uchun /app/[locale]/layout.tsx nomli fayl yarating. Ushbu yo'lda Dynamic Routes dan foydalanilayotgan papka borligini, bunda [locale] 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 yerda birinchi e'tibor qilish kerak bo'lgan narsa, biz Dynamic Route parametri [locale] ni o'sha til uchun tarjimalarni olishda foydalanayotganmiz. Bundan tashqari, generateStaticParams sizning loyihangiz uchun faollashtirilgan barcha lokal kodlarning oldindan yaratilishini ta'minlamoqda.

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

Diqqat qiling, revalidate o'zgaruvchisi Next.js ga sahifani 60 soniyadan so'ng qayta qurishni va tarjimalaringizni yangilab turishni buyuradi.

4-qadam: Server tomoni renderini amalga oshirish

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

Server tomoni renderingini 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 moslashtiring. Agar true bo‘lsa, TacoTranslate jamoat API kalitini ko‘rsatadi. Agar biz mahalliy, sinov 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, bizga /middleware.ts nomli fayl yaratish kerak bo‘ladi. Middleware dan 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);
}

Iltimos, matcher ni Next.js Middleware hujjatlariga muvofiq sozlaganingizga ishonch hosil qiling.

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

5-qadam: Joylashtiring va sinab ko‘ring!

Tugatdik! Endi siz React ilovangizga har qanday satrlarni Translate komponentiga qo‘shganingizda, ular avtomatik tarzda tarjima qilinadi. E'tibor bering, faqat API kalitida read/write ruxsatlariga ega muhitlar yangi tarjima qilinadigan satrlarni yaratishi mumkin. Biz sizga yopiq va xavfsiz staging muhiti yaratishni tavsiya qilamiz, u yerda siz ishlab chiqish API kaliti bilan ishlab chiqarish ilovangizni sinab ko‘rishingiz, jonli efirga chiqishdan oldin yangi satrlarni qo‘shishingiz mumkin. Bu sizning maxfiy API kalitingizni o‘g‘irlashdan va tarjima loyihangizga yangi, aloqasiz satrlar qo‘shilib loyihani ortiqcha yuklashdan 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!