Sådan implementeres internationalisering i en Next.js-applikation, der bruger App Router
Gør din React-applikation mere tilgængelig og nå nye markeder med internationalisering (i18n).
Efterhånden som verden bliver mere globaliseret, er det stadig vigtigere for webudviklere at bygge applikationer, der kan imødekomme brugere fra forskellige lande og kulturer. En af de vigtigste måder at opnå dette på er gennem internationalisering (i18n), som giver dig mulighed for at tilpasse din applikation til forskellige sprog, valutaer og datoformater.
I denne artikel vil vi udforske, hvordan du tilføjer internationalisering til din React Next.js-applikation med server-side rendering. TL;DR: Se det fulde eksempel her.
Denne vejledning er til Next.js-applikationer, der bruger App Router.
Hvis du bruger Pages Router, se denne vejledning i stedet.
Trin 1: Installer et i18n-bibliotek
For at implementere internationalisering i din Next.js-applikation, vælger vi først et i18n-bibliotek. Der findes flere populære biblioteker, herunder next-intl. I dette eksempel vil vi dog bruge TacoTranslate.
TacoTranslate oversætter automatisk dine strenge til ethvert sprog ved hjælp af avanceret AI, og befrier dig fra det tidskrævende arbejde med at administrere JSON-filer.
Lad os installere det med npm i din terminal:
npm install tacotranslate
Trin 2: Opret en gratis TacoTranslate-konto
Nu hvor du har installeret modulet, er det tid til at oprette din TacoTranslate-konto, et oversættelsesprojekt og tilhørende API-nøgler. Opret en konto her. Det er gratis, og kræver ikke, at du tilføjer et kreditkort.
Inden for TacoTranslate applikationens brugerflade skal du oprette et projekt og navigere til fanen for API-nøgler. Opret en read
nøgle og en read/write
nøgle. Vi gemmer dem som miljøvariabler. read
nøglen kalder vi public
, og read/write
nøglen er secret
. For eksempel kan du tilføje dem til en .env
fil i roden af dit projekt.
TACOTRANSLATE_PUBLIC_API_KEY=123456
TACOTRANSLATE_SECRET_API_KEY=789010
Sørg for aldrig at lække den hemmelige read/write
API-nøgle til klient-side produktionsmiljøer.
Vi vil også tilføje to yderligere miljøvariabler: TACOTRANSLATE_DEFAULT_LOCALE
og TACOTRANSLATE_ORIGIN
.
TACOTRANSLATE_DEFAULT_LOCALE
: Standard fallback lokalekode. I dette eksempel sætter vi den tilen
for engelsk.TACOTRANSLATE_ORIGIN
: Den "mappe", hvor dine strenge vil blive gemt, såsom URL'en til dit websted. Læs mere om origins her.
TACOTRANSLATE_DEFAULT_LOCALE=en
TACOTRANSLATE_ORIGIN=your-website-url.com
Trin 3: Opsætning af TacoTranslate
For at integrere TacoTranslate med din applikation, skal du oprette en klient ved hjælp af API-nøglerne fra tidligere. Opret for eksempel en fil med navnet /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 vil snart automatisk definere TACOTRANSLATE_API_KEY
og TACOTRANSLATE_PROJECT_LOCALE
.
At oprette klienten i en separat fil gør det nemt at bruge igen senere. getLocales
er blot en hjælpefunktion med indbygget fejlhåndtering. Opret nu en fil med navnet /app/[locale]/tacotranslate.tsx
, hvor vi vil implementere 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>
);
}
Bemærk 'use client';
som angiver, at dette er en klientkomponent.
Med context-provideren nu klar, opret en fil med navnet /app/[locale]/layout.tsx
, rodlayouten i vores applikation. Bemærk, at denne sti har en mappe, som bruger Dynamic Routes, hvor [locale]
er den dynamiske parameter.
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ørste, man skal bemærke her, er, at vi bruger vores Dynamic Route
parameter [locale]
til at hente oversættelser for det pågældende sprog. Derudover sikrer generateStaticParams
, at alle sprogkoder, du har aktiveret for dit projekt, bliver præ-renderet.
Nu skal vi bygge vores første side! Opret en fil ved navn /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!" />
);
}
Bemærk revalidate
variablen, der fortæller Next.js at genopbygge siden efter 60 sekunder og holde dine oversættelser opdaterede.
Trin 4: Implementering af server side rendering
TacoTranslate understøtter server side rendering. Dette forbedrer brugeroplevelsen markant ved at vise oversat indhold med det samme, i stedet for først at vise en kortvarig flash af uoversat indhold. Derudover kan vi springe netværksanmodninger over på klienten, fordi vi allerede har de oversættelser, vi behøver til den side, brugeren ser på.
For at sætte server-side rendering op, opret eller ændr /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};
};
Tilpas isProduction
checket til din opsætning. Hvis true
, vil TacoTranslate vise den offentlige API-nøgle. Hvis vi befinder os i et lokalt, test- eller staging-miljø (isProduction
is false
), bruger vi den hemmelige read/write
API-nøgle for at sikre, at nye strenge bliver sendt til oversættelse.
For at sikre, at routing og omdirigering fungerer som forventet, skal vi oprette en fil med navnet /middleware.ts
. Ved hjælp af Middleware kan vi omdirigere brugere til sider, der vises på deres foretrukne sprog.
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);
}
Sørg for at opsætte matcher
i overensstemmelse med Next.js Middleware-dokumentationen.
På klienten kan du ændre locale
cookien for at ændre, hvad brugerens foretrukne sprog er. Se venligst det komplette eksempelkode for idéer til, hvordan du gør dette!
Trin 5: Udrul og test!
Vi er færdige! Din React-applikation vil nu automatisk blive oversat, når du tilføjer nogen strenge til en Translate
komponent. Bemærk, at kun miljøer med read/write
tilladelser på API-nøglen vil kunne oprette nye strenge til oversættelse. Vi anbefaler at have et lukket og sikret stagingmiljø, hvor du kan teste din produktionsapplikation med en sådan API-nøgle, og tilføje nye strenge inden go-live. Dette vil forhindre, at nogen stjæler din hemmelige API-nøgle, og potentielt oppuster dit oversættelsesprojekt ved at tilføje nye, irrelevante strenge.
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!