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

Qanday ishlaydi

Dunyo tobora globallashib borayotgan sari, veb ishlab chiquvchilar uchun turli mamlakatlar va madaniyatlar foydalanuvchilariga mos keladigan ilovalar yaratish tobora muhimlashmoqda. Bunga erishishning asosiy usullaridan biri — xalqaro qoʻllab-quvvatlash (i18n), bu sizga ilovani turli tillar, valyutalar va sana formatlariga moslashtirish imkonini beradi.

Ushbu qoʻllanmada biz React Next.js ilovangizga server tarafdan render qilish bilan xalqaro qoʻllab-quvvatlashni qanday qoʻshishni koʻrib chiqamiz. TL;DR: Toʻliq misolni bu yerdan koʻring.

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

1-qadam: i18n kutubxonasini o'rnating

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

TacoTranslate ilg‘or sun’iy intellekt yordamida satrlaringizni istalgan tilga avtomatik tarjima qiladi va JSON fayllarini zerikarli boshqaruvidan ozod qiladi.

Keling, uni terminalingizda npm orqali o'rnatamiz:

npm install tacotranslate

Qadam 2: TacoTranslate hisobini bepul yarating

Module o'rnatilgan bo'lgach, endi TacoTranslate hisobingizni, 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 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 fayliga qo'shishingiz mumkin.

TACOTRANSLATE_PUBLIC_API_KEY=123456
TACOTRANSLATE_SECRET_API_KEY=789010

Maxfiy read/write API kalitini hech qachon mijoz tomonidagi ishlab chiqarish muhitlariga 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 biz uni Ingliz tili uchun en ga o‘rnatamiz.
• TACOTRANSLATE_ORIGIN: Satrlaringiz saqlanadigan “papka”, masalan veb-saytingizning URL manzili. Manbalar (origins) haqida bu yerda batafsil o‘qing.

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

3-bosqich: 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;

Biz avtomatik tarzda TACOTRANSLATE_API_KEY ni tez orada belgilaymiz.

Klientni alohida faylga yaratish keyinchalik uni qayta ishlatishni osonlashtiradi. Endi, 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 maxsus 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 serverda render qilishga imkon beradi. Bu foydalanuvchi tajribasini sezilarli darajada yaxshilaydi — tarjima qilingan mazmunni darhol ko‘rsatadi, avvaliga tarjima qilinmagan matnning qisqa paytli ko‘rinishiga yo‘l qo‘ymaydi. Bundan tashqari, mijoz tomonida tarmoq so‘rovlarini o‘tkazib yuborishimiz mumkin, chunki kerakli barcha tarjimalar allaqachon mavjud.

Biz /next.config.js-ni 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 mahalliy, 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 sozlaganmiz. Keyingi qiladigan ishimiz — barcha sahifalaringiz uchun tarjimalarni olish. Buning uchun talablaringizga qarab getTacoTranslateStaticProps yoki getTacoTranslateServerSidePropsdan birini ishlatasiz.

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

Sahifada har ikkala funksiyani ishlatish uchun, sizda /pages/hello-world.tsx kabi sahifa fayli mavjud 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 komponentlaringizdagi 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!

Biz tugatdik! Endi siz Translate komponentiga har qanday satr qo'shganda, Next.js ilovangiz avtomatik ravishda tarjima qilinadi. E'tibor bering, API kalitida read/write ruxsatlariga ega bo'lgan muhitlargina tarjima qilish uchun yangi satrlar yaratishi mumkin. Bunday API kalitidan foydalanib ishlab chiqarish ilovangizni sinab ko'rishingiz va jonli efirga chiqishdan oldin yangi satrlarni qo'shishingiz uchun yopiq va xavfsiz staging muhitiga ega bo'lishingizni tavsiya qilamiz. Bu maxfiy API kalitingizni hech kim o'g'irlashining oldini oladi va potentsial ravishda tarjima loyihangizni yangi, mavzuga aloqasi bo'lmagan satrlar bilan to'ldirib yuborishdan himoya qiladi.

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!