Next.js ilovasida, Pages Router ishlatilayotgan holda xalqarolashtirishni qanday amalga oshirish

Dunyo globalizatsiyalashgani sayin, veb‑dasturchilar uchun turli mamlakat va madaniyatlardagi foydalanuvchilarga mos keluvchi ilovalar yaratish tobora muhimlashmoqda. Bunga erishishning asosiy yo‘llaridan biri — internationalizatsiya (i18n), u ilovangizni turli tillarga, valyutalarga va sana formatlariga moslashtirish imkonini beradi.

Ushbu qo‘llanmada biz server tomonida renderlash bilan React Next.js ilovangizga internationalizatsiyani (i18n) qanday qo‘shishni ko‘rib chiqamiz. TL;DR: To‘liq misolni bu yerdan ko‘ring.

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

1-qadam: i18n kutubxonasini o'rnating

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

TacoTranslate zamonaviy sun'iy intellekt yordamida matnlaringizni istalgan tilga avtomatik tarjima qiladi va JSON fayllarini zerikarli boshqaruvidan ozod etadi.

Terminalingizda npm yordamida o'rnatamiz:

npm install tacotranslate

2-qadam: Bepul TacoTranslate hisobi yarating

Modulni o'rnatib bo'lgach, TacoTranslate hisobingizni, tarjima loyihangizni va unga tegishli API kalitlarini yaratish vaqti keldi. Hisob yaratish uchun bu yerni bosing. Bu bepul va kredit karta qo'shishingiz shart emas.

TacoTranslate ilovasining interfeysida proyekt 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 ildizidagi .env faylga qo'shishingiz mumkin.

TACOTRANSLATE_PUBLIC_API_KEY=123456
TACOTRANSLATE_SECRET_API_KEY=789010

Hech qachon sirli read/write API kalitini mijoz tomonidagi ishlab chiqarish muhitlariga oshkor qilmang.

Shuningdek, ikkita qo'shimcha muhit o'zgaruvchisini ham qo'shamiz: TACOTRANSLATE_DEFAULT_LOCALE va TACOTRANSLATE_ORIGIN.

• TACOTRANSLATE_DEFAULT_LOCALE: Standart zaxira 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 yerda 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 foydalanib mijoz (client) 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_DEFAULT_LOCALE ?? '',
});

module.exports = tacoTranslate;

Biz tez orada TACOTRANSLATE_API_KEYni avtomatik ravishda belgilaymiz.

Klientni alohida faylga yaratish uni keyinchalik qayta ishlatishni osonlashtiradi. Endi maxsus /pages/_app.tsx dan foydalanib, biz TacoTranslate provayderini qo'shamiz.

import React from 'react';
import {type AppProps} from 'next/app';
import {type Origin, type Locale, type Localizations} from 'tacotranslate';
import TacoTranslate from 'tacotranslate/react';
import TacoTranslateHead from 'tacotranslate/next/head';
import tacoTranslate from '../tacotranslate-client';

type PageProperties = {
	origin: Origin;
	locale: Locale;
	locales: Locale[];
	localizations: Localizations;
};

export default function App({Component, pageProps}: AppProps<PageProperties>) {
	const {origin, locale, locales, localizations} = pageProps;

	return (
		<TacoTranslate
			client={tacoTranslate}
			origin={origin}
			locale={locale}
			localizations={localizations}
		>
			<TacoTranslateHead rootUrl="https://your-website.com" locales={locales} />
			<Component {...pageProps} />
		</TacoTranslate>
	);
}

Agar sizda allaqachon moslashtirilgan pageProps va _app.tsx bo'lsa, iltimos, ta'rifni yuqoridagi xususiyatlar va kod bilan kengaytiring.

4-qadam: Server tomonida renderlashni amalga oshirish

TacoTranslate tarjimalaringizni server tomonida render qilishga imkon beradi. Bu foydalanuvchi tajribasini sezilarli darajada yaxshilaydi: avval tarjima qilinmagan matnning qisqa paydo bo‘lishi o‘rniga tarjima qilingan mazmun darhol namoyish etiladi. Bundan tashqari, bizda kerakli barcha tarjimalar allaqachon mavjudligi sababli mijoz tomonida tarmoq so‘rovlarini o‘tkazib yuborishimiz mumkin.

