Kako implementirati internacionalizaciju u Next.js aplikaciji koja koristi App Router

Kako se svijet sve više globalizira, postaje sve važnije za web developere da izrađuju aplikacije koje mogu zadovoljiti korisnike iz različitih zemalja i kultura. Jedan od ključnih načina da se to postigne je kroz internacionalizaciju (i18n), koja vam omogućava da prilagodite svoju aplikaciju različitim jezicima, valutama i formatima datuma.

U ovom ćemo članku istražiti kako dodati internacionalizaciju u vašu React Next.js aplikaciju, uz server side rendering. TL;DR: Pogledajte puni primjer ovdje.

Ovaj vodič je namijenjen Next.js aplikacijama koje koriste App Router.
Ako koristite Pages Router, pogledajte ovaj vodič umjesto toga.

Korak 1: Instalirajte i18n biblioteku

Da bismo implementirali internacionalizaciju u vašoj Next.js aplikaciji, prvo ćemo odabrati i18n biblioteku. Postoji nekoliko popularnih biblioteka, uključujući next-intl. U ovom primjeru, međutim, koristit ćemo TacoTranslate.

TacoTranslate automatski prevodi vaše tekstove na bilo koji jezik koristeći najsuvremeniju umjetnu inteligenciju i oslobađa vas zamornog upravljanja JSON datotekama.

Instalirajmo ga koristeći npm u vašem terminalu:

npm install tacotranslate

Korak 2: Kreirajte besplatan TacoTranslate račun

Sad kad ste instalirali modul, vrijeme je da kreirate svoj TacoTranslate račun, projekt prijevoda i pripadajuće API ključeve. Registrirajte se ovdje. Besplatno je i ne zahtijeva unos kreditne kartice.

Unutar UI-ja TacoTranslate aplikacije, stvorite projekt i navigirajte do kartice za API ključeve. Kreirajte jedan read ključ i jedan read/write ključ. Spremit ćemo ih kao varijable okoliša. read ključ nazivamo public a read/write ključ nazivamo secret. Na primjer, možete ih dodati u .env datoteku u korijenu vašeg projekta.

TACOTRANSLATE_PUBLIC_API_KEY=123456
TACOTRANSLATE_SECRET_API_KEY=789010

Obavezno nikada ne otkrivajte tajni read/write API ključ u produkcijskim okruženjima na klijentskoj strani.

Također ćemo dodati još dvije varijable okoline: TACOTRANSLATE_DEFAULT_LOCALE i TACOTRANSLATE_ORIGIN.

• TACOTRANSLATE_DEFAULT_LOCALE: Zadani kod jezika koji se koristi kao rezervna opcija. U ovom primjeru postavit ćemo ga na en za engleski.
• TACOTRANSLATE_ORIGIN: „Mapa“ u kojoj će biti pohranjeni vaši stringovi, poput URL-a vaše web stranice. Više o originima pročitajte ovdje.

TACOTRANSLATE_DEFAULT_LOCALE=en
TACOTRANSLATE_ORIGIN=your-website-url.com

Korak 3: Postavljanje TacoTranslate

Za integraciju TacoTranslate s vašom aplikacijom, morat ćete stvoriti klijenta koristeći API ključeve iz ranijeg koraka. Na primjer, kreirajte datoteku pod nazivom /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;

Uskoro ćemo automatski definirati TACOTRANSLATE_API_KEY i TACOTRANSLATE_PROJECT_LOCALE.

Kreiranje klijenta u zasebnoj datoteci olakšava njegovo ponovno korištenje kasnije. getLocales je samo pomoćna funkcija s ugrađenim upravljanjem pogrešaka. Sada kreirajte datoteku nazvanu /app/[locale]/tacotranslate.tsx, gdje ćemo implementirati TacoTranslate provider.

'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>
	);
}

Obratite pažnju na 'use client'; što označava da je ovo klijentska komponenta.

Sada kada je context provider spreman, stvorite datoteku nazvanu /app/[locale]/layout.tsx, glavni layout u našoj aplikaciji. Obratite pažnju da ova putanja ima mapu koja koristi Dynamic Routes, gdje je [locale] dinamički parametar.

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>
	);
}

Prva stvar koju treba primijetiti ovdje je da koristimo naš Dynamic Route parametar [locale] za dohvaćanje prijevoda za taj jezik. Dodatno, generateStaticParams osigurava da su svi kodovi jezika koje ste aktivirali za svoj projekt unaprijed renderirani.

Sada, izgradimo našu prvu stranicu! Kreirajte datoteku nazvanu /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!" />
	);
}

Obratite pažnju na revalidate varijablu koja govori Next.js-u da ponovno izgradi stranicu nakon 60 sekundi i da vaše prijevode drži ažurnima.

Korak 4: Implementacija server side renderiranja

TacoTranslate podržava server side rendering. To znatno poboljšava korisničko iskustvo prikazivanjem prevedenog sadržaja odmah, umjesto prvog prikaza neprevedenog sadržaja. Osim toga, možemo preskočiti mrežne zahtjeve na klijentu, jer već imamo prijevode koje trebamo za stranicu koju korisnik gleda.

Za postavljanje renderiranja na strani poslužitelja, kreirajte ili izmijenite /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};
};

Izmijenite provjeru isProduction kako bi odgovarala vašim postavkama. Ako true, TacoTranslate će prikazati javni API ključ. Ako se nalazimo u lokalnom, testnom ili pripremnom okruženju (isProduction is false), upotrijebit ćemo tajni read/write API ključ da bismo bili sigurni da se novi nizovi šalju na prijevod.

Da bismo osigurali da usmjeravanje i preusmjeravanje rade kako se očekuje, morat ćemo stvoriti datoteku pod nazivom /middleware.ts. Korištenjem Middleware, možemo preusmjeriti korisnike na stranice prikazane na njihovom željenom jeziku.

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);
}

Obavezno postavite matcher u skladu s Next.js Middleware dokumentacijom.

Na klijentskoj strani možete promijeniti locale kolačić kako biste izmijenili preferirani jezik korisnika. Molimo pogledajte puni primjer koda za ideje kako to napraviti!

Korak 5: Objavi i testiraj!

Gotovi smo! Vaša React aplikacija sada će se automatski prevoditi kada dodate bilo koje nizove u Translate komponentu. Imajte na umu da samo okruženja s dopuštenjima read/write na API ključu moći će kreirati nove nizove za prijevod. Preporučujemo da imate zatvoreno i sigurno staging okruženje u kojem možete testirati svoju produkcijsku aplikaciju s takvim API ključem, dodajući nove nizove prije nego što krenete u produkciju. Time ćete spriječiti krađu vašeg tajnog API ključa i potencijalno pretrpavanje vašeg projekta prijevoda dodavanjem novih, nepovezanih nizova.

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!