Cómo implementar la internacionalización en una aplicación Next.js que utiliza el App Router

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 artículo, exploraremos cómo agregar 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 usan el App Router.
Si estás usando el Pages Router, 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 biblioteca i18n. Hay varias bibliotecas populares, incluyendo next-intl. Sin embargo, en este ejemplo utilizaremos TacoTranslate.

TacoTranslate traduce automáticamente tus cadenas a cualquier idioma usando una IA de vanguardia, y te libera de la tediosa gestión de archivos JSON.

Vamos a instalarla 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 la 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 no filtrar nunca la clave API secreta read/write en 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 configuración regional predeterminado de reserva. En este ejemplo, lo configuraremos 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 tu aplicación, necesitarás crear un cliente usando las claves API mencionadas anteriormente. Por ejemplo, crea un archivo llamado /utilities/tacotranslate.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_IS_PRODUCTION === 'true'
			? process.env.TACOTRANSLATE_PROJECT_LOCALE
			: undefined,
});

module.exports = tacoTranslate;

Estaremos definiendo automáticamente TACOTRANSLATE_API_KEY y TACOTRANSLATE_PROJECT_LOCALE en breve.

Crear el cliente en un archivo separado facilita su reutilización más adelante. getLocales es solo una función utilitaria con manejo de errores incorporado. Ahora, crea un archivo llamado /components/tacotranslate.tsx, donde implementaremos el proveedor TacoTranslate.

'use client';

import React, {type ReactNode} from 'react';
import ImportedTacoTranslate, {
	type TranslationContextProperties,
} from 'tacotranslate/react';
import tacoTranslate from '@/utilities/tacotranslate';

export default function TacoTranslate({
	locale,
	origin,
	localizations,
	children,
}: TranslationContextProperties & {
	readonly children: ReactNode;
}) {
	return (
		<ImportedTacoTranslate
			client={tacoTranslate}
			locale={locale}
			origin={origin}
			localizations={localizations}
		>
			{children}
		</ImportedTacoTranslate>
	);
}

Tenga en cuenta el 'use client'; que indica que este es un componente del cliente.

Con el proveedor de contexto ahora listo para usar, cree un archivo llamado /app/[locale]/layout.tsx, el diseño raíz en nuestra aplicación. Tenga en cuenta que esta ruta tiene una carpeta que utiliza Dynamic Routes, donde [locale] es el parámetro dinámico.

import React, {type ReactNode} from 'react';
import {isRightToLeftLocaleCode} from 'tacotranslate';
import './global.css';
import tacoTranslate from '@/utilities/tacotranslate';
import TacoTranslate from '@/components/tacotranslate';
import {customGenerateMetadata} from '@/utilities/generate-metadata';

export async function generateStaticParams() {
	const locales = await tacoTranslate.getLocales();
	return locales.map((locale) => ({locale}));
}

type RootLayoutParameters = {
	readonly params: {locale: string};
	readonly children: ReactNode;
};

export default async function RootLayout({
	params: {locale},
	children,
}: RootLayoutParameters) {
	const origins = [process.env.TACOTRANSLATE_ORIGIN];
	const direction = isRightToLeftLocaleCode(locale) ? 'rtl' : 'ltr';
	const localizations = await tacoTranslate.getLocalizations({locale, origins});

	return (
		<html lang={locale} dir={direction}>
			<body>
				<TacoTranslate
					locale={locale}
					origin={origin}
					localizations={localizations}
				>
					<div id="content">{children}</div>
				</TacoTranslate>
			</body>
		</html>
	);
}

Lo primero que hay que señalar aquí es que estamos utilizando nuestro parámetro de Dynamic Route [locale] para obtener las traducciones de ese idioma. Además, generateStaticParams se asegura de que todos los códigos de locales que tienes activados para tu proyecto se pre-rendericen.

¡Ahora, construyamos nuestra primera página! Crea un archivo llamado /app/[locale]/page.tsx.

import React from 'react';
import {Translate} from 'tacotranslate/react';

export const revalidate = 60;
export default async function Page() {
	return (
		<Translate string="Hello, world!" />
	);
}

Toma en cuenta la variable revalidate que indica a Next.js que vuelva a construir la página después de 60 segundos, y mantenga tus traducciones actualizadas.

Paso 4: Implementando renderizado del lado del servidor

TacoTranslate soporta la renderización del lado del servidor. Esto mejora enormemente la experiencia del usuario al mostrar el contenido traducido de inmediato, en lugar de un destello de contenido no traducido primero. Además, podemos evitar las solicitudes de red en el cliente, porque ya tenemos las traducciones que necesitamos para la página que el usuario está viendo.

Para configurar el renderizado del lado del servidor, crea o modifica /next.config.js:

const withTacoTranslate = require('tacotranslate/next/config').default;
const tacoTranslate = require('./utilities/tacotranslate');

module.exports = async () => {
	const config = await withTacoTranslate(
		{},
		{
			client: tacoTranslate,
			isProduction:
				process.env.TACOTRANSLATE_ENV === 'production' ||
				process.env.VERCEL_ENV === 'production' ||
				(!(process.env.TACOTRANSLATE_ENV || process.env.VERCEL_ENV) &&
					process.env.NODE_ENV === 'production'),
		}
	);

	// NOTE: Remove i18n from config when using the app router
	return {...config, i18n: undefined};
};

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.

Para asegurar que el enrutamiento y la redirección funcionen como se espera, necesitaremos crear un archivo llamado /middleware.ts. Usando Middleware, podemos redirigir a los usuarios a páginas presentadas en su idioma preferido.

import {type NextRequest} from 'next/server';
import {middleware as tacoTranslateMiddleware} from 'tacotranslate/next';
import tacoTranslate from '@/utilities/tacotranslate';

export const config = {
	matcher: ['/((?!api|_next|favicon.ico).*)'],
};

export async function middleware(request: NextRequest) {
	return tacoTranslateMiddleware(tacoTranslate, request);
}

Asegúrate de configurar el matcher de acuerdo con la documentación de Middleware de Next.js.

En el cliente, puedes modificar la cookie locale para cambiar cuál es el idioma preferido del usuario. Por favor, consulta el código de ejemplo completo para obtener ideas sobre cómo hacerlo.

Paso 5: ¡Despliega y prueba!

¡Hemos terminado! Tu aplicación React ahora se traducirá automáticamente cuando agregues cualquier cadena a un componente Translate. Ten en cuenta que solo los entornos con permisos de 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 como esa, agregando nuevas cadenas antes de lanzar en vivo. Esto evitará que alguien robe tu clave API secreta y potencialmente sobrecargue tu proyecto de traducción añadiendo nuevas cadenas 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 Pages 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 hacia y desde cualquier idioma. ¡Comienza hoy!