Next.js ilovasida Pages Router dan foydalangan holda xalqarolashtirishni (internationalization) qanday amalga oshirish mumkin

Dunyo tobora globalizatsiyalashib borar ekan, veb dasturchilar uchun turli mamlakatlar va madaniyatlardan bo‘lgan foydalanuvchilarga mos keladigan ilovalarni yaratish tobora muhimlashmoqda. Buni amalga oshirishning asosiy usullaridan biri bu xalqaro qo‘llab-quvvatlash (i18n) bo‘lib, u sizga ilovangizni turli tillar, valyutalar va sana formatlariga moslashtirish imkonini beradi.

Ushbu darslikda biz React Next.js ilovangizga server tomonidan rendering bilan xalqaro qo‘llab-quvvatlashni qanday qo‘shishni o‘rganamiz. TL;DR: To‘liq misolni shu yerdan ko‘ring.

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

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 ilovasi foydalanuvchi interfeysida loyiha yarating va uning API kalitlari yorlig‘iga o‘ting. Bir dona read kalit va bir dona 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 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

Ilovangizga TacoTranslate-ni qo‘shish uchun avvalgi API kalitlaridan foydalanib klient 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 tomoni renderingini 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'),
	});
};

isProduction tekshiruvini o‘z sozlamalaringizga moslashtiring. Agar true bo‘lsa, TacoTranslate ommaviy API kalitini ko‘rsatadi. Agar biz mahalliy, sinov yoki staging muhitida bo‘lsak (isProduction is false), yangi matnlar tarjimaga yuborilishiga ishonch hosil qilish uchun maxfiy read/write API kalitidan foydalanamiz.

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

Bu funksiyalar uchta argument oladi: biri Next.js Static Props Context obyekti, TacoTranslate uchun konfiguratsiya va ixtiyoriy Next.js xususiyatlari. E'tibor bering, getTacoTranslateStaticProps dagi revalidate sukut bo'yicha 60 ga o'rnatilgan, shuning uchun tarjimalaringiz yangilangan holda qoladi.

Bu funksiyalardan birini sahifada ishlatish 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 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!

Tayyor! Endi sizning React ilovangizdagi har qanday matnni Translate komponentiga qo‘shganingizda, u avtomatik ravishda tarjima qilinadi. E'tiborga oling, faqat API kalitida read/write ruxsatlariga ega bo‘lgan muhitlar yangi tarjima qilinadigan matnlarni yaratishi mumkin. Biz tavsiya qilamizki, ishlab chiqarish ilovangizni bunday API kaliti bilan sinab ko‘rish uchun yopiq va xavfsiz staging muhitiga ega bo‘ling, va jonli ishlashdan oldin yangi matnlarni qo‘shing. Bu sizning maxfiy API kalitingizni o‘g‘irlashdan va tarjima loyihangizni yangi, bog‘lanmagan matnlar bilan to‘ldirishdan himoya qiladi.

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!