Hur man implementerar internationalisering i en Next.js-applikation som använder App Router

I takt med att världen blir mer globaliserad blir det allt viktigare för webbprogrammerare att bygga applikationer som kan tillgodose användare från olika länder och kulturer. Ett av de viktigaste sätten att uppnå detta är genom internationalisering (i18n), vilket gör att du kan anpassa din applikation till olika språk, valutor och datumformat.

I den här artikeln kommer vi att utforska hur du lägger till internationalisering i din React Next.js-applikation, med server side rendering. TL;DR: Se det fullständiga exemplet här.

Denna guide är för Next.js-applikationer som använder App Router.
Om du använder Pages Router, se denna guide istället.

Steg 1: Installera ett i18n-bibliotek

För att implementera internationell anpassning i din Next.js-applikation kommer vi först att välja ett i18n-bibliotek. Det finns flera populära bibliotek, inklusive next-intl. I detta exempel kommer vi dock att använda TacoTranslate.

TacoTranslate översätter automatiskt dina strängar till vilket språk som helst med hjälp av avancerad AI och befriar dig från det tråkiga arbetet med att hantera JSON-filer.

Låt oss installera det med hjälp av npm i din terminal:

npm install tacotranslate

Steg 2: Skapa ett gratis TacoTranslate-konto

Nu när du har installerat modulen är det dags att skapa ditt TacoTranslate-konto, ett översättningsprojekt och tillhörande API-nycklar. Skapa ett konto här. Det är gratis och kräver inte att du lägger till ett kreditkort.

Inom TacoTranslate-applikationens användargränssnitt, skapa ett projekt och navigera till dess flik för API-nycklar. Skapa en read nyckel och en read/write nyckel. Vi kommer att spara dem som miljövariabler. read nyckeln är vad vi kallar public och read/write nyckeln är secret. Till exempel kan du lägga till dem i en .env fil i roten av ditt projekt.

TACOTRANSLATE_PUBLIC_API_KEY=123456
TACOTRANSLATE_SECRET_API_KEY=789010

Se till att aldrig läcka den hemliga read/write API-nyckeln till produktionsmiljöer på klientsidan.

Vi kommer också att lägga till två miljövariabler till: TACOTRANSLATE_DEFAULT_LOCALE och TACOTRANSLATE_ORIGIN.

• TACOTRANSLATE_DEFAULT_LOCALE: Den förvalda reservspråkkoden. I detta exempel sätter vi den till en för engelska.
• TACOTRANSLATE_ORIGIN: ”Mappen” där dina strängar kommer att lagras, till exempel URL:en till din webbplats. Läs mer om origins här.

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

Steg 3: Konfigurera 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;

Vi kommer att automatiskt definiera TACOTRANSLATE_API_KEY och TACOTRANSLATE_PROJECT_LOCALE inom kort.

Att skapa klienten i en separat fil gör det enkelt att använda den igen senare. getLocales är bara en hjälpfunktion med inbyggd felhantering. Skapa nu en fil med namnet /app/[locale]/tacotranslate.tsx, där vi implementerar TacoTranslate providern.

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

Observera 'use client'; som indikerar att detta är en klientkomponent.

Med context providern nu redo att användas, skapa en fil med namnet /app/[locale]/layout.tsx, rotlayouten i vår applikation. Observera att denna sökväg har en mapp som använder Dynamic Routes, där [locale] är den dynamiska parametern.

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

Det första att notera här är att vi använder vår Dynamic Route parameter [locale] för att hämta översättningar för det språket. Dessutom säkerställer generateStaticParams att alla lokalkoder som du har aktiverat för ditt projekt för-renderas.

Nu bygger vi vår första sida! Skapa en fil med namnet /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!" />
	);
}

Observera variabeln revalidate som talar om för Next.js att bygga om sidan efter 60 sekunder och hålla dina översättningar uppdaterade.

Steg 4: Implementera server-side rendering

TacoTranslate stödjer server-side rendering. Detta förbättrar användarupplevelsen avsevärt genom att visa översatt innehåll omedelbart, istället för att först visa ett ögonblick av oöversatt innehåll. Dessutom kan vi hoppa över nätverksförfrågningar på klienten, eftersom vi redan har de översättningar vi behöver för sidan användaren tittar på.

För att ställa in server-sidig rendering, skapa eller ändra /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};
};

Ändra isProduction kontrollen så att den passar din inställning. Om truekommer TacoTranslate att visa den offentliga API-nyckeln. Om vi befinner oss i en lokal, test- eller mellanlagringsmiljö (isProduction is false) använder vi den hemliga API-nyckeln för read/write för att se till att nya strängar skickas för översättning.

För att säkerställa att routning och omdirigering fungerar som förväntat behöver vi skapa en fil med namnet /middleware.ts. Genom att använda Middleware kan vi omdirigera användare till sidor som visas på deras föredragna språk.

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

Se till att ställa in matcher i enlighet med Next.js Middleware-dokumentationen.

På klienten kan du ändra locale cookien för att ändra användarens föredragna språk. Se det kompletta exempel-koden för idéer om hur du gör detta!

Steg 5: Distribuera och testa!

Vi är klara! Din React-applikation kommer nu att översättas automatiskt när du lägger till nya strängar i en Translate komponent. Observera att endast miljöer med read/write behörigheter på API-nyckeln kommer att kunna skapa nya strängar för översättning. Vi rekommenderar att ha en stängd och säkrad staging-miljö där du kan testa din produktionsapplikation med en sådan API-nyckel, och lägga till nya strängar innan du går live. Detta förhindrar att någon stjäl din hemliga API-nyckel och potentiellt fyller på ditt översättningsprojekt med nya, orelaterade strängar.

Se till att kolla in det kompletta exemplet på vår GitHub-profil. Där hittar du också ett exempel på hur du gör detta med Pages Router ! Om du stöter på några problem, tveka inte att höra av dig, så hjälper vi dig mer än gärna.

TacoTranslate låter dig automatiskt lokalisera dina React-applikationer snabbt till och från vilket språk som helst. Kom igång idag!