De beste oplossing voor internationalisering (i18n) in Next.js-apps
Wilt u uw Next.js-applicatie uitbreiden naar nieuwe markten? TacoTranslate maakt het ongelooflijk eenvoudig om uw Next.js project te lokaliseren, zodat u een wereldwijd publiek kunt bereiken zonder gedoe.
Waarom kiezen voor TacoTranslate voor Next.js?
- Naadloze Integratie: Speciaal ontworpen voor Next.js toepassingen, integreert TacoTranslate moeiteloos in je bestaande workflow.
- Automatisch Strings Verzamelen: Geen handmatig beheer van JSON-bestanden meer. TacoTranslate verzamelt automatisch strings uit je codebase.
- AI-Aangedreven Vertalingen: Benut de kracht van AI om contextueel nauwkeurige vertalingen te leveren die passen bij de toon van je applicatie.
- Directe Taalondersteuning: Voeg met één klik ondersteuning voor nieuwe talen toe, waardoor je applicatie wereldwijd toegankelijk wordt.
Hoe het werkt
Naarmate de wereld meer globaliseert, wordt het voor webontwikkelaars steeds belangrijker om applicaties te bouwen die kunnen voldoen aan gebruikers uit verschillende landen en culturen. Een van de belangrijkste manieren om dit te bereiken is door internationalisatie (i18n), waarmee je je applicatie kunt aanpassen aan verschillende talen, valuta en datumnotaties.
In deze tutorial zullen we onderzoeken hoe je internationalisatie toevoegt aan je React Next.js-applicatie, met server side rendering. TL;DR: Zie hier het volledige voorbeeld.
Deze gids is voor Next.js-toepassingen die de Pages Router gebruiken.
Als u de App Router gebruikt, bekijk dan in plaats daarvan deze gids.
Stap 1: Installeer een i18n-bibliotheek
Om internationalisatie te implementeren in je Next.js-applicatie, kiezen we eerst een i18n-bibliotheek. Er zijn verschillende populaire bibliotheken, waaronder next-intl. In dit voorbeeld zullen we echter TacoTranslate gebruiken.
TacoTranslate vertaalt automatisch je strings naar elke taal met behulp van geavanceerde AI, en bevrijdt je van het moeizame beheer van JSON-bestanden.
Laten we het installeren met npm in je terminal:
npm install tacotranslate
Stap 2: Maak een gratis TacoTranslate-account aan
Nu je de module hebt geïnstalleerd, is het tijd om je TacoTranslate-account, een vertaalproject en de bijbehorende API-sleutels aan te maken. Maak hier een account aan. Het is gratis, en je hoeft geen creditcard toe te voegen.
Binnen de TacoTranslate applicatie-UI maak je een project aan en navigeer je naar het tabblad met API-sleutels. Maak een read
sleutel en een read/write
sleutel aan. We slaan deze op als omgevingsvariabelen. De read
sleutel noemen we public
en de read/write
sleutel is secret
. Bijvoorbeeld, je kunt ze toevoegen aan een .env
bestand in de root van je project.
TACOTRANSLATE_PUBLIC_API_KEY=123456
TACOTRANSLATE_SECRET_API_KEY=789010
Zorg er te allen tijde voor dat je de geheime read/write
API-sleutel niet lekt naar client-side productieomgevingen.
We voegen ook nog twee omgevingsvariabelen toe: TACOTRANSLATE_DEFAULT_LOCALE
en TACOTRANSLATE_ORIGIN
.
TACOTRANSLATE_DEFAULT_LOCALE
: De standaard terugvaltaalcode. In dit voorbeeld stellen we deze in open
voor Engels.TACOTRANSLATE_ORIGIN
: De "map" waar je strings worden opgeslagen, zoals de URL van je website. Lees hier meer over origins.
TACOTRANSLATE_DEFAULT_LOCALE=en
TACOTRANSLATE_ORIGIN=your-website-url.com
Stap 3: TacoTranslate instellen
Om TacoTranslate in uw applicatie te integreren, moet u een client aanmaken met behulp van de eerder verkregen API-sleutels. Maak bijvoorbeeld een bestand aan met de 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;
We zullen binnenkort automatisch TACOTRANSLATE_API_KEY
definiëren.
Het aanmaken van de client in een apart bestand maakt het later makkelijker om opnieuw te gebruiken. Nu voegen we met een aangepaste /pages/_app.tsx
de TacoTranslate
provider toe.
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>
);
}
Als je al aangepaste pageProps
en _app.tsx
hebt, breid dan de definitie uit met de hierboven genoemde eigenschappen en code.
Stap 4: Implementatie van server-side rendering
TacoTranslate maakt server-side rendering van je vertalingen mogelijk. Dit verbetert de gebruikerservaring aanzienlijk door direct vertaalde inhoud te tonen, in plaats van eerst een flits van onvertaalde inhoud. Bovendien kunnen we netwerkverzoeken aan de clientzijde overslaan, omdat we al alle benodigde vertalingen hebben.
We beginnen met het aanmaken of aanpassen van /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'),
});
};
Pas de isProduction
controle aan zodat deze bij jouw setup past. Als true
is, zal TacoTranslate de publieke API-sleutel weergeven. Als we ons in een lokale, test- of stagingomgeving bevinden (isProduction
is false
), gebruiken we de geheime read/write
API-sleutel om ervoor te zorgen dat nieuwe strings worden verzonden voor vertaling.
Tot nu toe hebben we de Next.js-applicatie alleen ingesteld met een lijst van ondersteunde talen. Het volgende wat we gaan doen is vertalingen ophalen voor al je pagina’s. Hiervoor gebruik je afhankelijk van je behoeften ofwel getTacoTranslateStaticProps
of getTacoTranslateServerSideProps
.
Deze functies nemen drie argumenten: een Next.js Static Props Context object, configuratie voor TacoTranslate, en optionele Next.js-eigenschappen. Let op dat revalidate
bij getTacoTranslateStaticProps
standaard is ingesteld op 60, zodat je vertalingen up-to-date blijven.
Om een van beide functies op een pagina te gebruiken, gaan we ervan uit dat je een pagina-bestand hebt zoals /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!"/>;
}
Je zou nu in staat moeten zijn om de Translate
component te gebruiken om teksten te vertalen binnen al je React-componenten.
import {Translate} from 'tacotranslate/react';
function Component() {
return <Translate string="Hello, world!"/>
}
Stap 5: Implementeren en testen!
We zijn klaar! Je Next.js-applicatie wordt nu automatisch vertaald wanneer je strings toevoegt aan een Translate
component. Houd er rekening mee dat alleen omgevingen met read/write
permissies op de API-key nieuwe strings kunnen aanmaken voor vertaling. We raden aan om een gesloten en beveiligde stagingomgeving te hebben waarin je je productie-applicatie kunt testen met zo'n API-key, zodat je nieuwe strings kunt toevoegen voordat je live gaat. Dit voorkomt dat iemand je geheime API-key steelt en mogelijk je vertaalproject overbelast door het toevoegen van nieuwe, niet-gerelateerde 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!