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

Qanday ishlaydi

Dunyo tobora globalizatsiyalashgani sayin, veb-ishlab chiquvchilar uchun turli mamlakat va madaniyatlardan bo‘lgan foydalanuvchilarga mos keladigan ilovalarni yaratish muhim ahamiyat kasb etmoqda. Bunga erishishning asosiy yo‘llaridan biri — xalqaro moslashuv (internationalization, i18n), u ilovangizni turli tillar, valyutalar va sana formatlariga moslashtirish imkonini beradi.

Ushbu qo‘llanmada biz React Next.js ilovangizga server tomoni renderlash bilan xalqaro moslashuvni qanday qo‘shishni o‘rganamiz. TL;DR: To‘liq namunani bu yerdan ko‘ring.

Ushbu qo'llanma Pages Routerni ishlatayotgan Next.js ilovalari uchun mo'ljallangan.
Agar siz App Routerni ishlatayotgan bo'lsangiz, iltimos, buning o'rniga ushbu qo'llanmaga qarang.

1-qadam: i18n kutubxonasini o'rnating

Next.js ilovangizda xalqaro moslashuvni (i18n) joriy etish uchun avvalo i18n kutubxonasini tanlaymiz. Bir nechta mashhur kutubxonalar mavjud, jumladan next-intl. Biroq, ushbu misolda biz TacoTranslatedan foydalanamiz.

TacoTranslate ilg'or sun'iy intellektdan foydalanib, satrlaringizni istalgan tilga avtomatik tarjima qiladi va sizni JSON fayllarini zerikarli boshqarishdan xalos qiladi.

Keling, uni terminalingizda npm yordamida o'rnating:

npm install tacotranslate

2-qadam: TacoTranslate hisobini bepul yarating

Modulni o'rnatganingizdan so'ng, TacoTranslate hisob qaydnomangizni, tarjima loyihangizni va tegishli API kalitlarini yaratish vaqti keldi. Bu yerda hisob yarating. Bu bepul va kredit karta qo'shishingiz shart emas.

TacoTranslate ilovasining foydalanuvchi interfeysida loyiha yarating va uning API kalitlari yorlig‘iga o‘ting. Bitta read kalit va bitta read/write kalit yarating. Ularni muhit o‘zgaruvchilari sifatida saqlaymiz. read kalitini biz public deb ataymiz, read/write kaliti 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 hech qachon mijoz tomonidagi ishlab chiqarish muhitlariga oshkor qilmang.

Shuningdek, biz yana ikkita muhit o'zgaruvchilarini qo'shamiz: TACOTRANSLATE_DEFAULT_LOCALE va TACOTRANSLATE_ORIGIN.

• TACOTRANSLATE_DEFAULT_LOCALE: Standart zaxira lokal kodi. Bu misolda uni ingliz tili uchun en deb belgilaymiz.
• TACOTRANSLATE_ORIGIN: Satrlaringiz 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 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;

Tez orada TACOTRANSLATE_API_KEY ni avtomatik ravishda belgilaymiz.

Klientni alohida faylda yaratish uni keyinchalik qayta ishlatishni osonlashtiradi. Endi, maxsus /pages/_app.tsx-ni ishlatib, 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, ta'rifni yuqoridagi xususiyatlar va kod bilan kengaytiring.

4-qadam: Server tomonida render qilishni amalga oshirish

TacoTranslate tarjimalaringizni server tomonida render qilish imkonini beradi. Bu foydalanuvchi tajribasini sezilarli darajada yaxshilaydi — tarjima qilinmagan kontentning qisqa muddatli ko'rinishiga yo'l qo'ymasdan, tarjima qilingan kontentni darhol ko'rsatadi. Bundan tashqari, mijoz tomonida tarmoq so'rovlarini o'tkazib yuborishimiz mumkin, chunki bizda kerakli barcha tarjimalar allaqachon 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'),
	});
};

Sozlamalaringizga mos ravishda isProduction tekshiruvini o'zgartiring. Agar true bo'lsa, TacoTranslate ommaviy API kalitini taqdim etadi. Agar biz mahalliy, test yoki staging muhitida bo'lsak (isProduction is false), yangi matnlar tarjima uchun yuborilishini ta'minlash uchun maxfiy read/write API kalitidan foydalanamiz.

Hozirgacha biz Next.js ilovasini faqat qo‘llab‑quvvatlanadigan tillar ro‘yxati bilan sozladik. Keyingi qadam — barcha sahifalaringiz uchun tarjimalarni olish. Buni amalga oshirish uchun talablaringizga qarab getTacoTranslateStaticProps yoki getTacoTranslateServerSideProps dan birini ishlatasiz.

Bu funksiyalar uchta argumentni oladi: bittasi Next.js Static Props Context obyekti, TacoTranslate uchun konfiguratsiya va ixtiyoriy Next.js xususiyatlari. E'tibor bering, getTacoTranslateStaticProps-dagi revalidate sukut bo'yicha 60 ga o'rnatilgan, shuning uchun tarjimalaringiz yangilanib turadi.

Bu funksiyalardan birini sahifada ishlatish uchun, deylik, sizda /pages/hello-world.tsx kabi sahifa fayli mavjud.

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 komponentlaringizda 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!

Biz tugatdik! Endi sizning Next.js ilovangizda Translate komponentiga har qanday satr qo‘shsangiz, ular avtomatik ravishda tarjima qilinadi. E'tibor bering, faqat API kalitida read/write ruxsatlari bo‘lgan muhitlar yangi tarjima qilinadigan satrlarni yaratish imkoniga ega bo‘ladi. Biz ishlab chiqarish ilovangizni bunday API kalit bilan sinab ko‘rish uchun yopiq va xavfsiz staging muhitiga ega bo‘lishingizni tavsiya qilamiz; jonli holatga o‘tishdan oldin yangi satrlarni qo‘shing. Bu maxfiy API kalitingizni o‘g‘irlashdan himoya qiladi va, shuningdek, tarjima loyihangizga yangi, aloqasi yo‘q satrlarni qo‘shib loyihani ortiqcha to‘ldirishning 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!