Како да се имплементира интернационализација во 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 клучеви. Создадете еден 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 својства. Имајте на ум дека 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 клучот ќе можат да создаваат нови низи за превод. Препорачуваме да имате затворена и обезбедена средина за тестирање (staging) каде што можете да ја тестирате вашата продукциска апликација со таков API клуч, додавајќи нови низи пред да ја објавите. Ова ќе спречи некој да го украде вашиот таен API клуч и потенцијално да го наполни вашиот проект за превод со нови, несродни низи.

Обавезно погледнете го целиот пример на нашиот GitHub профил. Таму, исто така, ќе најдете пример како да го направите ова користејќи го App Router! Ако наидете на какви било проблеми, слободно контактирајте нè, и ние ќе бидеме повеќе од среќни да помогнеме.

TacoTranslate ви овозможува автоматски да ги локализирате вашите React апликации брзо на и од повеќе од 75 јазици. Започнете денес!