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

Kako svijet postaje sve globalizovaniji, sve je važnije za web programere da kreiraju 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 članku ćemo istražiti kako dodati internacionalizaciju vašoj React Next.js aplikaciji, sa server-side renderovanjem. TL;DR: Pogledajte puni primjer ovdje.

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

Korak 1: Instalirajte i18n biblioteku

Da biste 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, koristićemo TacoTranslate.

TacoTranslate automatski prevodi vaše stringove na bilo koji jezik koristeći najsavremeniju AI tehnologiju, i oslobađa vas od zamornog upravljanja JSON datotekama.

Hajde da ga instaliramo koristeći npm u vašem terminalu:

npm install tacotranslate

Korak 2: Kreirajte besplatan TacoTranslate nalog

Sada kada ste instalirali modul, vrijeme je da kreirate svoj TacoTranslate nalog, projekat za prevođenje i povezane API ključeve. Kreirajte nalog ovdje. Besplatno je, i ne zahtijeva dodavanje kreditne kartice.

Unutar korisničkog sučelja TacoTranslate aplikacije, kreirajte projekat i navigirajte do taba sa API ključevima. Kreirajte jedan read ključ i jedan read/write ključ. Sačuvat ćemo ih kao varijable okruženja. read ključ nazivamo public, a read/write ključ je 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 strani klijenta.

Također ćemo dodati još dvije varijable okruženja: TACOTRANSLATE_DEFAULT_LOCALE i TACOTRANSLATE_ORIGIN.

• TACOTRANSLATE_DEFAULT_LOCALE: Zadani kod jezika za rezervu. U ovom primjeru, postavićemo ga na en za engleski.
• TACOTRANSLATE_ORIGIN: „Folder“ u kojem će vaši stringovi biti pohranjeni, kao što je URL vaše web stranice. Pročitajte više o originima ovdje.

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

Korak 3: Podešavanje TacoTranslate

Da biste integrisali TacoTranslate sa svojom aplikacijom, potrebno je da kreirate klijenta koristeći API ključeve iz ranije faze. Na primjer, kreirajte fajl 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 posebnoj datoteci olakšava njegovo ponovno korištenje kasnije. getLocales je samo pomoćna funkcija sa ugrađenim rukovanjem grešaka. Sada, kreirajte datoteku pod nazivom /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>
	);
}

Primijetite 'use client'; što označava da je ovo klijentska komponenta.

S obzirom da je kontekst provajder sada spreman za rad, kreirajte datoteku pod nazivom /app/[locale]/layout.tsx, korijenski raspored u našoj aplikaciji. Imajte na umu da ova putanja ima mapu koja koristi Dynamic Routes, gdje [locale] predstavlja 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 dohvat prijevoda za taj jezik. Dodatno, generateStaticParams osigurava da su svi kodovi lokaliteta koje ste aktivirali za svoj projekat unaprijed prikazani.

Sada, hajde da napravimo našu prvu stranicu! Kreirajte fajl pod nazivom /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!" />
	);
}

Primijetite revalidate varijablu koja govori Next.js da ponovo izgradi stranicu nakon 60 sekundi i da vaše prevode drži ažurnim.

Korak 4: Implementacija renderovanja na strani servera

TacoTranslate podržava server side rendering. Ovo značajno poboljšava korisničko iskustvo prikazivanjem prevedenog sadržaja odmah, umjesto što prvo pokaže treptaj neprevedenog sadržaja. Dodatno, možemo preskočiti mrežne zahtjeve na klijentskoj strani, jer već imamo prijevode koji su nam potrebni za stranicu koju korisnik gleda.

Za postavljanje server side renderinga, 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 smo u lokalnom, testnom ili staging okruženju (isProduction is false), koristit ćemo tajni read/write API ključ kako bismo bili sigurni da su novi nizovi poslani na prijevod.

Da bismo osigurali da rutiranje i preusmjeravanje rade kako se očekuje, trebamo kreirati fajl pod nazivom /middleware.ts. Koristeći 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 podesite matcher u skladu sa Next.js dokumentacijom za Middleware.

Na klijentskoj strani, možete izmijeniti locale kolačić kako biste promijenili preferirani jezik korisnika. Molimo pogledajte cjelokupan primjer koda za ideje o tome kako to učiniti!

Korak 5: Deployajte i testirajte!

Gotovi smo! Vaša React aplikacija će sada biti automatski prevedena kada dodate bilo koji tekst u Translate komponentu. Imajte na umu da će samo okruženja sa read/write dozvolama na API ključu moći kreirati nove tekstove za prevođenje. Preporučujemo da imate zatvoreno i sigurno staging okruženje gdje možete testirati vašu produkcijsku aplikaciju sa takvim API ključem, dodajući nove tekstove prije puštanja u javnost. Ovo će spriječiti bilo koga da ukrade vaš tajni API ključ i potencijalno napuši vaš projekat prevoda dodavanjem novih, nepovezanih tekstova.

Obavezno pogledajte kompletan primjer na našem GitHub profilu. Tamo ćete također pronaći primjer kako to uraditi koristeći Pages Router! Ako naiđete na bilo kakve probleme, slobodno nam pišite, i biće nam zadovoljstvo da pomognemo.

TacoTranslate vam omogućava da automatski lokalizujete vaše React aplikacije brzo u bilo koji jezik i iz bilo kojeg jezika. Započnite već danas!