La internacionalización (i18n) es un aspecto clave cuando queremos que nuestras aplicaciones estén disponibles en múltiples idiomas y culturas. Next.js 13 facilita la internacionalización utilizando el App Router, lo que permite gestionar rutas, contenidos y configuraciones específicas para diferentes idiomas.

En este capítulo, aprenderemos a implementar i18n en una aplicación de Next.js 13 utilizando el App Router.

Configuración básica de i18n en Next.js

Para comenzar con la internacionalización en Next.js, necesitamos configurar los idiomas en el archivo next.config.js. Podemos definir los idiomas que soportará la aplicación de la siguiente manera:

javascript

Con esta configuración, Next.js generará rutas como /es/about o /fr/contact para cada página.

Definir Rutas Multilingües

Después de configurar los idiomas en next.config.js, podemos definir páginas multilingües utilizando el App Router. La estructura de rutas se manejará automáticamente según el idioma seleccionado.

Aquí tienes un ejemplo de cómo crear una página de "about" en diferentes idiomas:

javascript

El parámetro locale se captura directamente desde la URL, lo que permite personalizar el contenido de la página según el idioma del usuario.

Cambiar de Idioma Dinámicamente

Next.js también permite cambiar dinámicamente entre diferentes idiomas en la misma aplicación. Podemos crear un selector de idiomas para que el usuario elija su idioma preferido.

javascript

El componente LanguageSwitcher detecta el idioma actual de la página y permite cambiar entre los idiomas disponibles.

Cargar Contenidos Localizados

Para manejar contenido más complejo, podemos almacenar los archivos de traducción en carpetas dedicadas para cada idioma. A continuación, un ejemplo de cómo estructurar las traducciones en archivos JSON:

json

json

Luego, podemos cargar estos archivos de traducción según el idioma seleccionado:

javascript

Este enfoque modular nos permite mantener las traducciones separadas y organizadas por idioma.

Uso de librerías para i18n

Además de las capacidades nativas de Next.js, también podemos utilizar librerías especializadas como react-i18next para manejar la traducción en aplicaciones más complejas. Esta librería permite una gestión avanzada de idiomas y es compatible con Next.js.

Instalación de react-i18next

Para instalar y configurar react-i18next, seguimos estos pasos:

bash

Una vez instalada, configuramos el proveedor de i18n:

javascript

La librería react-i18next ofrece soporte para claves de traducción, interpolación de variables y más opciones avanzadas de gestión de idiomas.

Conclusión

La internacionalización en Next.js 13 es muy fácil de implementar y ofrece varias formas de gestionar el contenido en diferentes idiomas. Podemos aprovechar tanto las capacidades nativas del framework como herramientas externas para manejar traducciones y personalizar la experiencia del usuario según su ubicación o idioma.