Hur man implementerar internationalisering i en Next.js-applikation som använder App Router
Gör din React-applikation mer tillgänglig och nå nya marknader med internationalisering (i18n).
I takt med att världen blir mer globaliserad blir det allt viktigare för webbutvecklare att skapa 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 låter dig anpassa din applikation till olika språk, valutor och datumformat.
I den här artikeln kommer vi att utforska hur man 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 istället denna guide.
Steg 1: Installera ett i18n-bibliotek
För att implementera internationalisering 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 frigör dig från den tråkiga hanteringen av JSON-filer.
Låt oss installera det med 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 UI, skapa ett projekt och navigera till fliken för API-nycklar. Skapa en read
nyckel och en read/write
nyckel. Vi sparar dem som miljövariabler. read
nyckeln kallar vi 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 klient-sides produktionsmiljöer.
Vi kommer också att lägga till två miljövariabler till: TACOTRANSLATE_DEFAULT_LOCALE
och TACOTRANSLATE_ORIGIN
.
TACOTRANSLATE_DEFAULT_LOCALE
: Standardspråkkoden som används som reserv. I detta exempel sätter vi den tillen
för engelska.TACOTRANSLATE_ORIGIN
: Den ”mapp” där dina strängar kommer att lagras, till exempel din webbplats URL. Läs mer om origins här.
TACOTRANSLATE_DEFAULT_LOCALE=en
TACOTRANSLATE_ORIGIN=your-website-url.com
Steg 3: Konfigurera TacoTranslate
För att integrera TacoTranslate med din applikation behöver du skapa en klient med hjälp av API-nycklarna från tidigare. Skapa till exempel en fil med namnet /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 snart automatiskt att definiera TACOTRANSLATE_API_KEY
och TACOTRANSLATE_PROJECT_LOCALE
.
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 kommer att implementera 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 kontextprovidern nu redo, 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 ser generateStaticParams
till att alla språkkoder du har aktiverat för ditt projekt förtillverkas.
Nu ska vi bygga 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 revalidate
variabeln 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å klientsidan eftersom vi redan har de översättningar vi behöver för sidan som användaren tittar på.
För att ställa in server-side 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
kontroller för att passa din konfiguration. Om true
kommer TacoTranslate att använda den publika API-nyckeln. Om vi befinner oss i en lokal, test- eller staging-miljö (isProduction
is false
) kommer vi att använda den hemliga read/write
API-nyckeln för att säkerställa att nya strängar skickas för översättning.
För att säkerställa att routing och omdirigering fungerar som förväntat behöver vi skapa en fil med namnet /middleware.ts
. Med hjälp av 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 konfigurera matcher
i enlighet med Next.js Middleware-dokumentation.
På klienten kan du ändra locale
cookien för att byta användarens föredragna språk. Vänligen 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 automatiskt att översättas när du lägger till 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äker 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 din översättningsprojekt med nya, orelaterade strängar.
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!