Den bedste løsning til internationalisering (i18n) i Next.js apps
Ønsker du at udvide din Next.js-applikation til nye markeder? TacoTranslate gør det utroligt nemt at lokalisere dit Next.js-projekt, så du kan nå ud til et globalt publikum uden besvær.
Hvorfor vælge TacoTranslate til Next.js?
- Sømløs integration: Specielt designet til Next.js-applikationer, TacoTranslate integreres ubesværet i din eksisterende arbejdsgang.
- Automatisk strengindsamling: Ikke mere manuelt at håndtere JSON-filer. TacoTranslate indsamler automatisk strenge fra din kodebase.
- AI-drevne oversættelser: Udnyt kraften i AI til at levere kontekstuelt præcise oversættelser, der passer til tonen i din applikation.
- Øjeblikkelig sprogsupport: Tilføj support for nye sprog med blot et klik, hvilket gør din applikation globalt tilgængelig.
Sådan fungerer det
Efterhånden som verden bliver mere globaliseret, bliver det stadigt 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 gør det muligt at tilpasse din applikation til forskellige sprog, valutaer og datoformater.
I denne tutorial vil vi undersøge, hvordan du tilføjer internationalisering til din React Next.js-applikation med server-side rendering. TL;DR: Se det komplette eksempel her.
Denne vejledning er til Next.js-applikationer, der bruger Pages Router.
Hvis du bruger App Router, se venligst 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. Dog vil vi i dette eksempel bruge TacoTranslate.
TacoTranslate oversætter automatisk dine strenge til ethvert sprog ved hjælp af avanceret AI og frigør dig fra det kedelige arbejde med håndtering af 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 tilknyttede API-nøgler. Opret en konto her. Det er gratis, og kræver ikke, at du tilføjer et kreditkort.
I TacoTranslate applikationens brugerflade opretter du et projekt og navigerer til fanen for API-nøgler. Opret én read
nøgle og én 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 flere miljøvariabler: TACOTRANSLATE_DEFAULT_LOCALE
og TACOTRANSLATE_ORIGIN
.
TACOTRANSLATE_DEFAULT_LOCALE
: Den 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. For eksempel, opret 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_DEFAULT_LOCALE ?? '',
});
module.exports = tacoTranslate;
Vi vil snart automatisk definere TACOTRANSLATE_API_KEY
.
At oprette klienten i en separat fil gør det nemmere at bruge den igen senere. Nu, ved at bruge en tilpasset /pages/_app.tsx
, tilføjer vi TacoTranslate
provideren.
import React from 'react';
import {type AppProps} from 'next/app';
import {type Origin, type Locale, type Localizations} from 'tacotranslate';
import TacoTranslate from 'tacotranslate/react';
import TacoTranslateHead from 'tacotranslate/next/head';
import tacoTranslate from '../tacotranslate-client';
type PageProperties = {
origin: Origin;
locale: Locale;
locales: Locale[];
localizations: Localizations;
};
export default function App({Component, pageProps}: AppProps<PageProperties>) {
const {origin, locale, locales, localizations} = pageProps;
return (
<TacoTranslate
client={tacoTranslate}
origin={origin}
locale={locale}
localizations={localizations}
>
<TacoTranslateHead rootUrl="https://your-website.com" locales={locales} />
<Component {...pageProps} />
</TacoTranslate>
);
}
Hvis du allerede har tilpassede pageProps
og _app.tsx
, bedes du udvide definitionen med egenskaberne og koden ovenfor.
Trin 4: Implementering af server side rendering
TacoTranslate tillader server-side rendering af dine oversættelser. Dette forbedrer brugeroplevelsen markant ved straks at vise oversat indhold i stedet for først at vise et kort øjeblik med uoversat indhold. Derudover kan vi undgå netværksanmodninger på klienten, fordi vi allerede har alle de oversættelser, vi har brug for.
Vi starter med at oprette eller ændre /next.config.js
.
const withTacoTranslate = require('tacotranslate/next/config').default;
const tacoTranslateClient = require('./tacotranslate-client');
module.exports = async () => {
const config = {};
return withTacoTranslate(config, {
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'),
});
};
Rediger isProduction
kontrollen, så den passer til din opsætning. Hvis true
, vil TacoTranslate vise den offentlige API-nøgle. Hvis vi er i et lokalt, test- eller staging-miljø (isProduction
is false
), vil vi bruge den hemmelige read/write
API-nøgle for at sikre, at nye strenge sendes til oversættelse.
Indtil nu har vi kun sat Next.js-applikationen op med en liste over understøttede sprog. Det næste, vi vil gøre, er at hente oversættelser til alle dine sider. Til det vil du bruge enten getTacoTranslateStaticProps
eller getTacoTranslateServerSideProps
baseret på dine krav.
Disse funktioner tager tre argumenter: Et Next.js Static Props Context objekt, konfiguration til TacoTranslate, og valgfrie Next.js egenskaber. Bemærk, at revalidate
på getTacoTranslateStaticProps
som standard er sat til 60, så dine oversættelser forbliver opdaterede.
For at bruge en af funktionerne på en side, lad os antage, at du har en sidefil som /pages/hello-world.tsx
.
import {Translate} from 'tacotranslate/react';
import getTacoTranslateStaticProps from 'tacotranslate/next/get-static-props';
import tacoTranslateClient from '../tacotranslate-client';
export async function getStaticProps(context) {
return getTacoTranslateStaticProps(context, {client: tacoTranslateClient});
}
export default function Page() {
return <Translate string="Hello, world!"/>;
}
Du bør nu kunne bruge Translate
komponenten til at oversætte strenge i alle dine React-komponenter.
import {Translate} from 'tacotranslate/react';
function Component() {
return <Translate string="Hello, world!"/>
}
Trin 5: Udrul og test!
Vi er færdige! Din Next.js-applikation vil nu blive oversat automatisk, når du tilføjer strings til en Translate
komponent. Bemærk, at kun miljøer med read/write
tilladelser på API-nøglen vil kunne oprette nye strings til oversættelse. Vi anbefaler at have et lukket og sikret staging-miljø, hvor du kan teste din produktionsapplikation med en sådan API-nøgle og tilføje nye strings, inden du går 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 strings.
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 App 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!