Next.js ilovasida Pages Router dan foydalanayotgan holda xalqarolashtirishni qanday amalga oshirish mumkin

Dunyo tobora globalizatsiyalashayotgan sari, veb dasturchilar uchun turli mamlakatlar va madaniyatlardan bo‘lgan foydalanuvchilarga mos keladigan ilovalarni yaratish tobora muhimlashib bormoqda. Buning eng muhim usullaridan biri — xalqarolashtirish (i18n), bu sizga ilovangizni turli tillar, valyutalar va sana formatlariga moslashtirish imkonini beradi.

Ushbu qo‘llanmada biz React Next.js ilovangizga server tomonida rendering bilan birga xalqarolashtirishni qanday qo‘shishni ko‘rib chiqamiz. 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 foydalansangiz, iltimos, uning o‘rniga ushbu qo‘llanmaga qarang.

1-qadam: i18n kutubxonasini o'rnating

Next.js ilovangizda xalqarolashtirishni amalga oshirish uchun avvalo i18n kutubxonasini tanlaymiz. Mashhur kutubxonalar orasida next-intl ham bor. Biroq, ushbu misolda biz TacoTranslate dan foydalanamiz.

TacoTranslate ilg‘or AI yordamida matnlaringizni avtomatik tarzda istalgan tilga tarjima qiladi va sizni JSON fayllarini boshqarish bilan bog‘liq zerikarli ishlaridan ozod qiladi.

Terminalingizda npm yordamida uni o‘rnatamiz:

npm install tacotranslate

2-qadam: Bepul TacoTranslate hisob qaydnomasi yarating

Endi modul o'rnatilgach, TacoTranslate hisobingizni, tarjima loyihangizni va unga bog‘liq API kalitlarini yaratish vaqti keldi. Bu yerda hisob yarating. Bu bepul va kredit karta qo‘shishni talab qilmaydi.

TacoTranslate ilovasi UI ichida loyiha yarating va uning API kalitlari bo‘limiga o‘ting. Bitta read kalit va bitta read/write kalit yarating. Ularni tashqi muhit oʻzgaruvchilari sifatida saqlaymiz. read kalitni public deb ataymiz, read/write kalit esa secret hisoblanadi. Masalan, ularni loyiha ildizidagi .env fayliga 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.

Biz shuningdek yana ikkita atrof-muhit o'zgaruvchilarini qo'shamiz: TACOTRANSLATE_DEFAULT_LOCALE va TACOTRANSLATE_ORIGIN.

• TACOTRANSLATE_DEFAULT_LOCALE: Standart zaxira lokal kodi. Ushbu misolda, uni ingliz tili uchun en ga o'rnatamiz.
• TACOTRANSLATE_ORIGIN: Sizning matnlaringiz saqlanadigan “papka”, masalan, veb-saytingizning URL manzili. Originlar haqida bu yerda batafsil o‘qing.

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

3-qadam: TacoTranslate sozlamalari

TacoTranslate’ni ilovangizga integratsiya qilish uchun, oldin olingan API kalitlari yordamida 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 TACOTRANSLATE_API_KEY ni avtomatik ravishda belgilaymiz.

Mijozni alohida faylga yaratish uni keyinchalik qayta ishlatishni osonlashtiradi. Endi, maxsus /pages/_app.tsx dan foydalanib, 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 tomonlama renderingni amalga oshirish

TacoTranslate tarjimalaringizni server tomonida render qilish imkonini beradi. Bu foydalanuvchi tajribasini sezilarli darajada yaxshilaydi, chunki avvaliga tarjima qilinmagan tarkibning yorug‘lik ko‘rinishini ko‘rsatish o‘rniga, tarjima qilingan kontent darhol ko‘rsatiladi. Bundan tashqari, mijoz tomonda tarmoq so‘rovlarini o‘tishimiz mumkin, chunki bizda allaqachon kerakli barcha 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 ommaviy API kalitini ko‘rsatadi. Agar biz mahalliy, sinov yoki staging muhitida bo‘lsak (isProduction is false), yangi matnlar tarjimaga yuborilishiga ishonch hosil qilish 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 olishdir. Buni amalga oshirish uchun talablaringizga qarab getTacoTranslateStaticProps yoki getTacoTranslateServerSideProps funksiyalaridan birini ishlatasiz.

Bu funksiyalar uchta argumentni qabul qiladi: biri Next.js Static Props Context obyekti, TacoTranslate konfiguratsiyasi, va ixtiyoriy Next.js xususiyatlari. E'tibor bering, getTacoTranslateStaticProps dagi revalidate standart bo'lib 60 ga o'rnatilgan, shuning uchun tarjimalaringiz doimo yangilangan bo'lib turadi.

Har ikki funksiyani sahifada ishlatmoqchi bo'lsangiz, misol uchun, /pages/hello-world.tsx kabi sahifa faylingiz 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 ichida 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 sizning React ilovangizga har qanday satrlarni Translate komponentiga qo‘shganingizda, ular avtomatik tarzda tarjima qilinadi. E'tibor bering, faqat API kalitida read/write ruxsatlari mavjud bo‘lgan muhitlarda yangi tarjima qilinadigan satrlar yaratish mumkin bo‘ladi. Biz sizga yopiq va xavfsiz staging muhit yaratishni tavsiya qilamiz, u yerda ishlab chiqarish ilovangizni shunday API kaliti bilan sinab ko‘rishingiz mumkin, jonli efirga chiqishdan oldin yangi satrlarni qo‘shishingiz mumkin. Bu sizning maxfiy API kalitingizni o‘g‘irlashdan va ehtimol tarjima loyihangizni yangi, bog‘lanmagan satrlar bilan keraklicha kengayishidan himoya qiladi.

Iltimos, GitHub profilimizda to‘liq misolni ko‘rib chiqing. U yerda siz App Router yordamida bu qanday amalga oshirilishini ko‘rsatgan misolni ham topasiz! Agar biror muammo yuzaga kelsa, biz bilan bog‘lanishdan tortinmang, va biz yordam berishdan mamnun bo‘lamiz.

TacoTranslate sizga React ilovalaringizni 75 dan ortiq tilga avtomatik ravishda tez va oson lokalizatsiya qilish imkonini beradi. Bugun boshlang!