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