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

Dunyo tobora globalizatsiyalanib borayotgan sari, veb dasturchilar uchun turli mamlakat va madaniyatlarga mansub foydalanuvchilarga mos keladigan ilovalar yaratish yanada muhimlashmoqda. Bunga erishishning asosiy yo'llaridan biri — xalqaro moslashtirish (i18n), u ilovangizni turli tillar, valyutalar va sana formatlariga moslashtirish imkonini beradi.

Ushbu darslikda biz React Next.js ilovangizga server tomonida render qilish bilan xalqaro moslashtirishni 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 Routerdan foydalansangiz, iltimos, uning o'rniga ushbu qo'llanmaga qarang.

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 uchun bepul hisob yarating

Modulni o'rnatganingizdan so'ng, TacoTranslate hisobingizni, tarjima loyihangizni va unga tegishli API kalitlarini yaratish vaqti keldi. Bu yerda hisob yarating. Bu bepul va kredit karta qo'shishingizni talab qilmaydi.

TacoTranslate ilovasi interfeysida yangi loyiha yarating va uning API kalitlari yorlig‘iga o‘ting. Bitta read va bitta read/write kalit yarating. Ularni muhit o'zgaruvchilari sifatida saqlaymiz. read kalitni biz public deb ataymiz, read/write kalit esa secret hisoblanadi. Masalan, ularni loyihangiz ildizida joylashgan .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 qilmang.

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

• TACOTRANSLATE_DEFAULT_LOCALE: Standart zaxira (fallback) lokal kodi. Ushbu misolda uni ingliz tili uchun en deb belgilaymiz.
• TACOTRANSLATE_ORIGIN: Satrlaringiz saqlanadigan “papka”, masalan veb-saytingizning URL manzili. Manbalar (origins) 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 oldingi API kalitlaridan foydalangan holda 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;

Biz tez orada avtomatik ravishda TACOTRANSLATE_API_KEYni belgilaymiz.

Clientni 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 maxsus pageProps va _app.tsx bo'lsa, iltimos, yuqoridagi xususiyatlar va kodni qo'shib ta'rifni kengaytiring.

4-qadam: Server tomonida renderlashni amalga oshirish

TacoTranslate tarjimalaringizni server tomonida render qilish imkonini beradi. Bu foydalanuvchi tajribasini sezilarli darajada yaxshilaydi: avval tarjima qilinmagan kontentning qisqa paydo bo‘lishi o‘rniga, tarjima qilingan mazmun darhol ko‘rsatiladi. Bundan tashqari, mijoz tomonida tarmoq so‘rovlarini o‘tkazib yuborishimiz mumkin, chunki kerakli barcha tarjimalarimiz allaqachon mavjud.

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

O‘rnatishingizga 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 satrlar tarjimaga yuborilishini ta’minlash uchun biz maxfiy read/write API kalitidan foydalanamiz.

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

Bu funksiyalar uchta argumentni qabul qiladi: bitta Next.js Static Props Context obyekti, TacoTranslate uchun konfiguratsiya va ixtiyoriy Next.js xususiyatlari. E'tibor bering, getTacoTranslateStaticPropsdagi revalidate sukut bo'yicha 60 ga o'rnatilgan, shuning uchun tarjimalaringiz yangilangan holda qoladi.

Har ikkala funksiyani sahifada ishlatish uchun, 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.

import {Translate} from 'tacotranslate/react';

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

5-qadam: Joylashtiring va sinab ko'ring!

Tugalladik! Endi Translate komponentiga har qanday satr qoʻshganingizda, React ilovangiz avtomatik ravishda tarjima qilinadi. Eʼtibor bering, faqat API kalitida read/write ruxsati boʻlgan muhitlar tarjima uchun yangi satrlar yaratish imkoniga ega boʻladi. Bunday API kalit yordamida ishlab chiqarish ilovangizni sinab koʻrishingiz va jonli holga oʻtishdan oldin yangi satrlarni qoʻshishingiz uchun yopiq va xavfsiz staging muhitiga ega boʻlishingizni tavsiya qilamiz. Bu sizning maxfiy API kalitingizni hech kim oʻgʻirlashining oldini oladi va yangi, aloqasi yoʻq satrlarni qoʻshib, tarjima loyihangizni ortiqcha toʻldirib qoʻymaslikka yordam beradi.

Albatta GitHub profilimizdagi to‘liq namunani ko‘rib chiqing. U yerda, shuningdek, buni App Router yordamida qanday qilishni ko‘rsatadigan misolni ham topasiz! Agar biron muammoga duch kelsangiz, bemalol bog‘laning, va biz yordam berishdan mamnun bo‘lamiz.

TacoTranslate React ilovangizni 75 dan ortiq tilga va ulardan avtomatik va tezkor tarzda lokalizatsiya qilish imkonini beradi. Hozir boshlang!