Korleis implementere internasjonalisering i ei Next.js-applikasjon som bruker Pages Router

Ettersom verda blir meir globalisert, blir det stadig viktigare for nettutviklarar å lage 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 din til ulike språk, valutor og datoformat.

I denne tutorialen skal vi utforske korleis du kan leggje til internasjonalisering i din React Next.js-applikasjon, med server side rendering. TL;DR: Sjå det fullstendige eksemplet her.

Denne guida er for Next.js-applikasjonar som brukar Pages Router.
Om du brukar App 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. Men i dette eksempelet skal vi bruke TacoTranslate.

TacoTranslate omset automatisk strengane dine til kva som helst språk ved hjelp av avansert AI, og friar deg frå den tidkrevjande handtering 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 omsetjingsprosjekt og tilhøyrande API-nøkkel. Opprett ein konto her. Det er gratis, og krav ikkje at du må legge inn kredittkort.

Innenfor TacoTranslate-applikasjonen sin UI, opprett eit prosjekt, og naviger til fana for API-nøklar. Opprett 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. Du kan til dømes legge dei til i ein .env fil i roten av prosjektet ditt.

TACOTRANSLATE_PUBLIC_API_KEY=123456
TACOTRANSLATE_SECRET_API_KEY=789010

Ver sikre på at du aldri lekkar den hemmelige read/write API-nøkkelen til produksjonsmiljø på klientsida.

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

• TACOTRANSLATE_DEFAULT_LOCALE: Standard språkfallkode. I dette eksempelet set vi den til en for engelsk.
• TACOTRANSLATE_ORIGIN: "Mappa" der strengane dine blir lagra, slik som URL-en 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 opprette ein klient ved å bruke API-nøklane frå tidlegare. Til dømes, opprett ein 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_DEFAULT_LOCALE ?? '',
});

module.exports = tacoTranslate;

Vi vil automatisk definere TACOTRANSLATE_API_KEY snart.

Å lage klienten i ei eiga fil gjer det enklare å bruke den igjen seinare. No, ved å bruke ein tilpassa /pages/_app.tsx, vil vi leggje til 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 allereie har eigne pageProps og _app.tsx, vennligst utvid definisjonen med eigenskapane og koden frå ovanfor.

Steg 4: Implementering av server side rendering

TacoTranslate legg til rette for server-side rendering av omsetjingane dine. Dette forbetrar brukaropplevinga mykje ved å vise omsett innhald med ein gong, i staden for eit kort augeblikk med uomsett innhald først. I tillegg kan vi hoppe over nettverksforespurnader på klienten, fordi vi allereie har alle omsetjingane vi treng.

Vi startar med å opprette eller endre /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 -sjekken slik at den passar for di oppsetjing. Om true, vil TacoTranslate bruke den offentlege API-nøkkelen. Om 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 strengjer blir sende til omsetjing.

Fram til no har vi berre sett opp Next.js-applikasjonen med ei liste over støtta språk. Det neste vi skal gjere er å hente omsettingar for alle sidene dine. For å gjere det, vil du bruke anten getTacoTranslateStaticProps eller getTacoTranslateServerSideProps basert på behova dine.

Desse funksjonane tek tre argument: Eit Next.js Static Props Context objekt, konfigurasjon for TacoTranslate, og valfrie Next.js eigenskapar. Merk at revalidate på getTacoTranslateStaticProps som standard er sett til 60, slik at omsetjingane dine held seg oppdaterte.

For å bruke ein av funksjonane på ei side, la oss anta at du har ein 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 skal no kunne bruke Translate komponenten for å omsetje tekststrenger i alle React-komponentane dine.

import {Translate} from 'tacotranslate/react';

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

Steg 5: Distribuer og test!

Vi er ferdige! Din React-applikasjon vil no automatisk bli omsett når du legg til nokre tekststrengar i ein Translate komponent. Merk at berre miljø med read/write tillatingar på API-nøkkelen vil kunne lage nye strengar for omsetjing. Vi anbefaler å ha eit lukka og trygt staging-miljø der du kan teste produksjonsapplikasjonen din med ei slik API-nøkkel, og legge til nye strengar før du går live. Dette vil hindre at nokon stjel den hemmelige API-nøkkelen din, og potensielt bloatar omsetjingsprosjektet ditt ved å legge til nye, ikkje-relaterte strengar.

Ver sørg for å sjå det fullstendige dømet på vår GitHub-profil. Der vil du òg finne eit døme på korleis du kan gjere dette med App Router ! Dersom du støyt på nokre problem, ikkje nøl med å ta kontakt, så er vi meir enn glade for å hjelpe.

TacoTranslate gir deg moglegheit til å automatisk lokaliserer dine React-applikasjonar raskt til og frå kva som helst språk. Kom i gang i dag!