Pages Router қолданылатын Next.js қосымшасында халықаралықтауды қалай жүзеге асыруға болады

Әлем жаһанданған сайын, веб-әзірлеушілерге әртүрлі елдер мен мәдениеттерден келген пайдаланушыларға арналған қолданбаларды жасау маңыздырақ болуда. Мұны жүзеге асырудың негізгі әдістерінің бірі — халықаралықтандыру (i18n), ол сіздің қолданбаңызды түрлі тілдерге, валюталарға және күн форматтарына бейімдеуге мүмкіндік береді.

Бұл оқулықта біз React Next.js қолданбаңызға сервер жағындағы рендерингпен халықаралықтандыруды қалай қосу керектігін зерттейміз. TL;DR: Толық мысалды осы жерден қараңыз.

Бұл нұсқаулық Pages Router қолданатын Next.js қосымшалары үшін арналған.
Егер сіз App Router пайдалансаңыз, оның орнына осы нұсқаулықты қараңыз.

1-қадам: i18n кітапханасын орнатыңыз

Next.js қосымшаңызда халықаралықтауды жүзеге асыру үшін алдымен 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 кілтін көрсетеді. Егер біз жергілікті, сынақ немесе дайындық ортада болсақ (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 кілтімен жаңа жолдарды қосып, тірі эфирге шығар алдында тексеруге болады. Бұл сіздің құпия API кілтіңізді ешкім ұрламас үшін және аударма жобаңызды маңызсыз, байланысы жоқ жолдармен жүктемеу үшін қажет.

Әрқашан GitHub профиліміздегі толық мысалды қарауды ұмытпаңыз. Онда сіз App Router пайдалану арқылы қалай жасауға болатыны туралы мысалды да таба аласыз! Егер қандай да бір мәселелер туындаса, байланысыңыз
TacoTranslate сізге React қолданбаларыңызды кез келген тілге және кез келген тілден жылдам автоматты түрде локализациялауға мүмкіндік береді. Бүгін бастаңыз!