Next.js қосымшаларында халықаралықтандыру (i18n) үшін ең жақсы шешім

Қалай жұмыс істейді

Әлем жаһанданып келе жатқандықтан, веб-әзірлеушілер үшін әртүрлі елдер мен мәдениеттерден келген пайдаланушыларға қызмет көрсететін қолданбаларды жасау маңызды болып тұр. Мұны жүзеге асырудың негізгі тәсілдерінің бірі — халықаралықтандыру (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 мекен-жайы. Мұнда origins туралы көбірек оқыңыз.

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: Орнату және сынау!

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