Biz /next.config.js faylini yaratish yoki o'zgartirishdan boshlaymiz.

const withTacoTranslate = require('tacotranslate/next/config').default;
const tacoTranslateClient = require('./tacotranslate-client');

module.exports = async () => {
	const config = {};

	return withTacoTranslate(config, {
		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'),
	});
};

Muhitingizga mos ravishda isProduction tekshiruvini o'zgartiring. Agar true, TacoTranslate ommaviy API kalitini ko'rsatadi. Agar biz lokal, test yoki staging muhitida bo'lsak (isProduction is false), yangi matnlar tarjimaga yuborilishini ta'minlash uchun maxfiy read/write API kalitidan foydalanamiz.

Hozirgacha biz Next.js ilovasini faqat qo‘llab‑quvvatlanadigan tillar ro‘yxati bilan sozlaganmiz. Keyingi qiladigan ishimiz — barcha sahifalaringiz uchun tarjimalarni olish. Buning uchun talablaringizga qarab getTacoTranslateStaticProps yoki getTacoTranslateServerSideProps dan birini ishlatasiz.

Ushbu funksiyalar uchta argumentni qabul qiladi: bitta Next.js Static Props Context obyekti, TacoTranslate konfiguratsiyasi va ixtiyoriy Next.js xususiyatlari. E'tibor bering, revalidate getTacoTranslateStaticPropsda sukut bo'yicha 60 ga o'rnatilgan, shuning uchun tarjimalaringiz doimo yangilangan bo'ladi.

Sahifada istalgan funksiyadan foydalanish uchun, masalan, sizda /pages/hello-world.tsx kabi sahifa fayli bor deb faraz qilaylik.

import {Translate} from 'tacotranslate/react';
import getTacoTranslateStaticProps from 'tacotranslate/next/get-static-props';
import tacoTranslateClient from '../tacotranslate-client';

export async function getStaticProps(context) {
	return getTacoTranslateStaticProps(context, {client: tacoTranslateClient});
}

export default function Page() {
	return <Translate string="Hello, world!"/>;
}

Endi barcha React komponentlaringizdagi matnlarni tarjima qilish uchun Translate komponentidan foydalanishingiz mumkin bo'lishi kerak.

import {Translate} from 'tacotranslate/react';

function Component() {
	return <Translate string="Hello, world!"/>
}

5-qadam: Joylashtiring va sinab ko'ring!

Tugatdik! Endi React ilovangizda Translate komponentiga matn qo‘shganingizda ular avtomatik tarzda tarjima qilinadi. E'tibor bering, faqat API kalitida read/write ruxsatlari mavjud bo‘lgan muhitlar yangi tarjima qilinadigan matnlarni yaratishi mumkin. Bunday API kalit bilan ishlab chiqarish ilovangizni sinab ko‘rishingiz va jonli foydalanishga uzatishdan oldin yangi matnlarni qo‘shishingiz uchun yopiq va xavfsiz sinov (staging) muhitiga ega bo‘lishingizni tavsiya qilamiz. Bu sizning maxfiy API kalitingizni hech kim o‘g‘irlashining oldini oladi va tarjima loyihangizga yangi, mavzuga aloqasi yo‘q matnlar qo‘shilib, loyihani shishib ketishining oldini oladi.

Albatta, GitHub profilimizdagi toʻliq misolni koʻrib chiqing. U yerdan, shuningdek, buni App Router yordamida qanday bajarish boʻyicha misolni ham topasiz! Agar biron muammo yuz bersa, bemalol murojaat qiling, biz yordam berishdan mamnun boʻlamiz.

TacoTranslate sizning React ilovangizni 75 dan ortiq tilga va ulardan avtomatik ravishda tezda mahalliylashtirishga imkon beradi. Bugun boshlang!