Pages Router-dan foydalanuvchi Next.js dasturida xalqaro sozlamalarni (internationalization) qanday amalga oshirish mumkin

Dunyo tobora globalizatsiyalashib borayotgan sari, veb dasturchilar uchun turli mamlakatlar va madaniyatlar foydalanuvchilariga mos keladigan ilovalarni yaratish yanada muhimlashmoqda. Buning eng muhim yo‘llaridan biri — xalqaro miqyosda qo‘llab-quvvatlash (i18n), bu sizga ilovangizni turli tillar, valyutalar va sana formatlariga moslashtirish imkonini beradi.

Ushbu qo‘llanmada biz React Next.js ilovangizga server tomonlama renderlash bilan xalqaro miqyosda qo‘llab-quvvatlashni qanday qo‘shishni o‘rganamiz. TL;DR: To‘liq misolni bu yerda ko‘ring.

Ushbu qo‘llanma Pages Router dan foydalangan Next.js ilovalari uchun mo‘ljallangan.
Agar siz App Router dan foydalansangiz, iltimos, uning o‘rniga ushbu qo‘llanmani ko‘ring.

1-qadam: i18n kutubxonasini o‘rnatish

Next.js ilovangizda xalqaro tillashuvni (internationalization) amalga oshirish uchun avvalo i18n kutubxonasini tanlaymiz. Mashhur kutubxonalardan biri next-intl hisoblanadi. Biroq, bu misolda biz TacoTranslate dan foydalanamiz.

TacoTranslate ilg‘or sun’iy intellekt yordamida sizning satrlaringizni avtomatik tarzda istalgan tilga tarjima qiladi va JSON fayllarni murakkab boshqarishdan sizni ozod qiladi.

Keling, terminalingizda npm yordamida uni o‘rnatamiz:

npm install tacotranslate

2-qadam: Bepul TacoTranslate hisob qaydnomasi yarating

Endi modulni o‘rnatganingizdan so‘ng, TacoTranslate hisobingizni, tarjima loyihasini va bog‘liq API kalitlarini yaratish vaqti keldi. Bu yerda hisob yaratishingiz mumkin. Bu bepul va kredit karta qo‘shishingiz shart emas.

TacoTranslate dasturiy interfeysida loyiha yarating va uning API kalitlari bo‘limiga o‘ting. Bir dona read kalit va bir dona 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 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 muhitlariga hech qachon oshkor qilmasligingizga ishonch hosil qiling.

Shuningdek, ikkita qo‘shimcha muhit oʻzgaruvchilarini qoʻshamiz: TACOTRANSLATE_DEFAULT_LOCALE va TACOTRANSLATE_ORIGIN.

• TACOTRANSLATE_DEFAULT_LOCALE: Standart fallback til kodi. Ushbu misolda uni ingliz tili uchun en ga o'rnatamiz.
• TACOTRANSLATE_ORIGIN: Sizning yozuvlaringiz saqlanadigan “papka”, masalan, veb-saytingiz URL manzili. Bu yerda originlar haqida ko‘proq o‘qing.

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

3-qadam: TacoTranslate ni sozlash

TacoTranslate’ni ilovangizga integratsiya qilish uchun oldin olingan API kalitlaridan foydalanib mijoz 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_KEY ni belgilaymiz.

Mijozni alohida faylda yaratish uni keyinchalik yana ishlatishni osonlashtiradi. Endi, maxsus /pages/_app.tsx faylidan 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 kod bilan ta'rifni kengaytiring.

4-qadam: Server tomonida renderingni amalga oshirish

TacoTranslate tarjimalaringizni server tomonida render qilish imkonini beradi. Bu foydalanuvchi tajribasini sezilarli darajada yaxshilaydi, chunki dastlab tarjima qilinmagan kontentning yorug‘lik paydo bo‘lishi o‘rniga, darhol tarjima qilingan kontent namoyish etiladi. Bundan tashqari, biz mijoz tomonida tarmoq so‘rovlarini o'tkazib yuborishimiz mumkin, chunki bizda 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'),
	});
};

isProduction tekshiruvini o‘z sozlamalaringizga moslashtiring. Agar true bo‘lsa, TacoTranslate jamoat API kalitini ko‘rsatadi. Agar biz mahalliy, test yoki staging muhitida bo‘lsak (isProduction is false), yangi matnlar tarjima uchun yuborilishi uchun maxfiy read/write API kalitidan foydalanamiz.

Hozirgacha biz faqat Next.js ilovasini qo‘llab-quvvatlanadigan tillar ro‘yxati bilan sozlaganmiz. Keyingi qiladigan ishimiz barcha sahifalaringiz uchun tarjimalarni olish bo‘ladi. Buning uchun talablaringizga qarab getTacoTranslateStaticProps yoki getTacoTranslateServerSideProps funksiyalaridan birini ishlatasiz.

Ushbu funksiyalar uchta argumentni qabul qiladi: biri Next.js Static Props Context obyekti, TacoTranslate konfiguratsiyasi va ixtiyoriy Next.js xususiyatlari. E'tiborga oling, getTacoTranslateStaticPropsdagi revalidate sukut bo‘yicha 60 ga o‘rnatilgan, shunday qilib tarjimalaringiz doimo yangilanib turadi.

Har ikkala funksiyani sahifada 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 siz barcha React komponentlaringiz ichidagi 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 siz React ilovangizda har qanday satrni Translate komponentiga qo‘shganingizda, u avtomatik tarzda tarjima qilinadi. E'tibor bering, faqat read/write huquqlariga ega API kalitiga ega muhitlar yangi tarjima qilinadigan satrlarni yaratishi mumkin. Biz ishlab chiqarish ilovangizni shunday API kaliti bilan sinab ko‘rish uchun yopiq va xavfsiz staging muhitiga ega bo‘lishni tavsiya qilamiz, yangi satrlarni jonli rejimga chiqishdan oldin qo‘shing. Bu sizning sirli API kalitingizni o‘g‘irlashni oldini oladi va tarjima loyihangizga bog‘lanmagan yangi satrlarni qo‘shilishidan kelib chiqadigan ortiqcha yukni kamaytiradi.

Albatta, bizning GitHub profilimizdagi to‘liq misolni ko‘rib chiqing. U yerda siz shu ishni App Router yordamida qanday bajarish bo‘yicha namuna ham topasiz! Agar biron muammoga duch kelsangiz, bemalol biz bilan bog‘laning, va biz yordam berishga mamnun bo‘lamiz.

TacoTranslate sizning React ilovalaringizni 75 dan ortiq tilga tez va avtomatik tarzda tarjima qilish imkonini beradi. Bugunoq boshlang!