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

Qanday ishlaydi

Dunyo tobora globalizatsiyalashib borayotganligi sababli, veb dasturchilar uchun turli mamlakatlar va madaniyatlardan kelgan foydalanuvchilarga mos keladigan ilovalar yaratish ayniqsa muhim bo'lib qolmoqda. Bunga erishishning asosiy usullaridan biri — xalqarolashtirish (i18n), u sizga ilovangizni turli tillar, valyutalar va sana formatlariga moslashtirish imkonini beradi.

Ushbu qo'llanmada biz React Next.js ilovangizga server tomondan render qilish bilan birga xalqarolashtirishni qanday qo'shish mumkinligini ko'rib chiqamiz. TL;DR: To'liq misolni bu yerdan ko'ring.

Ushbu qo'llanma Pages Routerni ishlatayotgan Next.js ilovalari uchun mo‘ljallangan.
Agar siz App Routerni ishlatayotgan 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 zamonaviy sun'iy intellekt (AI) yordamida satrlaringizni istalgan tilga avtomatik tarjima qiladi va JSON fayllarni zerikarli boshqarishdan ozod etadi.

Keling, terminalingizda npm yordamida uni o'rnating:

npm install tacotranslate

2-qadam: TacoTranslate-da bepul hisob 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 kiritishingiz shart emas.

TacoTranslate ilovasining interfeysida 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, 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

Maxfiy read/write API kalitini mijoz tomonidagi ishlab chiqarish muhitlariga hech qachon oshkor qilmang.

Shuningdek, biz yana ikkita muhit o'zgaruvchisini 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: Satrlaringiz saqlanadigan “papka”, masalan, veb-saytingizning URL manzili. Originlar haqida batafsil ma'lumotni bu yerda 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 TACOTRANSLATE_API_KEYni avtomatik ravishda belgilaymiz.

Clientni alohida faylga yaratish uni keyinchalik qayta ishlatishni osonlashtiradi. Endi moslashtirilgan /pages/_app.tsxdan 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, yuqoridagi xususiyatlar va kod bilan ta'rifni kengaytiring.

4-qadam: Server tomonida renderlashni amalga oshirish

TacoTranslate tarjimalaringizni server tomonida render qilishga imkon beradi. Bu foydalanuvchi tajribasini ancha yaxshilaydi, chunki tarjima qilinmagan kontentning avvalgi qisqa namoyishi o‘rniga tarjima qilingan kontent darhol ko‘rsatiladi. Bundan tashqari, barcha kerakli tarjimalarimiz mavjudligi sababli mijoz tomonida tarmoq so‘rovlarini o‘tkazib yuborishimiz mumkin.

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

O'zingizning sozlamalaringizga mos ravishda isProduction tekshiruvini moslashtiring. Agar true, TacoTranslate ommaviy API kalitini ko'rsatadi. Agar biz mahalliy, sinov 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 sozlaganmiz. Keyingi qadam — barcha sahifalaringiz uchun tarjimalarni olish. Buning uchun talablaringizga qarab getTacoTranslateStaticProps yoki getTacoTranslateServerSideProps dan birini ishlatasiz.

Bu funksiyalar uchta argumentni qabul qiladi: bitta 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 yangilangan holda qoladi.

Ikkala funksiyadan birini sahifada ishlatish uchun, faraz qilaylik 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 Translate komponentidan foydalanib satrlarni tarjima qilishingiz mumkin.

import {Translate} from 'tacotranslate/react';

function Component() {
	return <Translate string="Hello, world!"/>
}

5-qadam: Joylashtiring va sinab ko'ring!

Tugadi! Endi siz Translate komponentiga istalgan satrlarni qo'shganda, Next.js ilovangiz avtomatik ravishda tarjima qilinadi. E'tibor bering, API kalitida read/write ruxsatlari mavjud bo'lgan muhitlargina yangi tarjima qilinadigan satrlar yaratishlari mumkin. Bunday API kalit bilan ishlab chiqarish ilovangizni sinab ko'rishingiz va jonli ishlashga o'tishdan oldin yangi satrlarni qo'shishingiz uchun yopiq va xavfsiz staging muhitini ta'minlashni tavsiya etamiz. Bu sizning maxfiy API kalitingiz o'g'irlanishining oldini oladi va tarjima loyihangizga yangi, aloqasi bo'lmagan satrlarni qo'shib loyihani ortiqcha kengaytirishdan saqlaydi.

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!