Next.js аппликейшнуудад олон улсын дасан зохицох (i18n) хамгийн сайн шийдэл

Үйл ажиллагааны зарчим

Дэлхийн нийтийг улам бүр гүнзгийрүүлж байгаа энэ үед вэб хөгжүүлэгчдэд өөр өөр улсууд болон соёлуудын хэрэглэгчдэд зориулагдсан програмуудыг бүтээх нь улам чухал болж байна. Үүнийг хэрэгжүүлэх гол арга замуудын нэг нь олон улсынчлал (i18n) бөгөөд энэ нь таны програмыг өөр өөр хэл, валют, огнооны форматуудад тохируулах боломжийг олгодог.

Энэхүү зааварт бид React Next.js програмдаа серверийн талын рендерингтэйгээр олон улсынчлал нэмэх талаар судлах болно. TL;DR: БҮХ жишээг эндээс үзнэ үү.

Энэхүү гарын авлага нь Pages Router ашиглаж байгаа Next.js програмуудад зориулагдсан.
Хэрэв та App Router ашиглаж байгаа бол, оронд нь энэ гарын авлагыг үзнэ үү.

Алхам 1: i18n номын санг суулгана уу

Таны Next.js програмд олон улсын дэмжлэг (i18n) нэвтрүүлэхийн тулд эхлээд i18n номын санг сонгоно. Олны танил хэд хэдэн номын сан байгаагийн нэг нь next-intl юм. Гэвч энэ жишээнд бид TacoTranslate ашиглана.

TacoTranslate таны бичвэрүүдийг хамгийн орчин үеийн хиймэл оюун ашиглан автоматаар хүссэн ямар ч хэл рүү хөрвүүлдэг ба JSON файлуудыг гар аргаар удирдах төвөгийг арилгана.

Одоо терминалдаа npm ашиглан суулгацгаая:

npm install tacotranslate

Алхам 2: Үнэгүй TacoTranslate данс үүсгээрэй

Одоо модулыг суулгасан тул TacoTranslate данс, орчуулгын төсөл болон холбоотой API түлхүүрүүдээ үүсгэх цаг болжээ. Энд данс үүсгээрэй. Энэ үнэгүй бөгөөд кредит карт нэмэх шаардлагагүй.

TacoTranslate програмын интерфэйс дотор төсөл үүсгэж, API түлхүүрүүдийн таб руу орно уу. Нэг read түлхүүр, нэг read/write түлхүүр үүсгээрэй. Эдгээрийг орчны хувьсагчдын хэлбэрээр хадгална. read түлхүүрийг бид public гэж нэрлэдэг бол read/write түлхүүрийг secret гэж нэрлэдэг. Жишээлбэл, та эдгээрийг төсөл тань үндсэн хавтас дахь .env файлд нэмэж болно.

TACOTRANSLATE_PUBLIC_API_KEY=123456
TACOTRANSLATE_SECRET_API_KEY=789010

Нууцын read/write API түлхүүрийг клиент талын үйлдвэрлэлийн орчинд хэзээ ч алдахгүй байхыг анхаараарай.

Бид мөн хоёр орчны хувьсагч нэмэх болно: TACOTRANSLATE_DEFAULT_LOCALE ба TACOTRANSLATE_ORIGIN.

• TACOTRANSLATE_DEFAULT_LOCALE: Өгөгдсөн анхны урвалтын нутгийн код. Энэ жишээнд, үүнийг en буюу Англи хэлээр тохируулна.
• TACOTRANSLATE_ORIGIN: Таны мессежүүд хадгалагдах "хавтас" бөгөөд таны вэбсайтын URL байж болно. Энд эх үүсвэрийн тухай дэлгэрэнгүй уншина уу.

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

Алхам 3: TacoTranslate тохируулах

TacoTranslate-ийг таны аппликейшнтэй нэгтгэхийн тулд өмнө авсан API түлхүүрүүдийг ашиглан клиент үүсгэх хэрэгтэй болно. Жишээ нь, /tacotranslate-client.js нэртэй файл үүсгээрэй.

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;

