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

Со контекст провајдерот сега подготвен, креирајте датотека со име /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 поддржува server side rendering. Ова значително ја подобрува корисничката искуство со прикажување на преведената содржина веднаш, наместо прво да се појави кратко непреведена содржина. Дополнително, можеме да ги прескокнеме мрежните барања на клиентот, бидејќи веќе ги имаме потребните преводи за страницата што корисникот ја гледа.

За да го поставите серверското рендерирање, креирајте или изменете /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), ќе го користиме тајниот read/write API клуч за да осигуриме новите низи да бидат испратени за превод.

За да се осигура дека рутирањето и пренасочувањето функционираат како што се очекува, ќе треба да креираме датотека наречена /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!