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