Next.js ilovalarida xalqarolashtirish (i18n) uchun eng yaxshi yechim

Qanday ishlaydi

Dunyo tobora globalizatsiyalashib borar ekan, veb dasturchilar uchun turli mamlakatlar va madaniyatlardagi foydalanuvchilarga mos keladigan ilovalarni yaratish tobora muhimlashmoqda. Buni amalga oshirishning asosiy yo‘llaridan biri xalqarolashtirish (i18n) bo‘lib, u ilovangizni turli tillar, valyutalar va sana formatlariga moslashtirish imkonini beradi.

Ushbu darslikda React Next.js ilovangizga server tomonlama rendering bilan xalqarolashtirish qanday qo‘shilishini o‘rganamiz. TL;DR: To‘liq misolni shu yerdan 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 moslashuvni amalga oshirish uchun avvalo i18n kutubxonasini tanlaymiz. Mashhur kutubxonalar orasida next-intl mavjud. Ammo, ushbu misolda biz TacoTranslate dan foydalanamiz.

TacoTranslate ilg‘or sun’iy intellekt yordamida yozuvlaringizni avtomatik ravishda istalgan tilga tarjima qiladi va JSON fayllarini charchatuvchi boshqaruvdan sizni ozod qiladi.

Keling, uni terminalingizda npm yordamida o‘rnatamiz:

npm install tacotranslate

2-qadam: Bepul TacoTranslate hisobini yarating

Endi modul o‘rnatilgan bo‘lsa, TacoTranslate hisobingizni, tarjima loyihangizni va tegishli API kalitlarini yaratish vaqti keldi. Bu yerda hisob yaratishingiz mumkin. Bu bepul va kredit karta qo‘shishni talab qilmaydi.

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

TACOTRANSLATE_PUBLIC_API_KEY=123456
TACOTRANSLATE_SECRET_API_KEY=789010

Sirli read/write API kalitini mijoz tomoni ishlab chiqarish muhiti uchun hech qachon oshkor qilmasligingizga ishonch hosil qiling.

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

• TACOTRANSLATE_DEFAULT_LOCALE: Sukut bo‘yicha orqaga qaytish uchun til kodi. Ushbu misolda, 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 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 TACOTRANSLATE_API_KEY ni avtomatik ravishda belgilaymiz.

Clientni alohida faylda yaratish uni keyinchalik yana ishlatishni osonlashtiradi. Endi, maxsus /pages/_app.tsx dan foydalangan holda, 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 render qilishni amalga oshirish

TacoTranslate tarjimalaringizni server tomonida render qilish imkonini beradi. Bu foydalanuvchi tajribasini sezilarli darajada yaxshilaydi, chunki u birinchi navbatda tarjima qilinmagan kontentdan ko'ra, darhol tarjima qilingan mazmunni ko'rsatadi. Bundan tashqari, biz mijoz tomonidagi tarmoq so'rovlarini o'tkazib yuborishimiz mumkin, chunki bizda allaqachon kerakli barcha tarjimalar mavjud.

Boshlash uchun /next.config.js faylini yaratamiz yoki o‘zgartiramiz.

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 moslang. Agar true boʻlsa, TacoTranslate jamoat API kalitini koʻrsatadi. Agar biz mahalliy, test yoki staging muhitida boʻlsak (isProduction is false), yangi satrlar tarjimaga yuborilganligiga ishonch hosil qilish uchun maxfiy read/write API kalitidan foydalanamiz.

Hozirgacha biz faqat Next.js ilovamizni qo'llab-quvvatlanadigan tillar ro'yxati bilan sozlaganmiz. Keyingi qiladigan ishimız — barcha sahifalaringiz uchun tarjimalarni olish. Buni amalga oshirish uchun talablaringizga qarab getTacoTranslateStaticProps yoki getTacoTranslateServerSideProps dan foydalanasiz.

Ushbu funksiyalar uchta argumentni oladi: biri Next.js Static Props Context obyekti, TacoTranslate sozlamalari va ixtiyoriy Next.js xususiyatlari. E'tibor bering, getTacoTranslateStaticPropsdagi revalidate sukut bo'yicha 60 ga o'rnatilgan, shuning uchun tarjimalaringiz doimo yangilanib turadi.

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 siz barcha React komponentlaringiz ichidagi satrlarni 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!

Ish tugadi! Endi sizning Next.js ilovangizda har qanday matnni Translate komponentiga qo‘shganingizda avtomatik tarjima qilinadi. E'tibor bering, faqat API kalitida read/write huquqlariga ega muhitlar yangi tarjima qilinadigan matnlarni yaratishi mumkin. Sizga ishlab chiqarish ilovangizni shunday API kalit bilan sinab ko‘rishingiz uchun yopiq va xavfsiz testing muhiti yaratishni tavsiya qilamiz, yangi matnlarni jonli ishga tushirishdan oldin qo‘shib borishingiz mumkin. Bu sizning maxfiy API kalitingizni o‘g‘irlashdan va tarjima loyihangizni yangi, aloqasi bo‘lmagan matnlar bilan orttirishning oldini oladi.

Be sure to check out the complete example over at our GitHub profile. There, you’ll also find an example of how to do this using the App Router! If you encounter any problems, feel free to reach out, and we’ll be more than happy to help.

TacoTranslate lets you automatically localize your React applications quickly to and from over 75 languages. Get started today!