Korleis implementere internasjonalisering i ein Next.js-applikasjon som bruker App Router
Gjer React-applikasjonen din meir tilgjengeleg og nå nye marknader med internasjonalisering (i18n).
Etter kvart som verda vert meir globalisert, vert det stadig viktigare for nettutviklarar å 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 datformat.
I denne artikkelen skal vi utforske korleis du legg til internasjonalisering i din React Next.js-applikasjon, med server-side rendering. TL;DR: Sjå det komplette eksempelet her.
Denne guida er for Next.js-applikasjonar som brukar App Router.
Om du brukar Pages Router, sjå denne guida i staden.
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 skal vi likevel bruke TacoTranslate.
TacoTranslate omset automatisk tekstane dine til alle språk ved hjelp av banebrytande AI, og frigjer deg frå det tidkrevjande arbeidet med å handtere JSON-filar.
La oss installere det med npm i terminalen din:
npm install tacotranslate
Steg 2: Opprett ein gratis TacoTranslate-konto
No når du har installert modulen, er det på tide å opprette din TacoTranslate-konto, eit omsetjingsprosjekt, og tilhøyrande API-nøklar. Opprett ein konto her. Det er gratis, og treng ikkje at du legg til eit kredittkort.
Innenfor brukargrensesnittet til TacoTranslate-appen, lag eit prosjekt, og naviger til fana for API-nøklar. Lag ein read
nøkkel, og ein read/write
nøkkel. Vi vil lagre dei som miljøvariablar. read
nøkkelen er det vi kallar public
, og read/write
nøkkelen er secret
. Til dømes kan du legge dei til i ein fil .env
i roten av prosjektet ditt.
TACOTRANSLATE_PUBLIC_API_KEY=123456
TACOTRANSLATE_SECRET_API_KEY=789010
Pass alltid på å aldri lekke den hemmelige read/write
API-nøkkelen til produksjonsmiljø på klientsiden.
Vi vil også legge til to fleire miljøvariablar: TACOTRANSLATE_DEFAULT_LOCALE
og TACOTRANSLATE_ORIGIN
.
TACOTRANSLATE_DEFAULT_LOCALE
: Standard språkkode som blir brukt som fallback. I dette dømet set vi han tilen
for engelsk.TACOTRANSLATE_ORIGIN
: «Mappa» der strenga dine blir lagra, som for eksempel URL-en til nettsida di. Les meir om origins her.
TACOTRANSLATE_DEFAULT_LOCALE=en
TACOTRANSLATE_ORIGIN=your-website-url.com
Steg 3: Setje opp TacoTranslate
For å integrere TacoTranslate med applikasjonen din, må du opprette ein klient ved å bruke API-nøklane frå tidlegare. Til dømes, opprett 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.
Å opprette klienten i ei eiga fil gjer det enkelt å bruke den igjen seinare. getLocales
er berre ein hjelpefunksjon med innebygd feilhåndtering. No, opprett ei fil med namn /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 no klar til bruk, opprett ein fil med namnet /app/[locale]/layout.tsx
, rotoppsettet i applikasjonen vår. Merk at denne banen har ein mappe som nyttar 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 oversettingar for det språket. I tillegg sørgjer generateStaticParams
for at alle lokalekodane du har aktivert for prosjektet ditt blir pre-rendra.
No kan vi byggje vår første side! Lag 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 å byggje 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 forbetrar brukaropplevinga mykje ved å vise omsette innhald med ein gong, i staden for først å vise ein kort flash av uomsett innhald. I tillegg kan vi hoppe over nettverksforespurnader på klienten, fordi vi allereie har omsetjingane 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 passer til oppsettet ditt. Hvis true
, vil TacoTranslate vise den offentlege API-nøkkelen. Hvis vi er i eit lokalt, test- eller staging-miljø (isProduction
is false
), vil vi bruke den hemmelige read/write
API-nøkkelen for å sikre at nye strenger blir sendt for omsetjing.
For å sikre at routing og omdirigering fungerer som forventa, må vi lage ein fil kalla /middleware.ts
. Ved å bruke Middleware, kan vi omdirigere brukarar til sider vist på deira føretrekte 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);
}
Sørg for å setje opp matcher
i samsvar med Next.js Middleware-dokumentasjon.
På klienten kan du endre locale
cookien for å endre kva brukarens føretrekte språk er. Sjå det fullstendige eksempel-kodane for idéar om korleis du kan gjere dette!
Steg 5: Distribuer og test!
Vi er ferdige! React-applikasjonen din vil no bli omsett automatisk når du legg til nokre tekststrengar i ein Translate
komponent. Merk at berre miljø med read/write
rettar på API-nøkkelen vil kunne opprette nye tekststrengar som skal omsetjast. Vi anbefaler å ha eit lukka og sikkert staging-miljø der du kan teste produksjonsapplikasjonen din med ei slik API-nøkkel, og leggje til nye tekststrangar før du går live. Dette vil forhindre at nokon stjeler den hemmelige API-nøkkelen din, og potensielt gjere omsetjingsprosjektet ditt større ved å legge til nye, urelaterte tekststrangar.
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!