Internacionalización i18n en Next.js desde el Día 1

Paso 1: Instalar Dependencias de i18n

Necesitarás instalar las siguientes bibliotecas para manejar i18n en Next.js:

npm install next-i18next i18next react-i18next

Paso 2: Configurar next.config.js

Abre el archivo next.config.js y agrega la configuración de i18n:

module.exports = { i18n: { locales: ['en', 'es'], defaultLocale: 'en', }, }

Esto indica que tu aplicación soportará inglés como idioma por defecto y español como segundo idioma.

Paso 3: Configurar next-i18next.config.js

Crea un archivo next-i18next.config.js en la raíz de tu proyecto con la siguiente configuración:

module.exports = { i18n: { defaultLocale: 'en', locales: ['en', 'es'], }, }

Paso 4: Crear Archivos de Traducción

Crea un directorio /public/locales y dentro de este, crea subdirectorios para cada idioma (en, es). Dentro de cada subdirectorio, agrega archivos JSON que contengan las traducciones correspondientes.

Paso 5: Configurar el Proveedor de i18n

En tu archivo _app.js, importa y envuelve tu aplicación con el proveedor de i18n:

import { appWithTranslation } from 'next-i18next'; export default appWithTranslation(MyApp);

Paso 6: Uso de Hook useTranslation

Dentro de tus componentes, utiliza el hook useTranslation para acceder a las traducciones:

import { useTranslation } from 'next-i18next'; const { t } = useTranslation('common'); return <h1>{t('welcome')}!</h1>;

Paso 7: Verificar la Configuración

Inicia tu aplicación y verifica que el contenido se muestre correctamente en ambos idiomas. Puedes cambiar el idioma modificando el idioma por defecto o configurando rutas específicas.

Paso 8: Despliegue en Producción

Una vez verificado, despliega tu aplicación en plataformas como Vercel o Netlify, que soportan Next.js nativamente, asegurándote de que la configuración de i18n esté correctamente configurada en producción.