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

Qanday ishlaydi

Dunyo yanada globalizatsiyalashib borar ekan, veb dasturchilar uchun turli mamlakatlar va madaniyatlardan kelgan foydalanuvchilarga mos keladigan ilovalarni yaratish tobora muhimlashmoqda. Bunga erishishning asosiy usullaridan biri — internationalizatsiya (i18n) bo‘lib, bu sizga ilovangizni turli tillar, valyutalar va sana formatlariga moslashtirish imkonini beradi.

Ushbu qo‘llanmada biz React Next.js ilovangizga internationalizatsiyani qanday qo‘shish, server tomonlama rendering bilan birga amalga oshirishni o‘rganamiz. TL;DR: To‘liq misolni shu yerdan ko‘ring.

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

1-qadam: i18n kutubxonasini o‘rnatish

Next.js ilovangizda xalqaro tillashtirishni (internationalization) amalga oshirish uchun avvalo i18n kutubxonasini tanlaymiz. Mashhur kutubxonalar orasida next-intl ham bor. Ammo, ushbu misolda biz TacoTranslate dan foydalanamiz.

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

Keling, terminalingizda npm yordamida uni o‘rnatamiz:

npm install tacotranslate

2-qadam: Bepul TacoTranslate hisobini yarating

Endi modul o'rnatilgan bo'lsa, TacoTranslate hisobingizni, tarjima loyihasini va bog'liq API kalitlarini yaratish vaqti keldi. Bu yerda hisob yarating. Bu bepul va kredit karta qo'shishni talab qilmaydi.

TacoTranslate ilovasi 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 hech qachon mijoz tomonidagi ishlab chiqarish muhitlariga oshkor qilmaslikka ishonch hosil qiling.

Biz yana ikkita muhit o‘zgaruvchilarini qo‘shamiz: TACOTRANSLATE_DEFAULT_LOCALE va TACOTRANSLATE_ORIGIN.

• TACOTRANSLATE_DEFAULT_LOCALE: Sukut bo‘yicha qaytish joyi kodi. Ushbu misolda biz uni ingliz tili uchun en ga o‘rnatamiz.
• TACOTRANSLATE_ORIGIN: Matnlaringiz saqlanadigan “papka”, masalan sizning veb-saytingiz URL manzili. Asllar haqida ko‘proq o‘qing.

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

3-qadam: TacoTranslate ni sozlash

TacoTranslate-ni ilovangiz bilan integratsiya qilish uchun siz avvalgi API kalitlaridan foydalangan holda mijoz yaratishingiz kerak. Masalan, /tacotranslate-client.jsnomli 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 ravishda TACOTRANSLATE_API_KEY ni belgilaymiz.

Mijozni alohida faylda yaratish uni keyinchalik 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 bo'lsa, iltimos, yuqoridagi xususiyatlar va kod bilan ta'rifni kengaytiring.

4-qadam: Server tomondan render qilishni amalga oshirish

TacoTranslate tarjimalaringizni server tomonida ko‘rsatishga imkon beradi. Bu foydalanuvchi tajribasini sezilarli darajada yaxshilaydi, chunki tarjima qilingan kontent darhol ko‘rsatiladi, avval tarjima qilinmagan kontentning qisqa paydo bo‘lishi o‘rniga. Bundan tashqari, mijoz tomonidagi tarmoq so‘rovlarini o‘tkazib yuborishimiz mumkin, chunki bizda allaqachon kerakli barcha tarjimalar 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 sozladik. Keyingi qiladigan ishimiz — barcha sahifalaringiz uchun tarjimalarni olishdir. Buning uchun talablaringizga qarab getTacoTranslateStaticProps yoki getTacoTranslateServerSideProps funksiyalaridan birini ishlatasiz.

Ushbu funksiyalar uchta argumentni oladi: bitta Next.js Static Props Context obyekti, TacoTranslate konfiguratsiyasi va ixtiyoriy Next.js xususiyatlari. E'tibor bering, getTacoTranslateStaticProps ichidagi revalidate standart bo‘yicha 60 ga o‘rnatilgan, shuning uchun tarjimalaringiz doimo yangilanib turadi.

Har ikkala funksiyani sahifada ishlatish uchun, aytaylik, 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 siz barcha React komponentlaringiz ichida matnlarni tarjima qilish uchun Translate komponentidan foydalanishingiz mumkin.

import {Translate} from 'tacotranslate/react';

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

5-qadam: Joylashtirish va sinovdan o'tkazish!

Tugadi! Endi sizning Next.js ilovangizda har qanday satrni Translate komponentiga qo‘shganingizda avtomatik tarzda tarjima qilinadi. E'tibor bering, faqat read/write ruxsatlariga ega bo‘lgan muhitlar yangi tarjima qilinadigan satrlarni yaratishi mumkin. Biz sizga yopiq va xavfsiz staging muhitiga ega bo‘lishni tavsiya qilamiz, bu yerda siz ishlab chiqarish ilovangizni shunday API kaliti bilan sinab ko‘rishingiz va jonli ishlashdan oldin yangi satrlarni qo‘shishingiz mumkin. Bu sizning maxfiy API kalitingizning o‘g‘irlanishini oldini oladi va tarjima loyihangizga yangi, bog‘lanmagan satrlarni qo‘shish orqali uni ortiqcha yuklamaslikka yordam beradi.

Albatta, to‘liq misolni GitHub profilingizda ko‘rib chiqing. U yerda shuningdek, buni App Router yordamida qanday amalga oshirish bo‘yicha misolni ham topasiz! Agar biron-bir muammo yuzaga kelsa, bemalol biz bilan bog‘laning, sizga yordam berishdan mamnun bo‘lamiz.

TacoTranslate React ilovalaringizni avtomatik ravishda har qanday tilda tez va oson joylashtirish imkonini beradi. Bugun boshlang!