Hoe om internasionaalstelling te implementeer in ’n Next.js-toepassing wat die Pages Router gebruik
Maak jou React-toepassing meer toeganklik en bereik nuwe markte met internasionaalstelling (i18n).
Namate die wêreld meer geglobaliseer raak, word dit al hoe belangriker vir webontwikkelaars om toepassings te bou wat gebruikers van verskillende lande en kulture kan bedien. Een van die sleutelmetodes om dit te behaal is deur internasiona-lisering (i18n), wat jou toelaat om jou toepassing aan te pas by verskillende tale, geldeenhede en datumnotasies.
In hierdie handleiding gaan ons ondersoek hoe om internasiona-lisering by jou React Next.js-toepassing te voeg, met bedienerkant-rendering. TL;DR: Sien die volledige voorbeeld hier.
Hierdie gids is vir Next.js-toepassings wat die Pages Router gebruik.
As jy die App Router gebruik, sien asseblief eerder hierdie gids.
Stap 1: Installeer 'n i18n-biblioteek
Om internasionaal vertaling (i18n) in jou Next.js-toepassing te implementeer, gaan ons eerst ʼn i18n-biblioteek kies. Daar is verskeie gewilde biblioteke, insluitend next-intl. In hierdie voorbeeld gaan ons egter TacoTranslate gebruik.
TacoTranslate vertaal jou stringe outomaties na enige taal deur gebruik te maak van gevorderde KI, en bevry jou van die saaie bestuur van JSON-lêers.
Kom ons installeer dit met npm in jou terminaal:
npm install tacotranslate
Stap 2: Skep ’n gratis TacoTranslate-rekening
Nou dat jy die module geïnstalleer het, is dit tyd om jou TacoTranslate-rekening, ’n vertaalprojek, en die gekoppelde API-sleutels te skep. Skep hier ’n rekening. Dit is gratis, en dit vereis nie dat jy ’n kredietkaart moet byvoeg nie.
Binne die TacoTranslate toepassingskoppelvlak, skep ’n projek en navigeer na die API-sleutels-oortjie. Skep een read
sleutel, en een read/write
sleutel. Ons sal dit as omgewingveranderlikes stoor. Die read
sleutel is wat ons public
noem en die read/write
sleutel is secret
. Byvoorbeeld, jy kan dit by ’n .env
lêer in die wortel van jou projek voeg.
TACOTRANSLATE_PUBLIC_API_KEY=123456
TACOTRANSLATE_SECRET_API_KEY=789010
Maak seker dat jy nooit die geheime read/write
API-sleutel na client-side produksieomgewings lek nie.
Ons voeg ook twee omgewingveranderlikes by: TACOTRANSLATE_DEFAULT_LOCALE
en TACOTRANSLATE_ORIGIN
.
TACOTRANSLATE_DEFAULT_LOCALE
: Die standaard terugvaltaalcodes. In hierdie voorbeeld stel ons dit open
vir Engels.TACOTRANSLATE_ORIGIN
: Die “gids” waar jou stringe gestoor sal word, soos die URL van jou webwerf. Lees meer oor oorspronge hier.
TACOTRANSLATE_DEFAULT_LOCALE=en
TACOTRANSLATE_ORIGIN=your-website-url.com
Stap 3: Opstel van TacoTranslate
Om TacoTranslate met jou toepassing te integreer, moet jy ’n kliënt skep met die API-sleutels van vroeër. Skep byvoorbeeld ’n lêer met die naam /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;
Ons sal binnekort outomaties TACOTRANSLATE_API_KEY
definieer.
Om die kliënt in 'n afsonderlike lêer te skep maak dit makliker om later weer te gebruik. Nou, met behulp van 'n pasgemaakte /pages/_app.tsx
, gaan ons die TacoTranslate
verskaffer byvoeg.
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>
);
}
As jy reeds aangepaste pageProps
en _app.tsx
het, brei asseblief die definisie uit met die eienskappe en kode van hierbo.
Stap 4: Implementeer bediener-kant rendering
TacoTranslate maak voorsiening vir bedienerkant-rendering van jou vertalings. Dit verbeter die gebruikerservaring aansienlik deur vertaalde inhoud onmiddellik te wys, in plaas van eers ’n kort blik van onvertalde inhoud. Daarbenewens kan ons netwerkaanvrae aan die kliëntkant oorslaan, omdat ons reeds al die vertalings het wat ons nodig het.
Ons begin deur /next.config.js
te skep of te wysig.
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'),
});
};
Wysig die isProduction
kontrole om by jou opstelling te pas. As true
, sal TacoTranslate die publieke API-sleutel openbaar maak. As ons in ’n plaaslike, toets-, of staging-omgewing is (isProduction
is false
), gebruik ons die geheime read/write
API-sleutel om seker te maak nuwe stringe word vir vertaling gestuur.
Tot dusver het ons net die Next.js-toepassing ingestel met ’n lys van ondersteunde tale. Die volgende ding wat ons gaan doen, is om vertalings vir al jou bladsye te haal. Om dit te doen, sal jy óf getTacoTranslateStaticProps
óf getTacoTranslateServerSideProps
gebruik gebaseer op jou vereistes.
Hierdie funksies neem drie argumente: Een Next.js Static Props Context objek, konfigurasie vir TacoTranslate, en opsionele Next.js eienskappe. Let daarop dat revalidate
op getTacoTranslateStaticProps
standaard op 60 gestel is, sodat jou vertalings op datum bly.
Om enige van die funksies op 'n bladsy te gebruik, neem ons aan jy het 'n bladsy-lêer soos /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!"/>;
}
Jy behoort nou die Translate
komponent te kan gebruik om stringe binne al jou React-komponente te vertaal.
import {Translate} from 'tacotranslate/react';
function Component() {
return <Translate string="Hello, world!"/>
}
Stap 5: Ontplooi en toets!
Ons is klaar! Jou React-toepassing sal nou outomaties vertaal word wanneer jy enige stringe by die Translate
komponent voeg. Let daarop dat slegs omgewings met read/write
magte op die API-sleutel in staat sal wees om nuwe stringe te skep wat vertaal moet word. Ons beveel aan om 'n geslote en beveiligde staging-omgewing te hê waar jy jou produksietoepassing met so 'n API-sleutel kan toets, en nuwe stringe kan byvoeg voordat dit regstreeks gaan. Dit sal voorkom dat enigiemand jou geheime API-sleutel steel, en moontlik jou vertaalprojek bloat deur nuwe, nie-verwante stringe by te voeg.
Maak seker dat jy die volledige voorbeeld op ons GitHub-profiel gaan kyk. Daar sal jy ook ’n voorbeeld vind van hoe om dit te doen met die gebruik van die App Router ! As jy enige probleme ondervind, voel vry om kontak te maak, en ons sal meer as graag help.
TacoTranslate laat jou toe om jou React-toepassings outomaties vinnig te lokaliseer na en van enige taal. Begin vandag nog!