Pages Router-ийг ашиглаж байгаа Next.js аппликейшнд олон улсын нийтлэг хэлбэржүүлэлтийг (internationalization) хэрхэн хэрэгжүүлэх вэ

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

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

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

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

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

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

Түүнийг таны терминалд npm ашиглан суулгана уу:

npm install tacotranslate

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

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

TacoTranslate програмын UI-д төсөл үүсгэж, API түлхүүрүүдийн таб руу очно уу. Нэг read түлхүүр, нэг read/write түлхүүр үүсгээрэй. Эдгээрийг орчны хувьсагчид хадгална. read түлхүүрийг бид public гэж нэрлэдэг бөгөөд read/write түлхүүр нь secret юм. Жишээлбэл, та эдгээрийг төслийн root фолдер дахь .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 тохируулах

To integrate TacoTranslate with your application, you’ll need to create a client using the API keys from earlier. For example, create a file named /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 түлхүүрийг ил гаргана. Хэрвээ бид local, test эсвэл staging орчинд (isProduction is falseбайвал шинэ мөрүүдийг орчуулахаар илгээхийн тулд нууц read/write API түлхүүрийг ашиглана.

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

Эдгээр функцүүд нь 3 аргумент авдаг: Нэг 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: Хэрэгжүүлж, туршина уу!

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

За GitHub профайл дээрх бүтэн жишээг заавал үзээрэй. Тэнд та App Router ашиглан хэрхэн хийх жишээг мөн олж харах болно! Хэрэв ямар нэгэн асуудал тулгарвал, чөлөөтэйгээр бидэнтэй холбоо бариарай
TacoTranslate нь таны React програмуудыг хүссэн хэл рүү болон хамааралгүй хурдан автоматаар орчуулах боломжийг олгодог. Өнөөдрөөс эхэл!