Next.js ilovalari uchun xalqaro moslashtirish (i18n) bo'yicha eng yaxshi yechim

Qanday ishlaydi

Dunyo tobora global bo'lib borayotgan sari, veb-ishlab chiquvchilar uchun turli mamlakat va madaniyatlardagi foydalanuvchilarga mos keladigan ilovalar yaratish muhimligi ortmoqda. Bunga erishishning asosiy usullaridan biri — xalqaro moslashtirish (i18n), u ilovangizni turli tillar, valyutalar va sana formatlariga moslashtirish imkonini beradi.

Ushbu qo'llanmada biz server tomonida renderlash bilan React Next.js ilovangizga xalqaro moslashtirishni qanday qo'shish mumkinligini o'rganamiz. TL;DR: Bu yerda to'liq misolni ko'ring.

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

1-qadam: i18n kutubxonasini o'rnating

Next.js ilovangizda xalqaro moslashtirishni amalga oshirish uchun, avvalo i18n kutubxonasini tanlaymiz. Bir nechta mashhur kutubxonalar mavjud, jumladan next-intl. Biroq, ushbu misolda biz TacoTranslate.

TacoTranslate zamonaviy sun'iy intellektdan foydalangan holda sizning matnlaringizni istalgan tilga avtomatik tarjima qiladi va JSON fayllarini zerikarli boshqarish yukidan xalos etadi.

Keling, terminalingizda npm orqali o'rnatamiz:

npm install tacotranslate

2-qadam: TacoTranslate uchun bepul hisob yarating

Endi modul o'rnatilgach, TacoTranslate hisobingizni, tarjima loyihangizni va unga bog'langan API kalitlarini yaratish vaqti keldi. Bu yerda hisob yarating. Bu bepul va kredit kartangizni qo'shishingiz shart emas.

TacoTranslate ilovasining interfeysida loyiha yarating va 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, va 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

Sirli read/write API kalitini mijoz tomonidagi ishlab chiqarish muhitlariga hech qachon oshkor qilmang.

Shuningdek, biz yana ikki atrof-muhit o'zgaruvchilarini qo'shamiz: TACOTRANSLATE_DEFAULT_LOCALE va TACOTRANSLATE_ORIGIN.

• TACOTRANSLATE_DEFAULT_LOCALE: Standart zaxira lokal kodi. Ushbu misolda uni ingliz tili uchun en deb belgilaymiz.
• TACOTRANSLATE_ORIGIN: Satrlaringiz saqlanadigan “papka” (masalan, veb-saytingizning URL manzili). Originlar haqida ko'proq ma'lumotni bu yerdan 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 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 tez orada TACOTRANSLATE_API_KEY ni avtomatik ravishda belgilaymiz.

Klientni alohida faylga yaratish uni keyinchalik qayta ishlatishni osonlashtiradi. Endi, moslashtirilgan /pages/_app.tsx dan foydalangan holda, 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'rifni yuqoridagi xususiyatlar va kod bilan kengaytiring.

4-qadam: Server tomonida render qilishni amalga oshirish

TacoTranslate tarjimalaringizni server tomondan render qilishga imkon beradi. Bu foydalanuvchi tajribasini ancha yaxshilaydi: avval tarjima qilinmagan kontentning qisqa paydo bo‘lishi o‘rniga tarjima qilingan mazmun darhol ko‘rsatiladi. Bundan tashqari, barcha kerakli tarjimalarimiz mavjud bo‘lgani uchun mijoz tomonida tarmoq so‘rovlarini o‘tkazib yuborishimiz mumkin.

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 moslash uchun isProduction tekshiruvini o'zgartiring. Agar true bo'lsa, TacoTranslate ommaviy API kalitini chiqaradi. Agar biz mahalliy, sinov yoki staging muhitida bo'lsak (isProduction is false), yangi satrlarning tarjimaga yuborilishini ta'minlash uchun maxfiy read/write API kalitidan foydalanamiz.

Hozirgacha biz Next.js ilovasini faqat qo'llab-quvvatlanadigan tillar ro'yxati bilan sozladik. Keyingi qiladigan ishimiz — barcha sahifalaringiz uchun tarjimalarni olish. Buning uchun talablaringizga qarab getTacoTranslateStaticProps yoki getTacoTranslateServerSideProps dan birini ishlatasiz.

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

Sahifada har ikkala funksiyani ishlatish uchun, sizda /pages/hello-world.tsx kabi sahifa fayli bor 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 barcha React komponentlaringizdagi matnlarni 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 Translate komponentiga har qanday matn qo'shganda, ular avtomatik ravishda tarjima qilinadi. E'tibor bering, faqat API kalitida read/write ruxsatlari mavjud muhitlar tarjima qilinadigan yangi matnlarni yaratish imkoniga ega bo'ladi. Bunday API kalitidan foydalanib ishlab chiqarish ilovangizni sinab ko'rish uchun yopiq va xavfsiz staging muhitiga ega bo'lishingizni tavsiya qilamiz; jonli rejimga o'tishdan oldin yangi matnlarni shu muhitga qo'shing. Bu sizning maxfiy API kalitingizning o'g'irlanishini oldini oladi va tarjima loyihangizga yangi, bog'lanmagan matnlarni qo'shib loyihani ortiqcha yuk bilan to'ldirish ehtimolini kamaytiradi.

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!