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 қолданбасының 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: Әдепкі резервтік аймақ коды. Бұл мысалда біз оны ағылшын тілі үшін 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-қадам: Жариялау және сынау!

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