Next.js ilovalari uchun xalqarolashtirish (i18n) bo'yicha eng yaxshi yechim

Qanday ishlaydi

Jahon globalizatsiyalashgani sayin, veb ishlab chiquvchilar uchun turli mamlakatlar va madaniyatlardan bo‘lgan foydalanuvchilarga mos keladigan ilovalar yaratish tobora muhimlashmoqda. Bunga erishishning asosiy usullaridan biri — xalqaro qo‘llab-quvvatlash (i18n), u ilovangizni turli tillar, valyutalar va sana formatlariga moslashtirishga imkon beradi.

Ushbu darslikda biz React Next.js ilovangizga server tomoni rendering bilan xalqaro qo‘llab-quvvatlashni qanday qo‘shishni ko‘rib chiqamiz. TL;DR: To‘liq misolni bu yerdan ko‘ring.

Ushbu qo'llanma Pages Routerdan foydalanayotgan Next.js ilovalari uchun mo'ljallangan.
Agar siz App Routerdan foydalanayotgan bo'lsangiz, iltimos, uning o'rniga ushbu qo'llanmani ko'ring.

1-qadam: i18n kutubxonasini o'rnating

Next.js ilovangizda xalqarolashtirishni (i18n) amalga oshirish uchun avvalo i18n kutubxonasini tanlaymiz. Bir nechta mashhur kutubxonalar mavjud, jumladan next-intl. Biroq, ushbu misolda biz TacoTranslate.

TacoTranslate ilg‘or AI texnologiyasidan foydalangan holda matnlaringizni istalgan tilga avtomatik tarjima qiladi va JSON fayllarini zerikarli boshqarishdan xalos qiladi.

Keling, uni terminalingizda npm yordamida o‘rnatamiz:

npm install tacotranslate

Step 2: Bepul TacoTranslate hisobini yarating

Endi modul o'rnatilgach, TacoTranslate hisobingizni, tarjima loyihangizni va tegishli API kalitlarini yaratish vaqti keldi. Bu yerda hisob yarating. Bu bepul va kredit karta kiritishingiz shart emas.

TacoTranslate ilovasining interfeysida loyiha yarating va uning API kalitlari bo‘limiga o‘ting. Bir dona read kalit va bir dona read/write kalit yarating. Biz ularni 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 mijoz tomonidagi ishlab chiqarish muhitiga hech qachon oshkor qilmang.

Shuningdek, biz yana ikki atrof-muhit o'zgaruvchilarini qo'shamiz: TACOTRANSLATE_DEFAULT_LOCALE va TACOTRANSLATE_ORIGIN.

• TACOTRANSLATE_DEFAULT_LOCALE: Standart zaxira (fallback) lokal kodi. Ushbu misolda biz uni ingliz tili uchun en ga o'rnatamiz.
• TACOTRANSLATE_ORIGIN: Matnlaringiz saqlanadigan “papka”, masalan veb-saytingizning URL manzili. Manbalar (origins) haqida ko'proq ma'lumotni bu yerdan o'qing.

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

3-qadam: TacoTranslate-ni sozlash

TacoTranslate-ni ilovangizga integratsiya qilish uchun avvalgi 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_KEYni belgilaymiz.

Klientni alohida faylda yaratish uni keyinchalik qayta ishlatishni osonlashtiradi. Endi esa, 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 moslashtirilgan pageProps va _app.tsx mavjud bo'lsa, iltimos, ta'rifni yuqoridagi xususiyatlar va kod bilan kengaytiring.

4-qadam: Server tomonida renderlashni amalga oshirish

TacoTranslate tarjimalaringizni server tomonida render qilishga imkon beradi. Bu foydalanuvchi tajribasini sezilarli darajada yaxshilaydi: avval tarjima qilinmagan kontentning qisqa muddatli ko‘rinishi o‘rniga tarjima qilingan mazmunni darhol ko‘rsatadi. Bundan tashqari, kerakli barcha tarjimalar allaqachon mavjud bo‘lganligi sababli mijoz tomonida tarmoq so‘rovlarini amalga oshirishni o'tkazib yuborish mumkin.

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'),
	});
};

Konfiguratsiyangizga mos ravishda isProduction tekshiruvini o'zgartiring. Agar true, TacoTranslate ommaviy API kalitini ko'rsatadi. Agar biz lokal, test yoki staging muhitida bo'lsak (isProduction is false), yangi satrlar tarjimaga yuborilishini ta'minlash uchun maxfiy read/write API kalitidan foydalanamiz.

Hozirgacha biz Next.js ilovasini faqat qoʻllab‑quvvatlanadigan tillar roʻyxati bilan sozladik. Endi navbatdagi qadam — barcha sahifalaringiz uchun tarjimalarni olish. Buning uchun talablaringizga qarab getTacoTranslateStaticProps yoki getTacoTranslateServerSideProps funksiyasidan birini ishlatasiz.

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

Sahifada har ikkala funksiyani ishlatish uchun, 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 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!

Hammasi tayyor! Endi siz Translate komponentiga har qanday satr qo‘shganingizda, Next.js ilovangiz avtomatik ravishda tarjima qilinadi. E'tibor bering, faqat API kalitida read/write ruxsatlariga ega muhitlar tarjima uchun yangi satrlarni yaratish imkoniga ega bo‘ladi. Bunday API kaliti bilan ishlab chiqarish ilovangizni sinab ko‘rish va jonli rejimga o‘tishdan oldin yangi satrlarni qo‘shish uchun yopiq va himoyalangan staging muhitiga ega bo‘lishingizni tavsiya qilamiz. Bu sizning maxfiy API kalitingizni hech kimning o‘g‘irlashiga yo‘l qo‘ymaydi va tarjima loyihangizga yangi, bog‘lanmagan satrlar qo‘shilib ortib ketishining 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!