Како да се имплементира интернационализација во 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-то на вашата веб-страница. Прочитајте повеќе за origin-ите тука.

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