Како да се имплементира интернационализација во 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

To integrate TacoTranslate with your application, you’ll need to create a client using the API keys from earlier. For example, create a file named /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 поддржува серверско рендерирање од страната на серверот. Ова значително ја подобрува корисничката искуство со тоа што веднаш прикажува преведена содржина, наместо прво кратко појавување на непреведена содржина. Дополнително, можеме да ги прескокнеме мрежните барања на клиентот, бидејќи веќе ги имаме преводите што ни се потребни за страницата што корисникот ја прегледува.

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

Обавезно погледнете го целосниот пример на нашиот GitHub профил. Тука, исто така, ќе најдете пример како да го направите тоа користејќи Pages Router!! Доколку наидете на било какви проблеми, слободно контактирајте нѐ, и ние со радост ќе ви помогнеме.

TacoTranslate ви овозможува автоматско локализирање на вашите React апликации брзо на и од кој било јазик. Започнете денес!