Next.js ilovasida, Pages Routerdan foydalanilganda, xalqarolashtirishni qanday amalga oshirish

Dunyo globalizatsiyalashgani sayin, veb-ishlab chiquvchilar uchun turli mamlakatlar va madaniyatlardan kelgan foydalanuvchilarga moslashadigan ilovalarni yaratish muhimroq bo'lmoqda. Buni amalga oshirishning asosiy usullaridan biri — internationalizatsiya (i18n), u ilovangizni turli tillar, valyutalar va sana formatlariga moslashtirishga imkon beradi.

Ushbu darslikda biz React Next.js ilovangizga server tomonida render qilish (server-side rendering) bilan internationalizatsiyani qanday qo'shishni o'rganamiz. TL;DR: To'liq misolni bu yerda 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'ring.

1-qadam: i18n kutubxonasini o'rnating

Next.js ilovangizda xalqarolashtirishni (i18n) joriy etish 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 boshqarishdan xalos etadi.

Terminalingizda npm yordamida uni o'rnataylik:

npm install tacotranslate

2-qadam: TacoTranslate hisobini bepul yarating

Endi modulni o‘rnatganingizga ko‘ra, 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 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

Maxfiy read/write API kalitini mijoz tomonidagi ishlab chiqarish muhitlariga hech qachon oshkor qilmaslikka ishonch hosil qiling.

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

• TACOTRANSLATE_DEFAULT_LOCALE: Standart zaxira lokal kodi. Ushbu misolda biz uni ingliz tili uchun en ga sozlaymiz.
• TACOTRANSLATE_ORIGIN: Matnlaringiz saqlanadigan “papka”, masalan veb-saytingizning URL manzili. Originlar haqida batafsil o'qing.

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

3-qadam: TacoTranslate-ni sozlash

TacoTranslate-ni ilovangizga integratsiya qilish uchun, ilgari olingan API kalitlaridan foydalanib 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_DEFAULT_LOCALE ?? '',
});

module.exports = tacoTranslate;

Tez orada avtomatik ravishda TACOTRANSLATE_API_KEYni belgilaymiz.

Klientni alohida faylda 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 render qilishni amalga oshirish

TacoTranslate tarjimalaringizni server tomonida render qilishga imkon beradi. Bu foydalanuvchi tajribasini sezilarli darajada yaxshilaydi — tarjima qilinmagan kontentning avvaliga bir zumlik ko‘rinishi o‘rniga tarjima qilingan kontent darhol ko‘rsatiladi. Bundan tashqari, mijoz tomonida tarmoq so‘rovlarini o‘tkazib yuborishimiz mumkin, chunki kerakli barcha tarjimalar allaqachon mavjud.

Boshlash uchun /next.config.js faylini yaratamiz yoki o'zgartiramiz.

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 moslash uchun 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 satrlar 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 qadam — barcha sahifalaringiz uchun tarjimalarni olish. Buni amalga oshirish uchun talablaringizga qarab getTacoTranslateStaticProps yoki getTacoTranslateServerSideProps funksiyalaridan 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 getTacoTranslateStaticProps da sukut bo'yicha 60 ga o'rnatilgan, shuning uchun tarjimalaringiz yangilanib turadi.

Sahifada har ikkala funksiyadan birini ishlatish uchun, keling, sizda /pages/hello-world.tsx kabi sahifa fayli bor deb hisoblaymiz.

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 matnlarni 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!

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.

Bizning GitHub profilimizda to'liq misolni albatta ko'rib chiqing. U yerda, shuningdek, buni App Router yordamida qanday qilish bo'yicha misolni ham topasiz! Agar biron muammo yuzaga kelsa, bemalol bog'laning, va biz yordam berishdan mamnun bo'lamiz.

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