Next.js ilovasida, Pages Router dan foydalanilayotgan, xalqarolashtirishni qanday amalga oshirish mumkin

Dunyo tobora globalizatsiyalashgani sayin, veb dasturchilar uchun turli mamlakatlar va madaniyatlar foydalanuvchilariga mos keladigan dasturlar yaratish tobora muhimlashmoqda. Buni amalga oshirishning asosiy usullaridan biri — xalqaro moslashtirish (i18n), bu sizga ilovangizni turli tillarga, valyutalarga va sana formatlariga moslashtirish imkonini beradi.

Ushbu darslikda biz React Next.js ilovangizga server tomonida rendering bilan xalqaro moslashtirishni qanday qo‘shish mumkinligini ko‘rib chiqamiz. TL;DR: To‘liq misolni shu yerda ko‘ring.

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

1-qadam: i18n kutubxonasini o'rnating

Next.js ilovangizda xalqaro tillashuvni (internationalization) amalga oshirish uchun, avvalo bir i18n kutubxonasini tanlaymiz. Mashhur kutubxonalar orasida next-intl ham bor. Ammo, ushbu misolda biz TacoTranslate dan foydalanamiz.

TacoTranslate ilg‘or AI texnologiyasi yordamida matnlaringizni avtomatik ravishda istalgan tilga tarjima qilib beradi va JSON fayllarni murakkab boshqaruvidan ozod qiladi.

Keling, terminalingizda uni npm yordamida o‘rnatamiz:

npm install tacotranslate

2-qadam: Bepul TacoTranslate hisobini yarating

Endi modul o‘rnatilib bo‘lgach, TacoTranslate hisobingizni, tarjima loyihangizni va bog‘langan API kalitlarini yaratish vaqti keldi. Bu yerda hisob yaratishingiz mumkin. Bu bepul va kredit karta qo'shishingiz shart emas.

TacoTranslate ilovasi interfeysida loyiha 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. Masalan, ularni loyihangiz ildizidagi .env faylga qo‘shishingiz mumkin.

TACOTRANSLATE_PUBLIC_API_KEY=123456
TACOTRANSLATE_SECRET_API_KEY=789010

Sirli read/write API kalitini hech qachon mijoz tomonining ishlab chiqarish muhitlariga oshkor qilmasligingizga ishonch hosil qiling.

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

• TACOTRANSLATE_DEFAULT_LOCALE: Standart zaxira til kodi. Ushbu misolda, biz uni ingliz tili uchun en ga o‘rnatamiz.
• TACOTRANSLATE_ORIGIN: Sizning matnlaringiz 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 oldingi API kalitlardan 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 keyinchalik uni 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 mavjud bo‘lsa, iltimos, yuqoridagi xususiyatlar va kod bilan ta'rifni kengaytiring.

4-qadam: Server tomonida renderingni amalga oshirish

TacoTranslate tarjimalaringizni server tomonida rendering qilish imkonini beradi. Bu foydalanuvchi tajribasini sezilarli darajada yaxshilaydi, chunki tarjima qilingan kontent darhol ko‘rsatiladi, avvaliga tarjima qilinmagan kontentdan qisqa paydo bo‘lish o‘rniga. Bundan tashqari, mijoz tomonida tarmoq so‘rovlarini o‘tkazib yuborishimiz mumkin, chunki bizda allaqachon barcha kerakli tarjimalar mavjud.

Avval /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, sinov yoki staging muhitida bo‘lsak (isProduction is false), yangi matnlar tarjima uchun yuborilishiga ishonch hosil qilish uchun maxfiy read/write API kalitidan foydalanamiz.

Hozirgacha biz faqat Next.js ilovasini qo‘llab-quvvatlanadigan tillar ro‘yxati bilan sozladik. Keyingi qiladigan ishimiz — barcha sahifalaringiz uchun tarjimalarni olish. Buning uchun talablaringizga qarab getTacoTranslateStaticProps yoki getTacoTranslateServerSideProps dan foydalanasiz.

Bu funksiyalar uchta argument qabul qiladi: bitta Next.js Static Props Context obyekti, TacoTranslate konfiguratsiyasi va ixtiyoriy Next.js xossalari. E'tibor bering, getTacoTranslateStaticPropsdagi revalidate sukut bo‘yicha 60 ga o‘rnatilgan, shunda tarjimalaringiz doimo yangilangan bo‘ladi.

Har ikkala funksiyani sahifada ishlatish uchun, masalan, /pages/hello-world.tsx kabi sahifa faylingiz 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 Translate komponentidan foydalanib, barcha React komponentlaringizdagi satrlarni tarjima qilishingiz mumkin bo‘ladi.

import {Translate} from 'tacotranslate/react';

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

5-qadam: Joylashtiring va sinovdan o'tkazing!

Bajarildi! Endi siz Translate komponentiga har qanday satr qo‘shganingizda, sizning React ilovangiz avtomatik tarzda tarjima qilinadi. E’tibor bering, faqat API kalitida read/write huquqlariga ega bo‘lgan muhitlarda yangi tarjima qilinadigan satrlar yaratish mumkin bo‘ladi. Biz sizga ishlab chiqarish ilovangizni shunday API kalit bilan sinab ko‘rish uchun yopiq va himoyalangan palco muhiti tashkil qilishni tavsiya qilamiz, yangi satrlarni jonli holatga chiqishdan oldin qo‘shishingiz mumkin. Bu sirli API kalitingizni o‘g‘irlashning oldini oladi va tarjima loyihangizga yangi, bog‘lanmagan satrlarni qo‘shib loyihani ortiqcha yuklamaslikka yordam beradi.

Albatta, bizning GitHub profilimizdagi to‘liq misolni ko‘rib chiqing. U yerda, shuningdek, buni App Router yordamida qanday qilish bo‘yicha misolni ham topasiz! Agar biron-bir muammo yuzaga kelsa, bemalol bog‘laning, va biz yordam berishdan mamnun bo‘lamiz.

TacoTranslate sizning React ilovalaringizni avtomatik ravishda istalgan tilda tezda mahalliylashtirish imkonini beradi. Bugunoq boshlang!