Бид богино хугацаанд TACOTRANSLATE_API_KEY -г автоматаар тодорхойлох болно.

Клиентээ тусдаа файлыг үүсгэснээр дараа нь дахин ашиглах нь илүү хялбар болдог. Одоо, өөрийн гэсэн /pages/_app.tsx файлыг ашиглан, бид TacoTranslate провайдерийг нэмнэ.

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>
	);
}

Хэрэв танд аль хэдийн тохируулсан pageProps болон _app.tsx байгаа бол дээрх шинж чанар болон кодоор тодорхойлолтыг өргөтгөөрэй.

Алхам 4: Сервер талын рендерингийг хэрэгжүүлэх

TacoTranslate нь таны орчуулгуудыг серверийн талд буулган үзүүлэх боломжийг олгодог. Энэ нь хэрэглэгчийн туршлагыг ихээхэн сайжруулдаг бөгөөд эхлээд орчуулга хийгдээгүй агуулга гэнэт харагдахийн оронд орчуулсан агуулгыг даруй харуулах юм. Мөн үүнээс гадна клиент талд сүлжээний хүсэлтүүдийг алгасан хийх боломжтой, учир нь бидэнд аль хэдийн хэрэгцээтэй бүх орчуулгууд байгаа юм.

Бид эхлээд /next.config.js файлыг үүсгэх эсвэл засварлах болно.

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 шалгалтыг таны тохиргоонд тохируулан өөрчилнө үү. Хэрэв true бол TacoTranslate олон нийтэд зориулсан API түлхүүрийг харуулах болно. Хэрэв бид локал, туршилтын эсвэл staging орчинд байгаа бол (isProduction is false) шинэ текстүүд хөрвүүлэлтэд илгээгдэхийг баталгаажуулахын тулд нууц read/write API түлхүүрийг ашиглах болно.

Одоогоор бид зөвхөн Next.js програмд дэмждэг хэлүүдийн жагсаалтыг тохируулсан байна. Дараагийн зүйл бол таны бүх хуудсуудын орчуулгыг татаж авах явдал юм. Үүнийг хийхийн тулд таны шаардлагын дагуу getTacoTranslateStaticProps эсвэл getTacoTranslateServerSideProps гэсэн аль нэгийг ашиглах болно.

Эдгээр функцүүд нь гурван аргумент авдаг: Нэг Next.js Static Props Context объект, TacoTranslate тохиргоо, мөн дурын Next.js шинж чанарууд. getTacoTranslateStaticProps дахь revalidate анхдагчаар 60 болгож тохируулсан гэдгийг анхаарна уу, ингэснээр таны орчуулгууд шинэчлэгдсэн хэвээр байх болно.

Эдгээр функцуудын аль нэгийг хуудсанд ашиглах гэж байгаа бол, таны хуудасны файл /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!"/>;
}

Одоогоор та бүх React бүрэлдэхүүн хэсгүүдийн доторх мөрүүдийг орчуулахын тулд Translate бүрэлдэхүүн хэсгийг ашиглах боломжтой болсон байх ёстой.

import {Translate} from 'tacotranslate/react';

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

Алхам 5: Тархуулах ба турших!

Бид ажил амжилттай дуусгалаа! Таны Next.js аппликейшн одоо ямар ч текстийг Translate компонентэд нэмэхэд автоматаар орчуулагдах болно. Анхаарна уу: зөвхөн API түлхүүр дээр read/write зөвшөөрөлтэй орчин л шинэ орчуулагдах текстүүдийг үүсгэх боломжтой. Бид таны үйлдвэрлэлийн аппликейшныг турших зориулалттай хаалттай, баталгаатай staging орчинтой байхыг зөвлөж байна. Ийм орчинд API түлхүүр ашиглан шинэ текстүүдийг нэмээд амьдралд шилжихээсээ өмнө шалгах нь зүйтэй. Энэ нь таны нууц API түлхүүрийг хэн нэгэн хууль бусаар ашиглах, бас шинэ, холбогдолгүй текстүүд нэмснээр таны орчуулгын төслийг дүүргэхээс сэргийлнэ.

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!