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

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