Next.js ilovalari uchun eng yaxshi xalqarolashtirish (i18n) yechimi

Qanday ishlaydi

Dunyo tobora globalizatsiyalanib borayotgan sari, veb ishlab chiquvchilar uchun turli mamlakatlar va madaniyatlar foydalanuvchilariga mos keladigan ilovalarni yaratish tobora muhimroq bo‘lmoqda. Buni amalga oshirishning eng muhim yo‘llaridan biri xalqarolashtirish (i18n) bo‘lib, u ilovangizni turli tillar, valyutalar va sana formatlariga moslashtirish imkonini beradi.

Ushbu qo‘llanmada biz React Next.js ilovangizga server tomonida render qilish bilan birga xalqarolashtirishni qanday qo‘shish mumkinligini o‘rganamiz. TL;DR: To‘liq misolga shu yerda qarang.

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

1-qadam: i18n kutubxonasini o'rnating

Next.js ilovangizda xalqaro moslashuvni amalga oshirish uchun avvalo i18n kutubxonasini tanlaymiz. Mashhur kutubxonalar orasida next-intl mavjud. Ammo, ushbu misolda biz TacoTranslate dan foydalanamiz.

TacoTranslate ilg‘or sun’iy intellekt yordamida yozuvlaringizni avtomatik ravishda istalgan tilga tarjima qiladi va JSON fayllarini charchatuvchi boshqaruvdan sizni ozod qiladi.

Keling, uni terminalingizda npm yordamida o‘rnatamiz:

npm install tacotranslate

2-qadam: Bepul TacoTranslate hisobini yarating

Endi modulni o’rnatib bo’lgach, TacoTranslate hisobingizni, tarjima loyihasini va tegishli API kalitlarini yaratish vaqti keldi. Bu yerda hisob yaratishingiz mumkin. Bu bepul va kredit karta qo’shishingiz shart emas.

TacoTranslate ilovasi UI ichida loyiha yarating va uning API kalitlari bo‘limiga o‘ting. Bitta read kalit va bitta read/write kalit yarating. Ularni atrof-muhit o‘zgaruvchilari sifatida saqlaymiz. read kalitni biz public deb ataymiz, read/write kalit esa secret. Masalan, ularni loyihangiz ildizidagi .env fayliga qo‘shishingiz mumkin.

TACOTRANSLATE_PUBLIC_API_KEY=123456
TACOTRANSLATE_SECRET_API_KEY=789010

Hech qachon sirli read/write API kalitini mijoz tomonidagi ishlab chiqarish muhitlariga oshkor qilmaslikka ishonch hosil qiling.

Bundan tashqari, yana ikkita muhit o'zgaruvchis ​​qo'shamiz: TACOTRANSLATE_DEFAULT_LOCALE va TACOTRANSLATE_ORIGIN.

• TACOTRANSLATE_DEFAULT_LOCALE: Default qaytish tili kodi. Ushbu misolda, biz uni ingliz tili uchun en ga o'rnatamiz.
• TACOTRANSLATE_ORIGIN: Sizning matnlaringiz saqlanadigan "papka", masalan, sayt manzilingiz (URL). Originlar haqida ko'proq o‘qing.

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

3-qadam: TacoTranslate ni sozlash

TacoTranslate’ni ilovangizga birlashtirish uchun oldingi API kalitlari yordamida 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 tez orada avtomatik tarzda TACOTRANSLATE_API_KEY ni belgilaymiz.

Mijozni alohida faylda yaratish uni keyinchalik yana ishlatishni osonlashtiradi. Endi, maxsus /pages/_app.tsx faylidan foydalangan holda, 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 u avval tarjima qilinmagan kontentning qisman ko‘rinishidan ko‘ra, tarjima qilingan kontentni darhol ko‘rsatadi. Bundan tashqari, mijozdagi 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 moslang. Agar true boʻlsa, TacoTranslate jamoat API kalitini koʻrsatadi. Agar biz mahalliy, test yoki staging muhitida boʻlsak (isProduction is false), yangi satrlar tarjimaga yuborilganligiga ishonch hosil qilish uchun maxfiy read/write API kalitidan foydalanamiz.

Hozirgacha, biz faqat Next.js ilovasini qo‘llab-quvvatlanadigan tillar ro‘yxati bilan sozlaganmiz. Keyingi qilinadigan ishimiz barcha sahifalaringiz uchun tarjimalarni olishdir. Buning uchun, talablaringizga qarab, getTacoTranslateStaticProps yoki getTacoTranslateServerSideProps funksiyalaridan birini ishlatasiz.

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

Sahifada ushbu funksiyalardan birini ishlatish uchun, keling, sizda /pages/hello-world.tsx kabi sahifa fayli bor deb faraz qilamiz.

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 barcha React komponentlaringizdagi qatorlarni 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!

Ishimiz tugadi! Endi sizning Next.js ilovangizda har qanday matnni Translate komponentiga qo‘shganingizda avtomatik tarzda tarjima qilinadi. E'tibor bering, faqat read/write huquqlarga ega API kalitiga ega muhitlarda yangi tarjima qilinadigan matnlar yaratish mumkin bo‘ladi. Biz sizga yopiq va xavfsiz staging muhitini yaratishni tavsiya qilamiz, u yerda siz ishlab chiqarish ilovangizni shunday API kaliti bilan sinovdan o‘tkazishingiz va jonli ishlashdan oldin yangi matnlarni qo‘shishingiz mumkin. Bu sirli API kalitingizni o‘g‘irlashdan va tarjima loyihangizga hech qanday aloqasi bo‘lmagan yangi matnlarni qo‘shib, uni ortiqcha yuklamaslikdan 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!