Next.js dasturida, Pages Router dan foydalangan holda xalqarolashtirish (internationalization) qanday amalga oshiriladi

Dunyo tobora globalizatsiyalashib borar ekan, veb dasturchilar uchun turli mamlakatlar va madaniyatlardan kelgan foydalanuvchilarga mos keladigan ilovalarni yaratish tobora muhimroq bo‘lmoqda. Buni amalga oshirishning asosiy usullaridan biri — internationalizatsiya (i18n), u orqali siz ilovangizni turli tillarga, valyutalarga va sana formatlariga moslashtirishingiz mumkin.

Ushbu qo‘llanmada biz React Next.js ilovangizga server tarafdan render qilish bilan internationalizatsiyani qanday qo‘shishni ko‘rib chiqamiz. TL;DR: To‘liq misolni shu 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 xalqaro formatlashni (internationalization) amalga oshirish uchun, avvalo bir i18n kutubxonasini tanlaymiz. Mashhur kutubxonalar orasida next-intl ham bor. Biroq, ushbu misolda biz TacoTranslate dan foydalanamiz.

TacoTranslate ilg‘or sun’iy intellekt orqali matnlaringizni avtomatik tarzda har qanday tilga tarjima qiladi va JSON fayllarini murakkab boshqarishdan sizni ozod qiladi.

Keling, uni terminalingizda npm yordamida o‘rnatamiz:

npm install tacotranslate

2-qadam: Bepul TacoTranslate hisobini yarating

Endi modulni o'rnatganingizdan so'ng, TacoTranslate hisobingizni, tarjima loyihangizni va unga bog'liq API kalitlarini yaratish vaqti keldi. Bu yerdan hisob yarating. Bu bepul va kredit karta qo'shishingiz shart emas.

TacoTranslate ilovasi UI ichida loyiha yarating va uning API kalitlari bo‘limiga o‘ting. Bitta read kalit va bitta read/write kalit yarating. Ularni muhit o‘zgaruvchilari sifatida saqlaymiz. read kalitni biz public deb ataymiz, va read/write kalit esa secret hisoblanadi. Masalan, ularni loyihangiz ildizida joylashgan .env fayliga qo‘shishingiz mumkin.

TACOTRANSLATE_PUBLIC_API_KEY=123456
TACOTRANSLATE_SECRET_API_KEY=789010

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

Shuningdek, ikkita qo'shimcha atrof-muhit o'zgaruvchilarini qo'shamiz: TACOTRANSLATE_DEFAULT_LOCALE va TACOTRANSLATE_ORIGIN.

• TACOTRANSLATE_DEFAULT_LOCALE: Standart fallback lokal kodi. Ushbu misolda, biz uni ingliz tili uchun en deb belgilaymiz.
• TACOTRANSLATE_ORIGIN: Sizning qatorlaringiz saqlanadigan “papka”, masalan, saytingiz URL manzili. Originlar haqida ko‘proq o‘qing.

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

3-qadam: TacoTranslate sozlamalarini o'rnatish

To integrate TacoTranslate with your application, you’ll need to create a client using the API keys from earlier. For example, create a file named /tacotranslate-client.js.

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 yaqinda avtomatik tarzda TACOTRANSLATE_API_KEY ni belgilaymiz.

Mijozni alohida faylda yaratish keyinchalik uni qayta 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 mavjud bo‘lsa, iltimos, yuqoridagi xususiyatlar va kod bilan ta'rifni kengaytiring.

4-qadam: Server tomonlama renderingni amalga oshirish

TacoTranslate tarjimalaringiz uchun server tomonida rendering imkonini beradi. Bu foydalanuvchi tajribasini sezilarli darajada yaxshilaydi, chunki avvaliga tarjima qilinmagan kontentning qisqa paydo bo‘lishi o‘rniga, darhol tarjima qilingan kontentni ko‘rsatadi. Bundan tashqari, mijoz tomonidagi tarmoqli so‘rovlarni o‘tkazib yuborishimiz mumkin, chunki bizda allaqachon kerakli barcha tarjimalar 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'zingizning sozlamangizga mos ravishda isProduction tekshiruvini o'zgartiring. Agar truebo'lsa, TacoTranslate ochiq API kalitini yuzaga chiqaradi. Agar biz mahalliy, test yoki bosqich muhitida bo'lsak (isProduction is false), yangi satrlar tarjima uchun yuborilganligiga ishonch hosil qilish uchun maxfiy read/write API kalitidan foydalanamiz.

Hozirgacha biz faqat Next.js dasturini qo'llab-quvvatlanadigan tillar ro'yxati bilan o'rnatdik. Keyingi narsa - barcha sahifalaringiz uchun tarjimalarni olish. Buning uchun siz talablaringizga qarab getTacoTranslateStaticProps yoki getTacoTranslateServerSideProps dan foydalanasiz.

Ushbu funktsiyalar uchta argumentga ega: bitta Next.js Static Props Context ob'ekti, TacoTranslate uchun konfiguratsiya va ixtiyoriy Next.js xususiyatlari. E'tibor bering, getTacoTranslateStaticProps-dagi revalidate sukut bo'yicha 60-ga o'rnatilgan, shunda tarjimalaringiz dolzarb bo'lib qoladi.

Sahifada har ikki funktsiyadan foydalanish uchun sizda /pages/hello-world.tsxkabi 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 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 sizning React ilovangizda har qanday matnni Translate komponentiga qo‘shganingizda avtomatik tarzda tarjima qilinadi. Diqqat qiling, API kalitidagi read/write ruxsatlariga ega bo‘lgan muhitlargina tarjima qilinishi uchun yangi matnlar yaratishi mumkin. Biz tavsiya qilamizki, siz yopiq va xavfsiz staging muhitiga ega bo‘ling, unda ishlab chiqarish ilovangizni shunday API kaliti bilan sinab ko‘rishingiz mumkin, va jonli rejimga chiqishdan oldin yangi matnlarni qo‘shishingiz mumkin. Bu maxfiy API kalitingizni o‘g‘irlashdan va tarjima loyihangizga yangi, aloqasiz matnlarni qo‘shish orqali loyihani ortiqcha yuklashdan himoya qiladi.

Iltimos, GitHub profilimizdagi to‘liq misolni ko‘rib chiqing. U yerda shuningdek, qanday qilib bundan App Router yordamida foydalanishni ko‘rsatadigan misolni ham topasiz! Agar biror muammo yuzaga kelsa, bemalol bog‘laning, biz sizga yordam berishdan mamnun bo‘lamiz.

TacoTranslate React ilovalaringizni istalgan tildan istalgan tilga avtomatik ravishda tez va oson lokalizatsiya qilish imkonini beradi. Bugunoq boshlang!