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

Како функционира

Како што светот станува сè повеќе глобализиран, станува се поважно за веб-разработчиците да креираат апликации кои можат да одговорат на корисници од различни држави и култури. Еден од клучните начини да се постигне тоа е преку интернационализација (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: Поставете и тествајте!

Го завршивме! Вашата Next.js апликација сега ќе се преведува автоматски кога ќе додадете било какви низи во Translate компонентата. Имајте на ум дека само средините со read/write дозволи на API клучот ќе можат да креираат нови низи за превод. Препорачуваме да имате затворена и безбедна staging средина каде што можете да ја тестирате вашата продукциска апликација со таков 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!