Како да се имплементира интернационализација во Next.js апликација што користи App Router

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

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

Овој водич е за Next.js апликации кои користат App Router.
Ако користите Pages 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_IS_PRODUCTION === 'true'
			? process.env.TACOTRANSLATE_PROJECT_LOCALE
			: undefined,
});

module.exports = tacoTranslate;

Автоматски ќе ги дефинираме TACOTRANSLATE_API_KEY и TACOTRANSLATE_PROJECT_LOCALE наскоро.

Создавањето на клиентот во посебна датотека ја прави неговата повторна употреба полесна подоцна. getLocales е само помошна функција со вградено ракување со грешки. Сега создадете датотека со име /app/[locale]/tacotranslate.tsx, каде што ќе го имплементираме TacoTranslate провајдерот.

'use client';

import React, {type ReactNode} from 'react';
import {
	type TranslationContextProperties,
	TacoTranslate as ImportedTacoTranslate,
} from 'tacotranslate/react';
import tacoTranslateClient from '@/tacotranslate-client';

export default function TacoTranslate({
	locale,
	origin,
	localizations,
	children,
}: TranslationContextProperties & {
	readonly children: ReactNode;
}) {
	return (
		<ImportedTacoTranslate
			client={tacoTranslateClient}
			locale={locale}
			origin={origin}
			localizations={localizations}
		>
			{children}
		</ImportedTacoTranslate>
	);
}

Забележете го 'use client'; што укажува дека ова е клиент компонента.

Со подготвениот context provider, создадете датотека со име /app/[locale]/layout.tsx, главен layout во нашата апликација. Имајте на ум дека овој пат има фолдер кој користи Dynamic Routes, каде што [locale] е динамичкиот параметар.

import React, {type ReactNode} from 'react';
import {type Locale, isRightToLeftLocaleCode} from 'tacotranslate';
import './global.css';
import tacoTranslateClient from '@/tacotranslate-client';
import TacoTranslate from './tacotranslate';

export async function generateStaticParams() {
	const locales = await tacoTranslateClient.getLocales();
	return locales.map((locale) => ({locale}));
}

type RootLayoutParameters = {
	readonly params: Promise<{locale: Locale}>;
	readonly children: ReactNode;
};

export default async function RootLayout({params, children}: RootLayoutParameters) {
	const {locale} = await params;
	const origin = process.env.TACOTRANSLATE_ORIGIN;
	const localizations = await tacoTranslateClient.getLocalizations({
		locale,
		origins: [origin /* , other origins to fetch */],
	});

	return (
		<html lang={locale} dir={isRightToLeftLocaleCode(locale) ? 'rtl' : 'ltr'}>
			<body>
				<TacoTranslate
					locale={locale}
					origin={origin}
					localizations={localizations}
				>
					{children}
				</TacoTranslate>
			</body>
		</html>
	);
}

Првата работа што треба да се забележи тука е дека користиме нашиот параметар Dynamic Route [locale] за повлекување преводи за тој јазик. Покрај тоа, generateStaticParams се осигурува дека сите кодови на јазици што ги имате активирано за вашиот проект се пререндени.

Сега, ајде да ја изградиме нашата прва страница! Креирајте датотека наречена /app/[locale]/page.tsx.

import React from 'react';
import {Translate} from 'tacotranslate/react';

export const revalidate = 60;
export default async function Page() {
	return (
		<Translate string="Hello, world!" />
	);
}

Внимавајте на променливата revalidate која им кажува на Next.js да ја преизгради страницата по 60 секунди и да ги одржува вашите преводи ажурирани.

Чекор 4: Имплементација на серверско пребарување

TacoTranslate го поддржува извршувањето на серверската страна. Ова значително го подобрува корисничкото искуство со прикажување преведен содржина веднаш, наместо прво кратко прикажување на непреведена содржина. Дополнително, можеме да прескокнеме мрежни барања на клиентот, бидејќи веќе ги имаме преводите што ни се потребни за страницата што ја прегледува корисникот.

За да поставите серверска страна за рендерирање, креирајте или изменете /next.config.js :

const withTacoTranslate = require('tacotranslate/next/config').default;
const tacoTranslateClient = require('./tacotranslate-client');

module.exports = async () => {
	const config = await withTacoTranslate(
		{},
		{
			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'),
		}
	);

	// NOTE: Remove i18n from config when using the app router
	return {...config, i18n: undefined};
};

Изменете го проверувањето на isProduction за да одговара на вашата поставка. Ако е true, TacoTranslate ќе го прикаже јавниот API клуч. Ако сме во локална, тест или стадиум средина (isProduction is false), ќе го користиме тајниот API клуч read/write за да се осигураме дека новите низи се пратени за превод.

За да осигуриме дека рутирањето и пренасочувањата функционираат според очекувањата, ќе треба да создадеме датотека наречена /middleware.ts. Со користење на Middleware, можеме да ги пренасочуваме корисниците на страници прикажани на нивниот префериран јазик.

import {type NextRequest} from 'next/server';
import {middleware as tacoTranslateMiddleware} from 'tacotranslate/next';
import tacoTranslate from '@/tacotranslate-client';

export const config = {
	matcher: ['/((?!api|_next|favicon.ico).*)'],
};

export async function middleware(request: NextRequest) {
	return tacoTranslateMiddleware(tacoTranslate, request);
}

Осигурајте се да го поставите matcher согласно со документацијата за Next.js Middleware.

На клиентот, можете да го промените locale колачињето за да ја смените преферираната јазична поставка на корисникот. Ве молиме погледнете го целосниот примерок на кодот за идеи како да го направите тоа!

Чекор 5: Деплојирајте и тествајте!

Готови сме! Вашата React апликација сега ќе се преведува автоматски кога ќе додадете било кои низи во 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 Pages 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!