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

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 distintos países y culturas. Una de las formas clave para lograr esto es mediante la internacionalización (i18n), que 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: Vea el ejemplo completo aquí.

Esta guía es para aplicaciones de Next.js que usan el Pages Router.
Si está utilizando el App Router, consulte esta guía en su lugar.

Paso 1: Instalar una biblioteca 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 IA 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 de TacoTranslate

Ahora que has instalado el módulo, es hora de crear tu cuenta de TacoTranslate, un proyecto de traducción y las claves de API asociadas. Crea una cuenta aquí. Es gratis y no requiere que añadas 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 de API. Crea una clave read y una read/write. Las guardaremos como variables de entorno. La read es lo que llamamos public y la 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 no filtrar nunca la clave API secreta read/write en 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 locale que se usará por defecto. En este ejemplo, lo estableceremos en en para inglés.
• TACOTRANSLATE_ORIGIN: La "carpeta" donde se almacenarán tus cadenas, por ejemplo, la URL de tu sitio web. Obtén más información sobre los orígenes aquí.

TACOTRANSLATE_DEFAULT_LOCALE=en
TACOTRANSLATE_ORIGIN=your-website-url.com

Paso 3: Configuración de TacoTranslate

Para integrar TacoTranslate con su aplicación, necesitará crear un cliente usando las claves de API mencionadas anteriormente. Por ejemplo, cree 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 volver a usarlo 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, amplía la definición con las propiedades y el código anteriores.

Paso 4: Implementando el renderizado del lado del servidor

TacoTranslate permite el renderizado 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 parpadeo de contenido sin traducir al principio. 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'),
	});
};

Modifica la comprobación de isProduction para que se ajuste a tu configuración. Si true, TacoTranslate mostrará la clave pública de la API. Si estamos en un entorno local, de pruebas o de staging (isProduction is false), usaremos la clave secreta de la API read/write para asegurarnos de que las nuevas cadenas se envíen 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 de todas tus páginas. Para ello, usarás 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. 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: ¡Desplegar y probar!

¡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 de la API podrán crear nuevas cadenas para ser traducidas. Recomendamos disponer de un entorno de staging cerrado y seguro donde puedas probar tu aplicación de producción con una clave de API de ese tipo, añadiendo nuevas cadenas antes de lanzarla. Esto evitará que alguien robe tu clave secreta de la API y, potencialmente, que haga crecer innecesariamente tu proyecto de traducción añadiendo 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!