Најдобро решение за интернационализација (i18n) во Next.js апликации

Како работи

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

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

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

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

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

TacoTranslate автоматски ги преведува вашите стрингови на кој било јазик користејќи најсовремена AI технологија и ве ослободува од досадното управување со 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 клуч. Ако сме во локална, тест или staging средина (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: Објавете и тествајте!

Готови сме! Вашата Next.js апликација сега ќе биде автоматски преведена кога ќе додадете какви било стрингови во Translate компонентата. Имајте на ум дека само околини со read/write дозволи на API клучот ќе можат да создаваат нови низи за превод. Препорачуваме да имате затворена и заштитена тестна средина во која можете да ја тестирате вашата продукциска апликација со таков API клуч, додавајќи нови низи пред да ја пуштите во живо. Ова ќе спречи било кој било кој да го украде вашиот таен API клуч и потенцијално да го зголеми обемот на вашиот проект за превод со додавање нови, несродни низи.

Be sure to check out the complete example over at our GitHub profile. There, you’ll also find an example of how to do this using the App Router! If you encounter any problems, feel free to reach out, and we’ll be more than happy to help.

TacoTranslate lets you automatically localize your React applications quickly to and from over 75 languages. Get started today!