Pages Router ашиглаж буй Next.js апп-д олон хэлний дэмжлэгийг хэрхэн хэрэгжүүлэх вэ

Дэлхий улам бүр глобалчлагдах тусам веб хөгжүүлэгчдэд өөр өөр улс, соёлын хэрэглэгчдэд тохирсон програмуудыг хөгжүүлэх нь улам чухал болж байна. Үүнийг хэрэгжүүлэх гол аргуудын нэг нь олон улсынчлал (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. Origin-уудын талаар дэлгэрэнгүй эндээс уншина уу.

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: Хэрэглээнд нэвтрүүлж, туршиж үзэх!

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

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

TacoTranslate нь таны React програмуудыг 75-аас дээш хэл рүү болон тэднээс автоматаар, богино хугацаанд локалчлах боломж олгодог. Өнөөдрөөс эхлээрэй!