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

Qanday ishlaydi

Dunyo tobora globalizatsiyalashgani sayin, veb ishlab chiquvchilar uchun turli mamlakatlar va madaniyatlardan bo‘lgan foydalanuvchilarga moslashtirilgan ilovalar yaratish muhimroq bo‘lmoqda. Buni amalga oshirishning asosiy usullaridan biri — internationalizatsiya (i18n), bu orqali siz ilovangizni turli tillar, valyutalar va sana formatlariga moslashtira olasiz.

Ushbu qo'llanmada, React Next.js ilovangizga internationalizatsiyani, server tarafidan rendering bilan qanday qo‘shishni o‘rganamiz. TL;DR: Toʻliq misolni shu yerdan koʻring.

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

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 TacoTranslatedan foydalanamiz.

TacoTranslate ilg‘or AI texnologiyasidan foydalangan holda, sizning matnlaringizni avtomatik tarzda istalgan tilga tarjima qiladi va JSON fayllarini charchatuvchi boshqaruvidan xalos qiladi.

Keling, terminalingizda npm yordamida o‘rnatamiz:

npm install tacotranslate

2-qadam: Bepul TacoTranslate hisob qaydnomasi yarating

Endi modul o‘rnatilgan bo‘lsa, TacoTranslate hisobingizni, tarjima loyihangizni va tegishli API kalitlarini yaratish vaqti keldi. Bu yerdan 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, siz ularni loyihangiz ildizida joylashgan .env fayliga qo‘shishingiz mumkin.

TACOTRANSLATE_PUBLIC_API_KEY=123456
TACOTRANSLATE_SECRET_API_KEY=789010

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

Shuningdek, ikkita qo‘shimcha atrof-muhit o‘zgaruvchilarini qo‘shamiz: TACOTRANSLATE_DEFAULT_LOCALE va TACOTRANSLATE_ORIGIN.

• TACOTRANSLATE_DEFAULT_LOCALE: Standart zaxira video kodi. Ushbu misolda, biz uni ingliz tili uchun en ga o'rnatamiz.
• TACOTRANSLATE_ORIGIN: Sizning satrlaringiz saqlanadigan “papka”, masalan, veb-saytingiz URL manzili. Bu yerda originlar haqida batafsil o'qishingiz mumkin.

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

3-qadam: TacoTranslate sozlamalari

TacoTranslate ni ilovangizga integratsiya qilish uchun oldingi 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 uni keyinchalik yana foydalanishni osonlashtiradi. Endi, maxsus /pages/_app.tsx dan foydalanib, biz 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 joriy etish

TacoTranslate tarjimalaringizni server tomonida chiqarishga imkon beradi. Bu foydalanuvchi tajribasini sezilarli darajada yaxshilaydi, chunki u avval tarjima qilinmagan mazmunning qisqa ko‘rinishini emas, balki darhol tarjima qilingan mazmunni ko‘rsatadi. Bundan tashqari, mijoz tomonidan tarmoq so‘rovlarini o'tkazib yuborishimiz mumkin, chunki bizda allaqachon barcha kerakli 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 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 komponentlaringiz ichidagi 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!

Tugatdik! Endi sizning Next.js ilovangizda har qanday matnlar Translate komponentiga qo‘shilganida avtomatik ravishda tarjima qilinadi. E'tibor bering, faqat API kalitida read/write ruxsatlariga ega muhitlar yangi tarjima qilinadigan matnlarni yaratishi mumkin. Biz sizga yopiq va xavfsiz staging muhitini tavsiya qilamiz, unda siz ishlab chiqarish ilovangizni shunday API kaliti bilan sinab ko‘rishingiz, hamda jonli rejimga o‘tishdan oldin yangi matnlar qo‘shishingiz mumkin. Bu barcha uchun maxfiy API kalitingiz o‘g‘irlanishining oldini oladi va tarjima loyihangizning keraksiz, bog‘lanmagan matnlar bilan to‘lib ketishini bartaraf etadi.

Albatta, to‘liq misolni GitHub profilimizda ko‘rib chiqing. U yerda siz App Router yordamida buni qanday qilish bo‘yicha ham misol topasiz! Agar biror muammo yuzaga kelsa, bemalol bog‘laning, va biz yordam berishga tayyormiz.

TacoTranslate sizning React ilovalaringizni istalgan tilga avtomatik ravishda tezda lokalizatsiya qilish imkonini beradi. Bugunoq boshlang!