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 xalqaro moslashuvni (i18n) amalga oshirish uchun avvalo bir i18n kutubxonasini tanlaymiz. Bir nechta mashhur kutubxonalar mavjud, jumladan next-intl. Biroq, ushbu misolda biz TacoTranslate dan foydalanamiz.

TacoTranslate ilg‘or sun’iy intellekt yordamida matnlaringizni avtomatik tarzda har qanday tilga tarjima qiladi va JSON fayllarini zerikarli boshqaruvidan xalos etadi.

Keling, uni terminalingizda npm orqali o‘rnatamiz:

npm install tacotranslate

2-qadam: TacoTranslate-da 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, biz yana ikki muhit o'zgaruvchisini qo'shamiz: TACOTRANSLATE_DEFAULT_LOCALE va TACOTRANSLATE_ORIGIN.

• TACOTRANSLATE_DEFAULT_LOCALE: Standart zaxira (fallback) lokal kodi. Ushbu misolda biz uni ingliz tili uchun en ga o'rnatamiz.
• TACOTRANSLATE_ORIGIN: Matnlaringiz saqlanadigan “papka”, masalan, saytingizning URL manzili. Originlar haqida batafsil ma'lumotni bu yerdan o'qing.

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

3-bosqich: TacoTranslate'ni sozlash

TacoTranslate’ni ilovangizga integratsiya qilish uchun oldin olingan 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;

Tez orada TACOTRANSLATE_API_KEY avtomatik ravishda belgilanadi.

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

4-qadam: Server tomonida renderlashni amalga oshirish

TacoTranslate tarjimalaringizni serverda renderlashga imkon beradi. Bu foydalanuvchi tajribasini sezilarli darajada yaxshilaydi — tarjima qilingan kontentni darhol ko‘rsatadi, avval tarjima qilinmagan kontentning qisqa namoyishi (flash) yuz bermaydi. Bundan tashqari, mijoz tomonida tarmoq so‘rovlarini o‘tkazmaslik mumkin, chunki kerakli barcha tarjimalar 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 dan birini ishlatasiz.

Ushbu funksiyalar uchta argumentni oladi: biri Next.js Static Props Context obyekti, ikkinchisi TacoTranslate konfiguratsiyasi va uchinchisi ixtiyoriy Next.js xususiyatlari. E'tibor bering, getTacoTranslateStaticPropsdagi revalidate sukut bo'yicha 60 ga o'rnatilgan, shuning uchun tarjimalaringiz yangilangan holda qoladi.

Har qanday funksiyani 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 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, bizning GitHub profilimizdagi to'liq misolni ko'rib chiqing. U yerda, siz shuningdek bu ishni App Router yordamida qanday bajarishni ko'rsatuvchi misolni ham topasiz! Agar biror muammo yuzaga kelsa, bemalol bizga murojaat qiling, va biz yordam berishdan mamnun bo'lamiz.

TacoTranslate sizning React ilovalaringizni 75 dan ortiq tillarga va ulardan avtomatik va tez mahalliylashtirishga imkon beradi. Bugun boshlang!