i18n en el App Router de Next.js con next-intl
Este tutorial explica una configuración de i18n limpia para el App Router usando next-intl.
Qué obtienes
- Prefijos de idioma
/eny/fr - Mensajes en
messages/en.jsonymessages/fr.json - Un proxy (Next.js 16) para gestionar la negociación de idioma
- Una gran experiencia de desarrollo: mensajes fuertemente tipados, estructura clara, enrutamiento predecible
Estructura recomendada
app/[locale]/...para las rutas localizadasmessages/{locale}.jsonpara las cadenas de textoi18n/request.tspara configurarnext-intl
Errores comunes
- Olvidar el archivo de proxy (o usar el middleware obsoleto)
- No proporcionar un idioma de respaldo por defecto
- Mezclar incorrectamente las traducciones de servidor y de cliente
Consejos prácticos
- Mantén los mensajes pequeños y organizados (agrupa por funcionalidad:
nav.*,contact.*,sections.*) - Usa un único endpoint de API
Contacty reenvía a los proveedores (Formspree, servicio de correo, CRM)
Si quieres, podemos añadir claves de mensaje tipadas y una regla de lint para detectar traducciones faltantes.
Comandos rápidos
npm install
npm run dev