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 сіздің мәтіндеріңізді кез келген тілге озық AI арқылы автоматты түрде аударады және сізді 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 кілтін көрсетеді. Егер біз локальды, тестілеу немесе енгізу алдындағы ортада болсақ (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 компонентіне қосқанда автоматты түрде аударылатын болады. Назар аударыңыз, тек read/write рұқсаттары бар API кілті бар ортада ғана жаңа аударылатын жолдарды жасауға мүмкіндік беріледі. Біз өндірістік қолданбаңызды мұндай API кілтімен сынап көру үшін жабық және қауіпсіз тестілеу ортасын ұсынуды ұсынамыз, жаңа жолдарды тіркеуден бұрын. Бұл сіздің құпия API кілтіңізді ұрлаудан және аударма жобасына жаңа, байланысты емес жолдарды қосу арқылы оны шамадан тыс жүктеуден сақтайды.

Міндетті түрде GitHub профиліміздегі толық мысалды қараңыз. Сол жерде App Router пайдаланып қалай жасауға болатынын көрсететін мысалды да таба аласыз! Егер мәселе туындаса, бізге хабарласыңыз
TacoTranslate сізге React қосымшаларыңызды 75-тен астам тілге және кері бағытта автоматты түрде тез аударуға мүмкіндік береді. Бүгін бастаңыз!