La millor solució per a la internacionalització (i18n) en aplicacions Next.js
Vols expandir la teva aplicació Next.js a nous mercats? TacoTranslate fa que sigui increïblement fàcil localitzar el teu projecte Next.js, permetent-te arribar a una audiència global sense complicacions.
Per què triar TacoTranslate per a Next.js?
- Integració sense costures: Dissenyat específicament per a aplicacions Next.js, TacoTranslate s’integra fàcilment al teu flux de treball existent.
- Recollida automàtica de cadenes: No cal gestionar fitxers JSON manualment. TacoTranslate recull automàticament les cadenes del teu codi.
- Traduccions impulsades per IA: Aprofita el poder de la IA per oferir traduccions contextualment precises que s’adapten al to de la teva aplicació.
- Suport instantani d’idiomes: Afegeix suport per a nous idiomes amb un sol clic, fent que la teva aplicació sigui accessible globalment.
Com funciona
A mesura que el món es globalitza més, és cada cop més important que els desenvolupadors web creïn aplicacions que puguin atendre usuaris de diferents països i cultures. Una de les maneres clau d'aconseguir-ho és mitjançant la internacionalització (i18n), que permet adaptar la teva aplicació a diferents idiomes, monedes i formats de data.
En aquest tutorial, explorarem com afegir internacionalització a la teva aplicació React Next.js, amb renderització del costat del servidor. TL;DR: Veure l’exemple complet aquí.
Aquesta guia és per a aplicacions Next.js que utilitzen el Pages Router.
Si utilitzeu el App Router, si us plau, consulteu aquesta guia en canvi.
Pas 1: Instal·la una biblioteca i18n
Per implementar la internacionalització a la teva aplicació Next.js, primer escollirem una biblioteca i18n. Hi ha diverses biblioteques populars, inclosa next-intl. Tanmateix, en aquest exemple, farem servir TacoTranslate.
TacoTranslate tradueix automàticament les teves cadenes a qualsevol idioma utilitzant IA d’última generació, i t’allibera de la gestió avorrida dels fitxers JSON.
Instal·lem-ho amb npm al teu terminal:
npm install tacotranslate
Pas 2: Crea un compte gratuït a TacoTranslate
Ara que tens el mòdul instal·lat, és hora de crear el teu compte de TacoTranslate, un projecte de traducció i les claus API associades. Crea un compte aquí. És gratuït, i no requereix que afegeixis una targeta de crèdit.
Dins de la interfície d'usuari de l'aplicació TacoTranslate, crea un projecte i navega fins a la pestanya d'API keys. Crea una clau read
i una clau read/write
. Les guardarem com a variables d'entorn. La clau read
és la que anomenem public
i la clau read/write
és secret
. Per exemple, les podries afegir a un fitxer .env
a l'arrel del teu projecte.
TACOTRANSLATE_PUBLIC_API_KEY=123456
TACOTRANSLATE_SECRET_API_KEY=789010
Assegura't de no filtrar mai la clau API secreta read/write
als entorns de producció del costat client.
També afegirem dues variables d’entorn més: TACOTRANSLATE_DEFAULT_LOCALE
i TACOTRANSLATE_ORIGIN
.
TACOTRANSLATE_DEFAULT_LOCALE
: El codi de localització per defecte de reserva. En aquest exemple, el configurarem aen
per a anglès.TACOTRANSLATE_ORIGIN
: La "carpeta" on s'emmagatzemaran les teves cadenes, com ara la URL del teu lloc web. Llegeix més sobre els orígens aquí.
TACOTRANSLATE_DEFAULT_LOCALE=en
TACOTRANSLATE_ORIGIN=your-website-url.com
Pas 3: Configurant TacoTranslate
Per integrar TacoTranslate amb la teva aplicació, hauràs de crear un client utilitzant les claus API esmentades abans. Per exemple, crea un fitxer anomenat /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;
Definirem automàticament TACOTRANSLATE_API_KEY
en breu.
Crear el client en un fitxer separat facilita el seu ús posterior. Ara, utilitzant un /pages/_app.tsx
personalitzat, afegirem el proveïdor TacoTranslate
.
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>
);
}
Si ja tens pageProps
i _app.tsx
personalitzats, si us plau amplia la definició amb les propietats i el codi indicats més amunt.
Pas 4: Implementació del renderitzat del costat del servidor
TacoTranslate permet el rendering al servidor de les teves traduccions. Això millora considerablement l'experiència de l'usuari mostrant el contingut traduït immediatament, en lloc d'un flaix de contingut sense traduir primer. A més a més, podem evitar les peticions de xarxa al client, perquè ja tenim totes les traduccions que necessitem.
Començarem creant o modificant /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'),
});
};
Modifica la comprovació isProduction
per adaptar-la a la teva configuració. Si true
, TacoTranslate mostrarà la clau pública de l’API. Si estem en un entorn local, de proves o staging (isProduction
is false
), utilitzarem la clau secreta read/write
de l’API per assegurar-nos que les noves cadenes s’enviïn per a la traducció.
Fins ara, només hem configurat l'aplicació Next.js amb una llista d'idiomes compatibles. El següent que farem serà obtenir les traduccions de totes les teves pàgines. Per fer-ho, utilitzaràs o bé getTacoTranslateStaticProps
o getTacoTranslateServerSideProps
segons les teves necessitats.
Aquestes funcions prenen tres arguments: un objecte Next.js Static Props Context, la configuració per a TacoTranslate i propietats opcionals de Next.js. Tingueu en compte que revalidate
a getTacoTranslateStaticProps
està establert a 60 per defecte, de manera que les vostres traduccions es mantinguin actualitzades.
Per utilitzar qualsevol de les dues funcions en una pàgina, suposem que teniu un fitxer de pàgina com /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!"/>;
}
Ara hauries de poder utilitzar el component Translate
per traduir cadenes dins de tots els teus components React.
import {Translate} from 'tacotranslate/react';
function Component() {
return <Translate string="Hello, world!"/>
}
Pas 5: Desplega i prova!
Ho hem acabat! La teva aplicació Next.js ara es traduirà automàticament quan afegeixis qualsevol cadena a un component Translate
. Tingues en compte que només els entorns amb permisos read/write
a la clau API podran crear noves cadenes per traduir. Recomanem disposar d’un entorn de staging tancat i segur on puguis provar la teva aplicació de producció amb una clau API d’aquest tipus, afegint noves cadenes abans de posar-la en marxa. Això evitarà que ningú no robi la teva clau API secreta i, potencialment, que inflin el teu projecte de traducció afegint cadenes noves i no relacionades.
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!