Integrando la Internacionalización (i18n) en tu Proyecto de Next.js con next-intl
La internacionalización, también conocida como i18n (abreviatura de “internationalization”), es un aspecto crucial para alcanzar audiencias globales en el desarrollo de aplicaciones web. En este artículo, te guiaremos a través del proceso de integrar la internacionalización en tu proyecto de Next.js utilizando la librería next-intl.
¿Qué es next-intl?
next-intl es una librería que facilita la internacionalización en proyectos de Next.js. Permite la traducción de contenido y la gestión de formatos de fecha, hora y número en diferentes idiomas de una manera simple y eficiente.
Pasos para Integrar next-intl en tu Proyecto de Next.js
Los fragmentos de código siguen la configuración actual de next-intl para el App Router. La librería evoluciona rápido — si algo cambió, revisa la documentación oficial.
1. Instalando Dependencias
Para empezar, instala las dependencias necesarias ejecutando el siguiente comando en tu terminal:
npm install next-intly crea la siguiente estructura de archivos:
├── messages (1)
│ ├── en.json
│ └── ...
├── next.config.mjs (2)
└── src
├── i18n.ts (3)
├── middleware.ts (4)
└── app
└── [locale]
├── layout.tsx (5)
└── page.tsx (6)2. Configurando next-intl (next.config)
El antiguo wrapper withIntl() ya no existe. La integración actual usa la fábrica createNextIntlPlugin de next-intl/plugin, que conecta tu configuración de i18n por petición con los Server Components:
// next.config.mjs (módulos ES)
import createNextIntlPlugin from 'next-intl/plugin';
const withNextIntl = createNextIntlPlugin();
const nextConfig = {};
export default withNextIntl(nextConfig);Si tu proyecto usa CommonJS para la configuración de Next.js:
// next.config.js (CommonJS)
const createNextIntlPlugin = require('next-intl/plugin');
const withNextIntl = createNextIntlPlugin();
/** @type {import('next').NextConfig} */
const nextConfig = {};
module.exports = withNextIntl(nextConfig);3. Creando Archivos de Traducción
Crea archivos de traducción para cada idioma que desees admitir en tu aplicación. Por ejemplo, puedes tener archivos como en.json para inglés y es.json para español, ubicados en un directorio como public/locales.
Ejemplo:
{
"Index": {
"title": "¡Hola mundo!"
}
}4. Configurando next.config.mjs
Ahora, configura el plugin que crea un alias para proporcionar tu configuración de i18n (especificada en el siguiente paso) a los Componentes del Servidor.
Si estás utilizando módulos de ECMAScript para tu configuración de Next.js, puedes usar el plugin de la siguiente manera:
/** @type {import('next').NextConfig} */
import createNextIntlPlugin from 'next-intl/plugin';
const withNextIntl = createNextIntlPlugin();
const nextConfig = {};
export default withNextIntl(nextConfig);Si estás utilizando CommonJS para tu configuración de Next.js, puedes usar el plugin de la siguiente manera:
const createNextIntlPlugin = require('next-intl/plugin');
const withNextIntl = createNextIntlPlugin();
/** @type {import('next').NextConfig} */
const nextConfig = {};
module.exports = withNextIntl(nextConfig);5. Configurando i18n.ts
next-intl crea una configuración una vez por solicitud. Aquí puedes proporcionar mensajes y otras opciones dependiendo del idioma del usuario.
// src/i18n.ts
import {notFound} from 'next/navigation';
import {getRequestConfig} from 'next-intl/server';
// Se puede importar desde una configuración compartida
const locales = ['en', 'es'];
export default getRequestConfig(async ({locale}) => {
// Valida que el parámetro `locale` entrante sea válido
if (!locales.includes(locale as any)) notFound();
return {
messages: (await import(`../messages/${locale}.json`)).default
};
});🚨 ¿Puedo mover este archivo a otro lugar?
Este archivo es compatible de forma predeterminada tanto en la carpeta src como en la raíz del proyecto con las extensiones .ts, .tsx, .js y .jsx.
Si prefieres mover este archivo a otro lugar, puedes proporcionar una ruta opcional al plugin:
const withNextIntl = createNextIntlPlugin(
// Especifica una ruta personalizada aquí
'./somewhere/else/i18n.ts'
);6. Configurando middleware.ts
El middleware coincide con un idioma para la solicitud y maneja las redirecciones y reescrituras en consecuencia.
//src/middleware.ts
import createMiddleware
from 'next-intl/middleware';
export default createMiddleware({
// Una lista de todos los idiomas admitidos
locales: ['en', 'es'],
// Se utiliza cuando no coincide ningún idioma
defaultLocale: 'en'
});
export const config = {
// Coincide solo con nombres de ruta internacionalizados
matcher: ['/', '/(es|en)/:path*']
};7. Configurando app/[locale]/layout.tsx
El locale que coincidió con el middleware está disponible a través del parámetro locale y se puede utilizar para configurar el idioma del documento.
//app/[locale]/layout.tsx
export default function LocaleLayout({
children,
params: {locale}
}: {
children: React.ReactNode;
params: {locale: string};
}) {
return (
<html lang={locale}>
<body>{children}</body>
</html>
);
}Usando Traducciones
¡Utiliza traducciones en los componentes de tu página o en cualquier otro lugar!
//app/[locale]/page.tsx
import {useTranslations} from 'next-intl';
export default function Index() {
const t = useTranslations('Index');
return < h1 >{t('title')}</ h1 >;
}Comienza a Internacionalizar tu Aplicación Next.js Hoy Mismo
Con estos sencillos pasos, puedes añadir fácilmente soporte de internacionalización a tu proyecto de Next.js utilizando next-intl. Ahora, tu aplicación estará lista para alcanzar una audiencia global y proporcionar una experiencia localizada y personalizada.
¡No esperes más y comienza a internacionalizar tu aplicación hoy mismo!
Recuerda seguir la documentación para más detalles