La mejor solución para la internacionalización (i18n) en aplicaciones Next.js
¿Buscas expandir tu aplicación Next.js a nuevos mercados? TacoTranslate hace que sea increíblemente fácil localizar tu proyecto Next.js, permitiéndote alcanzar una audiencia global sin complicaciones.
¿Por qué elegir TacoTranslate para Next.js?
- Integración Sin Problemas: Diseñado específicamente para aplicaciones Next.js, TacoTranslate se integra sin esfuerzo en tu flujo de trabajo existente.
- Recolección Automática de Cadenas: No más manejo manual de archivos JSON. TacoTranslate recolecta automáticamente las cadenas de tu código.
- Traducciones Impulsadas por IA: Aprovecha el poder de la IA para ofrecer traducciones contextualmente precisas que se ajusten al tono de tu aplicación.
- Soporte Instantáneo de Idiomas: Agrega soporte para nuevos idiomas con solo un clic, haciendo tu aplicación accesible globalmente.
Cómo funciona
A medida que el mundo se globaliza, es cada vez más importante que los desarrolladores web creen aplicaciones que puedan atender a usuarios de diferentes países y culturas. Una de las formas clave de lograr esto es a través de la internacionalización (i18n), que te permite adaptar tu aplicación a diferentes idiomas, monedas y formatos de fecha.
En este tutorial, exploraremos cómo agregar internacionalización a tu aplicación React Next.js, con renderizado del lado del servidor. TL;DR: Mira el ejemplo completo aquí.
Esta guía es para aplicaciones Next.js que están usando el Pages Router.
Si estás usando el App Router, por favor consulta esta guía en su lugar.
Paso 1: Instala una biblioteca i18n
Para implementar la internacionalización en tu aplicación Next.js, primero elegiremos una librería i18n. Hay varias librerías populares, incluyendo next-intl. Sin embargo, en este ejemplo, usaremos TacoTranslate.
TacoTranslate traduce automáticamente tus cadenas a cualquier idioma usando inteligencia artificial de última generación, y te libera de la tediosa gestión de archivos JSON.
Instalémoslo usando npm en tu terminal:
npm install tacotranslate
Paso 2: Crea una cuenta gratuita en TacoTranslate
Ahora que tienes el módulo instalado, es momento de crear tu cuenta de TacoTranslate, un proyecto de traducción y las claves API asociadas. Crea una cuenta aquí. Es gratis y no requiere que agregues una tarjeta de crédito.
Dentro de la interfaz de la aplicación TacoTranslate, crea un proyecto y navega a la pestaña de claves API. Crea una llave read
y una llave read/write
. Las guardaremos como variables de entorno. La llave read
es lo que llamamos public
y la llave read/write
es secret
. Por ejemplo, podrías agregarlas a un archivo .env
en la raíz de tu proyecto.
TACOTRANSLATE_PUBLIC_API_KEY=123456
TACOTRANSLATE_SECRET_API_KEY=789010
Asegúrate de nunca filtrar la clave API secreta read/write
a los entornos de producción del lado del cliente.
También agregaremos dos variables de entorno más: TACOTRANSLATE_DEFAULT_LOCALE
y TACOTRANSLATE_ORIGIN
.
TACOTRANSLATE_DEFAULT_LOCALE
: El código de idioma predeterminado para fallback. En este ejemplo, lo configuraremos enen
para inglés.TACOTRANSLATE_ORIGIN
: La “carpeta” donde se almacenarán tus cadenas, como la URL de tu sitio web. Lee más sobre orígenes aquí.
TACOTRANSLATE_DEFAULT_LOCALE=en
TACOTRANSLATE_ORIGIN=your-website-url.com
Paso 3: Configurando TacoTranslate
Para integrar TacoTranslate con tu aplicación, necesitarás crear un cliente usando las claves API mencionadas anteriormente. Por ejemplo, crea un archivo llamado /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;
Definiremos automáticamente TACOTRANSLATE_API_KEY
en breve.
Crear el cliente en un archivo separado facilita su reutilización más adelante. Ahora, usando un /pages/_app.tsx
personalizado, añadiremos el proveedor 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 ya tienes pageProps
personalizados y _app.tsx
, por favor extiende la definición con las propiedades y el código mencionados arriba.
Paso 4: Implementando renderizado del lado del servidor
TacoTranslate permite la renderización del lado del servidor de tus traducciones. Esto mejora enormemente la experiencia del usuario al mostrar el contenido traducido de inmediato, en lugar de un destello de contenido sin traducir primero. Además, podemos omitir las solicitudes de red en el cliente, porque ya tenemos todas las traducciones que necesitamos.
Comenzaremos creando o modificando /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'),
});
};
Modifique la verificación de isProduction
para que se adapte a su configuración. Si true
, TacoTranslate mostrará la clave de API pública. Si estamos en un entorno local, de prueba o de ensayo (isProduction
is false
), usaremos la clave de API de read/write
secreta para asegurarnos de que se envíen nuevas cadenas para su traducción.
Hasta ahora, solo hemos configurado la aplicación Next.js con una lista de idiomas soportados. Lo siguiente que haremos es obtener las traducciones para todas tus páginas. Para eso, usarás ya sea getTacoTranslateStaticProps
o getTacoTranslateServerSideProps
según tus necesidades.
Estas funciones reciben tres argumentos: un objeto Next.js Static Props Context, la configuración para TacoTranslate y propiedades opcionales de Next.js. Ten en cuenta que revalidate
en getTacoTranslateStaticProps
está establecido en 60 por defecto, para que tus traducciones se mantengan actualizadas.
Para usar cualquiera de las dos funciones en una página, supongamos que tienes un archivo de página como /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!"/>;
}
Ahora deberías poder usar el componente Translate
para traducir cadenas dentro de todos tus componentes de React.
import {Translate} from 'tacotranslate/react';
function Component() {
return <Translate string="Hello, world!"/>
}
Paso 5: ¡Despliega y prueba!
¡Hemos terminado! Tu aplicación Next.js ahora se traducirá automáticamente cuando agregues cualquier cadena a un componente Translate
. Ten en cuenta que solo los entornos con permisos read/write
en la clave API podrán crear nuevas cadenas para ser traducidas. Recomendamos tener un entorno de staging cerrado y seguro donde puedas probar tu aplicación de producción con una clave API de ese tipo, agregando nuevas cadenas antes de lanzar. Esto evitará que alguien más robe tu clave API secreta y que, potencialmente, se sobrecargue tu proyecto de traducción con cadenas nuevas y no relacionadas.
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!