Die beste oplossing vir internasionale aanpassing (i18n) in Next.js-toepassings
Is jy op soek om jou Next.js-toepassing na nuwe markte uit te brei? TacoTranslate maak dit ongelooflik maklik om jou Next.js-projek te lokaliseer, wat jou in staat stel om ’n wêreldwye gehoor te bereik sonder die moeilikheid.
Waarom kies jy TacoTranslate vir Next.js?
- Naadlose Integrasie: Spesifiek ontwerp vir Next.js-toepassings, integreer TacoTranslate moeiteloos in jou bestaande werksvloei.
- Outomatiese Stringversameling: Nie meer die handmatige bestuur van JSON-lêers nie. TacoTranslate versamel outomaties strings uit jou kodebasis.
- KI-Gepowerde Vertalings: Benut die krag van KI om kontekstueel akkurate vertalings te bied wat by die toon van jou toepassing pas.
- Onmiddellike Taalondersteuning: Voeg ondersteuning vir nuwe tale by met net ʼn klik, wat jou toepassing wêreldwyd toeganklik maak.
Hoe dit werk
Naarmate die wêreld meer geglobaliseer raak, word dit al hoe belangriker vir webontwikkelaars om toepassings te bou wat kan voorsien in gebruikers van verskillende lande en kulture. Een van die sleutels maniere om dit te bereik, is deur internasionale funksionaliteit (i18n), wat jou toelaat om jou toepassing aan te pas by verskillende tale, geldeenhede en datumformate.
In hierdie handleiding gaan ons ondersoek hoe om internasionale funksionaliteit by jou React Next.js-toepassing te voeg, met bediener-kant rendering. TL;DR: Sien die volle 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 internasionale ondersteuning in jou Next.js-toepassing te implementeer, sal ons eers '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 vervelige bestuur van JSON-lêers.
Kom ons installeer dit met npm in jou terminale:
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 ooreenstemmende API-sleutels te skep. Skep ’n rekening hier. Dit is gratis, en vereis nie dat jy ’n kredietkaart moet voeg 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 omgewingsveranderlikes 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 aan kliëntkant-produksie-omgewings lewendig lek nie.
Ons voeg ook nog twee omgewingsveranderlikes by: TACOTRANSLATE_DEFAULT_LOCALE
en TACOTRANSLATE_ORIGIN
.
TACOTRANSLATE_DEFAULT_LOCALE
: Die standaard terugval-lokale kode. In hierdie voorbeeld stel ons dit in open
vir Engels.TACOTRANSLATE_ORIGIN
: Die "lêergids" 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: TacoTranslate opstel
Om TacoTranslate met jou toepassing te integreer, sal jy ’n kliënt moet skep met behulp van 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 aparte lêer te skep maak dit makliker om dit later weer te gebruik. Nou, deur gebruik te maak 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: Implementering van bediener-kant rendering
TacoTranslate maak voorsiening vir bediener-kant rendering van jou vertalings. Dit verbeter die gebruikerservaring aansienlik deur vertaalde inhoud onmiddellik te vertoon, in plaas van eers ’n flits van onvertaalde inhoud. Daarbenewens kan ons netwerkversoeke aan die kliënt oorslaan, omdat ons reeds al die vertalings het wat ons nodig het.
Ons begin deur /next.config.js
te skep of aan te pas.
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 dit true
is, sal TacoTranslate die openbare API-sleutel openbaar maak. As ons in ’n plaaslike, toets- of staging-omgewing is (isProduction
is false
), gaan ons die geheime read/write
API-sleutel gebruik om seker te maak nuwe stringe word gestuur vir vertaling.
Tot dusver het ons net die Next.js-toepassing opgestel met 'n lys van ondersteunde tale. Die volgende ding wat ons gaan doen, is vertalings vir al jou bladsye haal. Om dit te doen, gebruik jy óf getTacoTranslateStaticProps
óf getTacoTranslateServerSideProps
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 gestel is op 60, sodat jou vertalings op datum bly.
Om een van die funksies op ’n bladsy te gebruik, laat ons aanvaar jy het ’n bladsylê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 Next.js-toepassing sal nou outomaties vertaal word wanneer jy enige stringe by ʼn Translate
komponent voeg. Let daarop dat slegs omgewings met read/write
toestemmings 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 ʼn API-sleutel soos daardie kan toets, en nuwe stringe kan voeg voordat dit lewendig gaan. Dit sal voorkom dat enigiemand jou geheime API-sleutel steel en moontlik jou vertaalprojek oorlaai deur nuwe, ongerelateerde stringe by te voeg.
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!