La mejor solución para la internacionalización (i18n) en aplicaciones Next.js

Cómo funciona

A medida que el mundo se vuelve más globalizado, 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 añadir internacionalización a tu aplicación React Next.js, con renderizado del lado del servidor. TL;DR: Ve el ejemplo completo aquí.

Esta guía es para aplicaciones Next.js que están utilizando el Pages Router.
Si estás utilizando el App Router, por favor consulta esta guía en su lugar.

Paso 1: Instala una biblioteca de i18n

Para implementar la internacionalización en tu aplicación Next.js, primero elegiremos una biblioteca de i18n. Hay varias bibliotecas populares, incluyendo next-intl. Sin embargo, en este ejemplo, usaremos TacoTranslate.

TacoTranslate traduce automáticamente tus cadenas a cualquier idioma usando inteligencia artificial de vanguardia, 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 hora 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 su pestaña de claves API. Crea una clave read y una clave read/write. Las guardaremos como variables de entorno. La clave read es lo que llamamos public y la clave 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 añadiremos dos variables de entorno más: TACOTRANSLATE_DEFAULT_LOCALE y TACOTRANSLATE_ORIGIN.

• TACOTRANSLATE_DEFAULT_LOCALE: El código de configuración regional predeterminado de respaldo. En este ejemplo, lo estableceremos en en 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 su aplicación, deberá crear un cliente utilizando las claves API de antes. Por ejemplo, cree un archivo denominado /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;

Pronto estaremos definiendo automáticamente TACOTRANSLATE_API_KEY.

Crear el cliente en un archivo separado facilita su uso nuevamente 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 y _app.tsx personalizados, por favor extiende la definición con las propiedades y el código indicados arriba.

Paso 4: Implementando la renderización 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 compatibles. Lo siguiente que haremos es obtener las traducciones para todas tus páginas. Para ello, usarás ya sea getTacoTranslateStaticProps o getTacoTranslateServerSideProps según tus necesidades.

Estas funciones toman tres argumentos: un objeto Next.js Static Props Context, la configuración para TacoTranslate, y propiedades opcionales de Next.js. Tenga en cuenta que revalidate en getTacoTranslateStaticProps está configurado en 60 por defecto, para que sus 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 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 traducir. 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 robe tu clave API secreta y potencialmente sobrecargue tu proyecto de traducción añadiendo cadenas nuevas y no relacionadas.

Asegúrate de consultar el ejemplo completo en nuestro perfil de GitHub. Allí, también encontrarás un ejemplo de cómo hacerlo usando el App Router¡Si tienes algún problema, no dudes en contactarnos, y estaremos más que felices de ayudarte.

TacoTranslate te permite localizar automáticamente tus aplicaciones React rápida y fácilmente a cualquier idioma y desde cualquier idioma. ¡Comienza hoy!