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

Dunyo tobora globalizatsiyalashib borayotgani sababli, veb dasturchilar uchun turli mamlakatlar va madaniyatdagi foydalanuvchilarga mo‘ljallangan ilovalarni yaratish tobora muhimlashmoqda. Bunga erishishning asosiy yo‘llaridan biri — xalqaro moslashuv (i18n), bu sizga ilovangizni turli tillar, valyutalar va sana formatlariga moslashtirish imkonini beradi.

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

Ushbu qo‘llanma App Router dan foydalanuvchi 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 tillashishni amalga oshirish uchun avvalo i18n kutubxonasini tanlaymiz. Mashhur kutubxonalar orasida next-intl ham bor. Biroq, ushbu misolda biz TacoTranslate dan foydalanamiz.

TacoTranslate ilg‘or sun’iy intellekt yordamida matnlaringizni avtomatik ravishda istalgan tilga tarjima qiladi va JSON fayllarini charchatadigan boshqaruvdan sizni ozod qiladi.

Keling, terminalingizda npm yordamida uni o‘rnatamiz:

npm install tacotranslate

2-qadam: Bepul TacoTranslate hisobini yarating

Endi 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 ilovasi UI ichida 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 kalitga biz public deb nom beramiz, va read/write kalit esa secret deb ataladi. Masalan, ularni loyihangiz ildizidagi .env fayliga qo‘shishingiz mumkin.

TACOTRANSLATE_PUBLIC_API_KEY=123456
TACOTRANSLATE_SECRET_API_KEY=789010

Maxfiy read/write API kalitini mijoz tomonidagi ishlab chiqarish muhitlariga hech qachon oshkor qilmaslikka albatta e'tibor bering.

Shuningdek, ikkita muhit o‘zgaruvchisini qo‘shamiz: TACOTRANSLATE_DEFAULT_LOCALE va TACOTRANSLATE_ORIGIN.

• TACOTRANSLATE_DEFAULT_LOCALE: Standart zaxira mintaqa 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 o‘qing.

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

3-qadam: TacoTranslate-ni sozlash

TacoTranslate ni ilovangizga integratsiya qilish uchun, oldin olingan API kalitlaridan foydalanib, client 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 aniqlaymiz.

Mijozni alohida faylda yaratish uni keyinchalik qayta ishlatishni osonlashtiradi. getLocales bu faqatgina ichki xato boshqaruvi bilan ta’minlangan yordamchi funksiya. 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>
	);
}

Iltimos, 'use client'; bu komponent mijoz qismi ekanligini bildirayotganiga e'tibor bering.

Kontekst provayderi tayyor bo‘lib qolganidan so‘ng, /app/[locale]/layout.tsx nomli fayl yarating, bu bizning ilovamizdagi asosiy layout. E'tibor bering, bu yo‘l Dynamic Routes dan foydalanadigan papkaga ega bo‘lib, unda [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 jihat shundaki, biz til tarjimalarini olish uchun Dynamic Route parametri [locale] dan foydalanmoqdamiz. Shuningdek, generateStaticParams loyihangiz uchun faollashtirilgan barcha til kodlari oldindan yaratilishini ta'minlamoqda.

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 keyin qayta qurishni va tarjimalaringizni doimo yangilangan holda saqlashni aytadigan revalidate o‘zgaruvchisiga e’tibor bering.

4-qadam: Server tomonlama renderingni amalga oshirish

TacoTranslate server tomoni renderingni qo‘llab-quvvatlaydi. Bu foydalanuvchi tajribasini sezilarli darajada yaxshilaydi, chunki avval tarjima qilinmagan kontentning qisqa ko‘rinishini ko‘rsatish o‘rniga, to‘g‘ridan-to‘g‘ri tarjima qilingan mazmunni namoyish etadi. Bundan tashqari, mijoz tomonida tarmoqli so‘rovlarni o‘tkazib yuborishimiz mumkin, chunki foydalanuvchi ko‘rayotgan sahifa uchun zaruriy tarjimalar allaqachon mavjud.

Server tomoni renderingini 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};
};

isProduction tekshiruvini o‘z sozlamalaringizga moslashtiring. Agar true bo‘lsa, TacoTranslate jamoat API kalitini ko‘rsatadi. Agar biz lokal, 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 dan foydalangan holda, foydalanuvchilarni ularning tanlagan 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'rgan tilini o'zgartirish uchun locale cookie faylini o'zgartirishingiz mumkin. Buni qanday qilish bo‘yicha g‘oyalar uchun to‘liq misol kodini ko‘rib chiqing!

5-qadam: Joylashtiring va sinab ko‘ring!

Tugadi! Endi sizning React ilovangizda har qanday satrni Translate komponentiga qo‘shganingizda avtomatik tarzda tarjima qilinadi. E'tiborga olingki, faqat API kalitida read/write ruxsatlarga ega muhitlar tarjima uchun yangi satrlar yaratish imkoniga ega bo‘ladi. Biz ishlab chiqarish ilovangizni bunday API kalit bilan sinab ko‘rishingiz uchun yopiq va xavfsiz staging muhiti bo‘lishini tavsiya qilamiz, yangi satrlarni jonli ishga tushirishdan oldin qo‘shib borishingiz mumkin. Bu sizning maxfiy API kalitingizni o‘g‘irlashni oldini oladi va tarjima loyihangizni yangi, aloqasi yo‘q satrlar bilan ortib ketishidan saqlaydi.

Albatta, to‘liq misolni GitHub profilimizda ko‘rib chiqing. U yerda siz Pages Routerdan foydalanib qanday qilishni ko‘rsatadigan misolni ham topasiz! Agar biron-bir muammo yuzaga kelsa, bemalol biz bilan bog‘laning, va biz sizga yordam berishdan mamnun bo‘lamiz.

TacoTranslate React ilovalaringizni istalgan tilga va tildan avtomatik ravishda tezda lokalizatsiya qilish imkonini beradi. Bugunoq boshlang!