Како да имплементирате интернационализација во Next.js апликација која ја користи Pages Router

Како светот станува сè по‑глобализиран, сè повеќе е важно веб-разработувачите да создаваат апликации кои можат да им служат на корисници од различни земји и култури. Еден од клучните начини да се постигне ова е преку интернационализација (i18n), која ви овозможува да ја прилагодите вашата апликација на различни јазици, валути и формати на датуми.

Во ова упатство, ќе разгледаме како да додадете интернационализација во вашата React Next.js апликација, со серверско рендерирање. TL;DR: Погледнете го целиот пример овде.

Овој водич е за Next.js апликации кои користат Pages Router.
Ако ја користите App Router, ве молиме погледнете го овој водич наместо тоа.

Чекор 1: Инсталирајте i18n библиотека

За да ја имплементираме интернационализацијата во вашата Next.js апликација, прво ќе избереме библиотека за i18n. Постојат неколку популарни библиотеки, вклучувајќи next-intl. Сепак, во овој пример, ќе ја користиме TacoTranslate.

TacoTranslate автоматски ги преведува вашите текстови на кој било јазик користејќи најсовремена вештачка интелигенција и ве ослободува од досадното управување со JSON-датотеки.

Ајде да го инсталираме користејќи npm во вашиот терминал:

npm install tacotranslate

Чекор 2: Креирајте бесплатен TacoTranslate налог

Сега кога го имате модулот инсталиран, време е да ја креирате вашата TacoTranslate сметка, проект за превод и соодветните API клучеви. Креирајте сметка тука. Тоа е бесплатно и не бара да додадете кредитна картичка.

Во корисничкиот интерфејс на апликацијата TacoTranslate, создадете проект и отидете на табот со API клучеви. Create one read key, and one read/write key. Ќе ги зачуваме како променливи на опкружувањето. Клучот 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-то на вашата веб-страница. Прочитајте повеќе за 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 својства. Имајте на ум дека revalidate на getTacoTranslateStaticProps е поставено на 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!"/>;
}

Сега треба да можете да го користите компонентот Translate за да ги преведувате низите во сите ваши React компоненти.

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 јазици. Започнете денес!