TacoTranslate
/
DokumentasjonPriser
 
Opplæring
04. mai

Hvordan implementere internasjonalisering i en Next.js-applikasjon som bruker Pages Router

Gjør React-applikasjonen din mer tilgjengelig og nå nye markeder med internasjonalisering (i18n).

Etter hvert som verden blir mer globalisert, blir det stadig viktigere for webutviklere å bygge applikasjoner som kan imøtekomme brukere fra forskjellige land og kulturer. En av de viktigste måtene å oppnå dette på er gjennom internasjonalisering (i18n), som gjør det mulig å tilpasse applikasjonen din til ulike språk, valutaer og datoformater.

I denne veiledningen skal vi utforske hvordan du legger til internasjonalisering i din React Next.js-applikasjon, med server-side rendering. TL;DR: Se hele eksemplet her.

Denne veiledningen er for Next.js-applikasjoner som bruker Pages Router.
Hvis du bruker App Router, vennligst se denne veiledningen i stedet.

Trinn 1: Installer et i18n-bibliotek

For å implementere internasjonalisering i din Next.js-applikasjon, vil vi først velge et i18n-bibliotek. Det finnes flere populære biblioteker, inkludert next-intl. I dette eksemplet vil vi imidlertid bruke TacoTranslate.

TacoTranslate oversetter automatisk strengene dine til hvilket som helst språk ved hjelp av banebrytende AI, og frigjør deg fra det kjedelige arbeidet med å administrere JSON-filer.

La oss installere det ved å bruke npm i terminalen din:

npm install tacotranslate

Steg 2: Opprett en gratis TacoTranslate-konto

Nå som du har installert modulen, er det på tide å opprette din TacoTranslate-konto, et oversettelsesprosjekt, og tilhørende API-nøkler. Opprett en konto her. Det er gratis, og krever ikke at du legger til et kredittkort.

I TacoTranslate-applikasjonens brukergrensesnitt, opprett et prosjekt, og gå til fanen for API-nøkler. Opprett én read nøkkel, og én read/write nøkkel. Vi vil lagre dem som miljøvariabler. read nøkkelen er det vi kaller public og read/write nøkkelen er secret. For eksempel kan du legge dem til i en .env fil i roten av prosjektet ditt.

.env
TACOTRANSLATE_PUBLIC_API_KEY=123456
TACOTRANSLATE_SECRET_API_KEY=789010

Pass på å aldri lekke den hemmelige read/write API-nøkkelen til klient-side produksjonsmiljøer.

Vi legger også til to miljøvariabler til: TACOTRANSLATE_DEFAULT_LOCALE og TACOTRANSLATE_ORIGIN.

  • TACOTRANSLATE_DEFAULT_LOCALE: Standard fallback-lokalkode. I dette eksempelet setter vi den til en for engelsk.
  • TACOTRANSLATE_ORIGIN: “mappen” hvor strengene dine lagres, for eksempel URL-en til nettstedet ditt. Les mer om origin her.
.env
TACOTRANSLATE_DEFAULT_LOCALE=en
TACOTRANSLATE_ORIGIN=your-website-url.com

Trinn 3: Sette opp TacoTranslate

For å integrere TacoTranslate med applikasjonen din, må du opprette en klient ved å bruke API-nøklene fra tidligere. For eksempel, opprett en fil med navnet /tacotranslate-client.js.

/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 automatisk definere TACOTRANSLATE_API_KEY snart.

Å lage klienten i en egen fil gjør det enklere å bruke den igjen senere. Nå, ved å bruke en tilpasset /pages/_app.tsx, vil vi legge til TacoTranslate provider.

/pages/_app.tsx
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, vennligst utvid definisjonen med egenskapene og koden fra ovenfor.

Steg 4: Implementering av server-side rendering

TacoTranslate tillater server-side rendering av oversettelsene dine. Dette forbedrer brukeropplevelsen betydelig ved å vise oversatt innhold umiddelbart, i stedet for en kort visning av uoversatt innhold først. I tillegg kan vi hoppe over nettverksforespørsler på klienten, fordi vi allerede har alle oversettelsene vi trenger.

Vi starter med å opprette eller endre /next.config.js.

/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'),
	});
};

Endre isProduction -kontrollen slik at den passer til oppsettet ditt. Hvis true, vil TacoTranslate vise den offentlige API-nøkkelen. Hvis vi er i et lokalt, test- eller iscenesettelsesmiljø (isProduction is false), bruker vi den hemmelige read/write API-nøkkelen for å sikre at nye strenger sendes til oversettelse.

Foreløpig har vi bare satt opp Next.js-applikasjonen med en liste over støttede språk. Det neste vi skal gjøre er å hente oversettelser for alle sidene dine. For å gjøre det, vil du bruke enten getTacoTranslateStaticProps eller getTacoTranslateServerSideProps basert på dine behov.

Disse funksjonene tar tre argumenter: Ett Next.js Static Props Context objekt, konfigurasjon for TacoTranslate, og valgfrie Next.js egenskaper. Merk at revalidategetTacoTranslateStaticProps er satt til 60 som standard, slik at oversettelsene dine holdes oppdaterte.

For å bruke en av funksjonene i en side, la oss anta at du har en sidefil som /pages/hello-world.tsx.

/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 skal nå kunne bruke Translate -komponenten for å oversette tekststrenger i alle React-komponentene dine.

import {Translate} from 'tacotranslate/react';

function Component() {
	return <Translate string="Hello, world!"/>
}

Trinn 5: Distribuer og test!

Vi er ferdige! Din React-applikasjon vil nå bli oversatt automatisk når du legger til strenger i en Translate komponent. Merk at bare miljøer med read/write tillatelser på API-nøkkelen vil kunne opprette nye strenger for oversettelse. Vi anbefaler å ha et lukket og sikkert staging-miljø der du kan teste produksjonsapplikasjonen din med en slik API-nøkkel, og legge til nye strenger før du går live. Dette vil forhindre at noen stjeler din hemmelige API-nøkkel, og potensielt ødelegger oversettelsesprosjektet ditt ved å legge til nye, irrelevante strenger.

Husk å sjekke ut det komplette eksemplet på vår GitHub-profil. Der finner du også et eksempel på hvordan du kan gjøre dette med App Router! Hvis du støter på problemer, er det bare å ta kontakt, så hjelper vi deg mer enn gjerne.

TacoTranslate lar deg automatisk lokalisere React-applikasjonene dine raskt til og fra over 75 språk. Kom i gang i dag!

Et produkt fra NattskiftetLaget i Norge