Next.js ilovasida, Pages Router dan foydalanganda, xalqarolashtirishni (internationalization) qanday amalga oshirish kerakligi

Dunyo tobora globalizatsiyalashib borar ekan, veb-ishlab chiquvchilar uchun turli mamlakatlar va madaniyatlardan kelgan foydalanuvchilarga mos keladigan ilovalarni yaratish tobora muhimlashmoqda. Buni amalga oshirishning asosiy usullaridan biri — xalqarolashtirish (i18n), bu sizga ilovangizni turli tillar, valyutalar va sana formatlariga moslashtirish imkonini beradi.

Ushbu qo'llanmada biz React Next.js ilovangizga server tomondan rendering bilan birga xalqarolashtirishni qanday qo'shishni ko'rib chiqamiz. TL;DR: To‘liq misolni bu yerda ko‘ring.

Ushbu qo'llanma Pages Router dan foydalanayotgan Next.js ilovalari uchun mo'ljallangan.
Agar siz App Routerdan foydalansangiz, iltimos, uning o‘rniga ushbu qo‘llanmaga qarang.

1-qadam: i18n kutubxonasini o‘rnating

Next.js ilovangizda xalqarolashtirishni 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 AI texnologiyasidan foydalangan holda, matnlaringizni istalgan tilga avtomatik tarjima qiladi va sizni JSON fayllarini zerikarli boshqarishidan ozod qiladi.

Keling, uni terminalingizda npm yordamida o‘rnatamiz:

npm install tacotranslate

2-qadam: Bepul TacoTranslate hisob qaydnomasi yarating

Endi modul o‘rnatib bo‘lingan, vaqti keldi TacoTranslate hisobingizni, tarjima loyihangizni va bog‘langan API kalitlarini yaratish vaqti keldi. Bu yerdan hisob yarating. 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 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

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

Shuningdek, ikkita muhit o'zgaruvchisini qo'shamiz: TACOTRANSLATE_DEFAULT_LOCALE va TACOTRANSLATE_ORIGIN.

• TACOTRANSLATE_DEFAULT_LOCALE: Sukut bo‘yicha qaytish uchun mo‘ljallangan hudud kodi. Ushbu misolda biz uni ingliz tili uchun en ga o‘rnatamiz.
• TACOTRANSLATE_ORIGIN: Sizning satrlaringiz saqlanadigan “papka”, masalan, veb-saytingiz URL manzili. Manbalar haqida bu yerdan ko‘proq o‘qing.

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

3-qadam: TacoTranslate sozlamalarini o‘rnatish

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 yaqinda avtomatik ravishda TACOTRANSLATE_API_KEY ni belgilaymiz.

Mijozni alohida faylda yaratish keyinchalik undan yana foydalanishni osonlashtiradi. Endi, maxsus /pages/_app.tsx faylidan 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 bo‘lsa, iltimos yuqoridagi xususiyatlar va kod bilan ta’rifni kengaytiring.

4-qadam: Server tomonlama renderingni amalga oshirish

TacoTranslate tarjimalaringizni server tomonida render qilishga imkon beradi. Bu foydalanuvchi tajribasini sezilarli darajada yaxshilaydi, chunki avval tarjima qilinmagan kontentning bir lahzalik ko‘rinishi o‘rniga darhol tarjima qilingan kontentni ko‘rsatadi. Bundan tashqari, mijoz tomonidagi 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'),
	});
};

isProduction tekshiruvini o‘z sozlamalaringizga moslashtiring. Agar true bo‘lsa, TacoTranslate jamoat API kalitini ko‘rsatadi. Agar biz mahalliy, test yoki staging muhitida bo‘lsak (isProduction is false), yangi matnlar tarjima uchun yuborilishi uchun maxfiy read/write API kalitidan foydalanamiz.

Hozirgacha, biz faqat Next.js ilovasini qo‘llab-quvvatlanadigan tillar ro‘yxati bilan sozlaganmiz. Keyingi qiladigan ishimiz – barcha sahifalaringiz uchun tarjimalarni olish. Buni amalga oshirish uchun talablaringizga ko‘ra getTacoTranslateStaticProps yoki getTacoTranslateServerSideProps funksiyalaridan foydalanasiz.

Ushbu funksiyalar uchta argumentni qabul qiladi: bitta Next.js Static Props Context obyekti, TacoTranslate konfiguratsiyasi va ixtiyoriy Next.js xususiyatlari. E'tibor bering, getTacoTranslateStaticPropsdagi revalidate sukut bo'yicha 60 ga o'rnatilgan, shuning uchun tarjimalaringiz doimiy yangilab turiladi.

Har ikkala funksiyani sahifada ishlatish uchun, keling, sahifa faylingiz /pages/hello-world.tsx kabi bo'lsin 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 Translate komponentini barcha React komponentlaringiz ichidagi matnlarni tarjima qilish uchun ishlatishingiz mumkin.

import {Translate} from 'tacotranslate/react';

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

5-qadam: Joylashtiring va sinab ko‘ring!

Tayyor! Sizning React ilovangiz endi har qanday matnni Translate komponentiga qo‘shganingizda avtomatik tarzda tarjima qilinadi. E'tibor bering, faqat API kalitida read/write ruxsatlari mavjud bo‘lgan muhitlarda tarjima uchun yangi matnlar yaratish mumkin bo‘ladi. Biz ishlab chiqarishga o'tishdan oldin, shunday yopiq va xavfsiz staging muhitiga ega bo‘lishingizni tavsiya qilamizki, u yerda API kalitidan foydalanib, yangi matnlarni qo‘shib, ishlab chiqarish ilovangizni sinab ko‘rishingiz mumkin. Bu sizning maxfiy API kalitingizni hech kim o‘g‘irlashining oldini oladi va tarjima loyihangizga yangi, mavzudan chetga chiqqan matnlarni qo‘shib loyihani keraksiz ravishda kattalashtirishning oldini oladi.

Albatta, to'liq misolga GitHub profilimizda nazar soling. U yerda, shuningdek, buni App Router yordamida qanday qilish bo‘yicha misolni topasiz! Agar biron muammo yuzaga kelsa, bemalol bog‘laning, va biz yordam berishga tayyormiz.

TacoTranslate sizga React ilovalaringizni har qanday tilga va tildan avtomatik tarzda tezda lokalizatsiya qilish imkoniyatini beradi. Bugunoq boshlang!