Next.js ilovasida, Pages Router ishlatayotgan holda xalqaro moslashtirishni qanday amalga oshirish mumkin

Dunyo globalizatsiyalashgani sari, veb ishlab chiquvchilar uchun turli mamlakatlar va madaniyatlardan kelgan foydalanuvchilarga mos keladigan ilovalar yaratish tobora muhimlashmoqda. Bunga erishishning asosiy usullaridan biri — xalqarolashtirish (i18n), bu sizga ilovangizni turli tillar, valyutalar va sana formatlariga moslashtirish imkonini beradi.

Ushbu qo'llanmada biz React Next.js ilovangizga server tomonida renderlash bilan xalqarolashtirishni (i18n) qanday qo'shishni o'rganamiz. TL;DR: To'liq misolni bu yerdan ko'ring.

Ushbu qo'llanma Pages Routerni ishlatayotgan Next.js ilovalari uchun mo'ljallangan.
Agar siz App Routerni ishlatayotgan bo'lsangiz, iltimos, uning o'rniga ushbu qo'llanmaga qarang.

1-qadam: i18n kutubxonasini o'rnating

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

TacoTranslate ilg‘or sun’iy intellekt yordamida sizning satrlaringizni istalgan tilga avtomatik tarjima qiladi va JSON fayllarini zerikarli boshqarishdan ozod qiladi.

Keling, uni terminalingizda npm orqali o‘rnatalik:

npm install tacotranslate

2-qadam: TacoTranslate hisobini bepul yarating

Endi modul o'rnatib bo'lingach, TacoTranslate hisobingizni, tarjima loyihangizni va unga tegishli API kalitlarini yaratish vaqti keldi. Hisob yaratish uchun shu yerni bosing. Bu bepul, va kredit karta qo'shishingizni talab qilmaydi.

TacoTranslate ilovasining foydalanuvchi interfeysida loyiha yarating va uning API kalitlari yorligʻiga oʻting. Bitta read kalit va bitta read/write kalit yarating. Ularni atrof-muhit o'zgaruvchilari sifatida saqlaymiz. Biz read kalitni public deb ataymiz, read/write kalit esa secret hisoblanadi. Masalan, ularni loyihangiz ildizidagi .env fayliga qo'shishingiz mumkin.

TACOTRANSLATE_PUBLIC_API_KEY=123456
TACOTRANSLATE_SECRET_API_KEY=789010

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

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

• TACOTRANSLATE_DEFAULT_LOCALE: Sukut bo'yicha foydalaniladigan lokal kodi. Ushbu misolda biz uni ingliz tili uchun en ga o'rnatamiz.
• TACOTRANSLATE_ORIGIN: Matnlaringiz saqlanadigan “papka”, masalan, veb-saytingizning URL manzili. Originlar haqida batafsil ma'lumotni bu yerdan 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 client yaratishingiz kerak. 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_DEFAULT_LOCALE ?? '',
});

module.exports = tacoTranslate;

Biz TACOTRANSLATE_API_KEYni tez orada avtomatik ravishda belgilaymiz.

Klientni alohida faylga yaratish uni keyinchalik qayta ishlatishni osonlashtiradi. Endi, maxsus /pages/_app.tsxdan foydalanib, 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 mavjud bo'lsa, iltimos, ta'rifni yuqoridagi xususiyatlar va kod bilan kengaytiring.

4-qadam: Server tomonida render qilishni amalga oshirish

TacoTranslate tarjimalaringizni server tomonida render qilishga imkon beradi. Bu foydalanuvchi tajribasini sezilarli darajada yaxshilaydi — avval tarjima qilinmagan kontentning qisqacha ko‘rinishi o‘rniga tarjima qilingan mazmun darhol ko‘rsatiladi. Bundan tashqari, barcha kerakli tarjimalarimiz mavjud bo‘lgani uchun mijoz tomonidagi tarmoq so‘rovlarini o‘tkazib yuborishimiz mumkin.

Biz /next.config.js faylini yaratish yoki tahrirlashdan 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'),
	});
};

Sozlamalaringizga mos ravishda 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 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 sozladik. Keyingi qiladigan ishimiz — barcha sahifalaringiz uchun tarjimalarni olish. Buning uchun talablaringizga qarab getTacoTranslateStaticProps yoki getTacoTranslateServerSideProps dan birini ishlatasiz.

Ushbu funksiyalar uchta argumentni oladi: biri Next.js Static Props Context obyekti, ikkinchisi TacoTranslate uchun konfiguratsiya, va uchinchisi ixtiyoriy Next.js xususiyatlari. E'tibor bering, getTacoTranslateStaticProps ichidagi revalidate sukut bo'yicha 60 ga o'rnatilgan, shuning uchun tarjimalaringiz doimo yangilangan bo'lib turadi.

Har ikkala funksiyani sahifada ishlatish uchun, masalan, quyidagi kabi bir sahifa faylingiz bor deb faraz qilaylik: /pages/hello-world.tsx.

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 komponentlaringizda satrlarni tarjima qilish uchun Translate komponentidan foydalanishingiz mumkin.

import {Translate} from 'tacotranslate/react';

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

5-qadam: Joylashtiring va sinab ko'ring!

Biz tugatdik! Endi siz Translate komponentiga har qanday satr qo‘shganingizda, React ilovangiz avtomatik ravishda tarjima qilinadi. E'tiborga oling — faqat read/write ruxsatlariga ega bo‘lgan API kalitlari bilan muhitlar yangi tarjima qilinadigan satrlarni yaratishi mumkin. Biz ishlab chiqarish ilovangizni bunday API kalit bilan sinab ko‘rish uchun yopiq va xavfsiz staging muhitini tashkil etishni tavsiya qilamiz — jonli ishga tushirishdan oldin yangi satrlarni shu yerda qo‘shing. Bu maxfiy API kalitingizning o‘g‘irlanishini oldini oladi va tarjima loyihangizga yangi, bog‘lanmagan satrlarni qo‘shib uni ortiqcha to‘ldirib yuborish xavfini kamaytiradi.

Albatta, bizning GitHub profilimizdagi toʻliq misolga nazar tashlang. U yerda, shuningdek, buni App Router yordamida qanday qilish boʻyicha misolni ham topasiz! Agar muammoga duch kelsangiz, bemalol bogʻlaning, va biz sizga yordam berishdan mamnun boʻlamiz.

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