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 аппликэйшны UI-д төсөл үүсгээд 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: Анхдагч (fallback) локалын код. Энэ жишээнд бид үүнийг англи хэлний хувьд 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 нь орчуулгуудыг сервер тал дээр рендерлэх боломжтой. Энэ нь эхлээд орчуулгагүй агуулга гэнэт харагддаг хэлбэлзэлт (flash) гарахаас зайлсхийж, орчуулагдсан контентыг даруй харуулснаар хэрэглэгчийн туршлагыг ихээхэн сайжруулна. Мөн шаардлагатай бүх орчуулга аль хэдийн бэлэн тул клиент тал дээр сүлжээний хүсэлтүүдийг алгасаж болно.

Бид эхлээд /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 эрхтэй орчин л орчуулахад зориулсан шинэ мөрүүдийг үүсгэх боломжтой. Ийм API түлхүүр ашиглан үйлдвэрлэлийн аппликейшнаа шалгах, амжилттай ажиллаж байгаа эсэхийг баталгаажуулахын тулд амьдрахын өмнө шинэ текстүүд нэмэх зорилгоор хаалттай, аюулгүй staging орчинтой байхыг бид зөвлөж байна. Энэ нь таны нууц 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!