Korleis implementere internasjonalisering i ein Next.js-applikasjon som brukar App Router
Gjer React-applikasjonen din meir tilgjengeleg og nå nye marknader med internasjonalisering (i18n).
Etter kvart som verda blir meir globalisert, vert det stadig viktigare for webutviklarar å byggje applikasjonar som kan tilpassast brukarar frå ulike land og kulturar. Ein av dei viktigaste måtane å oppnå dette på er gjennom internasjonalisering (i18n), som gjer det mogleg å tilpasse applikasjonen til ulike språk, valutaer og datoformat.
I denne artikkelen skal vi sjå på korleis du kan legge til internasjonalisering i din React Next.js-applikasjon, med server side rendering. TL;DR: Sjå heile eksemplet her.
Denne guida er for Next.js-applikasjonar som brukar App Router.
Om du brukar Pages Router, sjå heller denne guida.
Steg 1: Installer eit i18n-bibliotek
For å implementere internasjonalisering i din Next.js-applikasjon, vil vi først velje eit i18n-bibliotek. Det finst fleire populære bibliotek, inkludert next-intl. I dette eksempelet vil vi likevel bruke TacoTranslate.
TacoTranslate omset automatisk strengane dine til eit kva som helst språk ved hjelp av avansert AI, og slepp deg frå den tidkrevjande handteringa av JSON-filer.
La oss installere det med npm i terminalen din:
npm install tacotranslate
Steg 2: Opprett ein gratis TacoTranslate-konto
No som du har installert modulen, er det på tide å opprette din TacoTranslate-konto, eit oversettingsprosjekt og tilhøyrande API-nøklar. Opprett ein konto her. Det er gratis, og du treng ikkje å legge inn eit kredittkort.
I TacoTranslate-applikasjonen, opprett eit prosjekt og naviger til API-nøkkel-fanen. Lag ein read
nøkkel og ein read/write
nøkkel. Vi vil lagre dei som miljøvariablar. read
nøkkelen kallar vi public
, og read/write
nøkkelen er secret
. Til dømes kan du legge dei til i ei .env
fil i roten av prosjektet ditt.
TACOTRANSLATE_PUBLIC_API_KEY=123456
TACOTRANSLATE_SECRET_API_KEY=789010
Ver sørg for å aldri lekke den sende/motta-API-nøkkelen read/write
til klient-side produksjonsmiljø.
Vi vil også legge til to miljøvariablar til: TACOTRANSLATE_DEFAULT_LOCALE
og TACOTRANSLATE_ORIGIN
.
TACOTRANSLATE_DEFAULT_LOCALE
: Standard fallback-lokalkoden. I dette dømet set vi han tilen
for engelsk.TACOTRANSLATE_ORIGIN
: «Mappa» der strengane dine blir lagra, til dømes URLen til nettsida di. Les meir om originar her.
TACOTRANSLATE_DEFAULT_LOCALE=en
TACOTRANSLATE_ORIGIN=your-website-url.com
Steg 3: Sette opp TacoTranslate
For å integrere TacoTranslate med applikasjonen din, må du lage ein klient ved å bruke API-nøklane frå tidlegare. Til dømes, lag ei fil kalla /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 automatisk definere TACOTRANSLATE_API_KEY
og TACOTRANSLATE_PROJECT_LOCALE
snart.
Å lage klienten i ei eiga fil gjer det enkelt å bruke den igjen seinare. getLocales
er berre ein hjelpefunksjon med innebygd feilhandsaming. No, lag ei fil kalla /app/[locale]/tacotranslate.tsx
, der vi skal 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>
);
}
Merk 'use client';
som indikerer at dette er ein klientkomponent.
Med kontekstleverandøren klar, lag ei fil med namnet /app/[locale]/layout.tsx
, hovudoppsettet i applikasjonen vår. Merk at denne stien har ei mappe som bruker Dynamic Routes, der [locale]
er den dynamiske parameteren.
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 å merke seg her er at vi bruker vår Dynamic Route
parameter [locale]
for å hente omsettingar for det språket. I tillegg sørgjer generateStaticParams
for at alle lokaliseringskodane du har aktivert for prosjektet ditt, blir forhåndsgjorde.
No skal vi lage vår første side! Opprett ei 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!" />
);
}
Merk revalidate
-variabelen som fortel Next.js å bygge sida på nytt etter 60 sekund, og halde omsetjingane dine oppdaterte.
Steg 4: Implementering av server-side rendering
TacoTranslate støttar server side rendering. Dette betydeleg forbetrar brukaropplevinga ved å vise omsette innhald med ein gong, i staden for først eit glimt av uomsett innhald. I tillegg kan vi hoppe over nettverksførespurnader på klienten, fordi vi alt har omsettingane vi treng for sida brukaren ser på.
For å sette opp server-side rendering, opprett eller endre /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};
};
Endre isProduction
-sjekken slik at den passar for oppsettet ditt. Hvis true
, vil TacoTranslate bruke den offentlege API-nøkkelen. Hvis vi er i eit lokalt, test- eller staging-miljø (isProduction
is false
), vil vi bruke den hemmelege read/write
API-nøkkelen for å sikre at nye strengjer blir sendt til omsetjing.
For å sikre at ruting og omdirigering fungerer som forventa, må vi lage ein fil som heiter /middleware.ts
. Ved bruk av Middleware, kan vi omdirigere brukarar til sider vist på språket dei føretrekk.
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);
}
Pass på å setje opp matcher
i samsvar med Next.js Middleware-dokumentasjonen.
På klienten kan du endre locale
informasjonskapselen for å bytte kva brukaren føretrekk som språk. Sjå det fullstendige eksempel-koden for idear om korleis du kan gjere dette!
Steg 5: Distribuer og test!
Vi er ferdige! React-applikasjonen din vil no bli automatisk omsett når du legg til tekststrenger i ein Translate
komponent. Merk at berre miljø med read/write
rettar på API-nøkkelen vil kunne opprette nye tekststrenger som skal omsetjast. Vi anbefaler å ha eit lukka og sikkert staging-miljø der du kan teste produksjonsapplikasjonen din med ein slik API-nøkkel, og leggje til nye tekststrenger før du går live. Dette vil hindre at nokon steler den hemmelege API-nøkkelen din, og potensielt bloatar omsetjingsprosjektet ditt ved å leggje til nye, ikkje-relaterte tekststrenger.
Hugs å sjå på det komplette dømet hos vår GitHub-profil. Der finn du òg eit døme på korleis du kan gjere dette med Pages Router! Om du støyt på problem, er det berre å ta kontakt, så hjelper vi deg gjerne.
TacoTranslate lar deg automatisk lokaliserer React-applikasjonane dine raskt til og frå alle språk. Kom i gang i dag!