Next.js ilovasida, Pages Routerdan foydalangan holda xalqarolashtirishni qanday amalga oshirish

Dunyo globalizatsiyalashgani sari, veb-ishlab chiquvchilar uchun turli mamlakatlar va madaniyatlardan keluvchi foydalanuvchilarga mos keladigan ilovalar yaratish tobora muhimlashmoqda. Bunga erishishning 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 tomonida renderlash bilan xalqarolashtirishni qanday qo‘shish mumkinligini 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 foydalansangiz, uning o'rniga ushbu qo'llanmani ko'ring.

1-qadam: i18n kutubxonasini o'rnating

Next.js ilovangizga mahalliylashtirishni (internationalization) qo‘llash 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 intellektdan foydalangan holda matnlaringizni avtomatik ravishda istalgan tilga tarjima qiladi va sizni JSON fayllarini zerikarli boshqarishidan xalos etadi.

Keling, terminalingizda npm yordamida o‘rnatamiz:

npm install tacotranslate

2-qadam: TacoTranslate uchun bepul hisob yarating

Endi modul o‘rnatilgach, TacoTranslate hisobingizni, tarjima loyihangizni va unga tegishli API kalitlarini yaratish vaqti keldi. Bu yerdan hisob yarating. Bu bepul va kredit karta qo‘shishingizni talab qilmaydi.

TacoTranslate ilovasining foydalanuvchi interfeysida loyiha yarating va uning API kalitlari bo‘limiga o‘ting. Bitta read va bitta read/write kalit yarating. Biz ularni muhit o‘zgaruvchilari sifatida saqlaymiz. read kalitni biz public deb ataymiz, read/write kalit esa secret hisoblanadi. Masalan, ularni loyihangiz ildizidagi .env faylga 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, yana ikki muhit o'zgaruvchisini qo'shamiz: TACOTRANSLATE_DEFAULT_LOCALE va TACOTRANSLATE_ORIGIN.

• TACOTRANSLATE_DEFAULT_LOCALE: Standart zaxira lokal kodi. Bu misolda biz uni ingliz tili uchun en ga o‘rnatamiz.
• TACOTRANSLATE_ORIGIN: Matnlaringiz saqlanadigan “papka”, masalan veb-saytingizning URL manzili. Originlar haqida bu yerdan ko‘proq o‘qing.

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

3-qadam: 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 tez orada TACOTRANSLATE_API_KEY ni avtomatik ravishda belgilaymiz.

Mijozni alohida faylga yaratish uni keyinchalik qayta ishlatishni osonlashtiradi. Endi, moslashtirilgan /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, ta'rifga yuqoridagi xususiyatlar va kodni qo'shing.

4-qadam: Server tomonida renderlashni amalga oshirish

TacoTranslate tarjimalaringizni server tomonida render qilish imkonini beradi. Bu foydalanuvchi tajribasini sezilarli darajada yaxshilaydi: avval tarjima qilinmagan kontentning qisqa paydo bo‘lishi o‘rniga tarjima qilingan kontent darhol ko‘rsatiladi. Bundan tashqari, biz mijoz tomonida tarmoq so‘rovlarini o‘tkazib yuborishimiz mumkin, chunki kerakli barcha tarjimalarimiz 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'),
	});
};

Konfiguratsiyangizga moslab isProduction tekshiruvini o'zgartiring. Agar true bo'lsa, TacoTranslate ommaviy API kalitini ko'rsatadi. Agar biz lokal, test yoki staging muhitida bo'lsak (isProduction is false), yangi satrlar tarjima uchun yuborilishini ta'minlash maqsadida 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 getTacoTranslateServerSideProps funksiyalaridan birini ishlatasiz.

Bu funksiyalar uchta argumentni qabul qiladi: bitta Next.js Static Props Context obyekti, TacoTranslate konfiguratsiyasi va ixtiyoriy Next.js xususiyatlari. Shuni yodda tutingki, revalidate getTacoTranslateStaticPropsda sukut bo‘yicha 60 ga o‘rnatilgan, shunday qilib tarjimalaringiz doimo yangilanib turadi.

Sahifada har ikkala funksiyadan foydalanish uchun, masalan, quyidagi kabi bir sahifa faylingiz bor deb faraz qilaylik: /pages/hello-world.tsx.

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 komponentlaringizda 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!

Tayyor! React ilovangiz endi Translate komponentiga har qanday matn qo‘shganingizda avtomatik ravishda tarjima qilinadi. E'tibor bering, API kalitidagi read/write ruxsatlariga ega muhitlargina tarjima uchun yangi satrlar yaratishi mumkin. Bunday API kalitidan foydalangan holda ishlab chiqarish ilovangizni sinab ko‘rish uchun yopiq va xavfsiz staging muhitiga ega bo‘lishingizni tavsiya qilamiz — yangi satrlarni jonli rejimga o‘tishdan oldin qo‘shing. Bu sizning maxfiy API kalitingizni hech kim o‘g‘irlashining oldini oladi va yangi, bog‘lanmagan satrlarni qo‘shish orqali tarjima loyihangizning ortiqcha yuklanishidan himoya qiladi.

Albatta, GitHub profilimizdagi to'liq namunani ko'rib chiqing. U yerda siz buni App Router yordamida qanday qilishni ko'rsatadigan misolni ham topasiz! Agar biron muammo yuzaga kelsa, bemalol bog'laning, va biz yordam berishdan mamnun bo'lamiz.

TacoTranslate sizning React ilovalaringizni 75 dan ortiq tillarga va ulardan avtomatik, tezkor mahalliylashtirish imkonini beradi. Bugun boshlang!