Internacionalización en NextJS: Middleware y Rutas Dinámicas

Cursos Empresas Blog Live Conf Precios

Contenido del curso

Fundamentos

Haciendo tu proyecto más rápido

Consumiendo datos de manera eficiente

Escalabilidad y personalización

Características Adicionales y Herramientas

Tomar examen

Internacionalización en NextJS: Middleware y Rutas Dinámicas

Resumen

La internacionalización en aplicaciones web es crucial para garantizar una experiencia fluida para usuarios de distintos idiomas. Aquí exploramos cómo implementar internacionalización desde cero en Next.js, utilizando middleware y JavaScript nativo, para redirigir usuarios según su idioma configurado sin depender de librerías externas.

¿Cómo interceptar y procesar solicitudes en Next.js con middleware?

El middleware en Next.js permite interceptar solicitudes entre el cliente y el servidor.
Podemos usar el objeto request.nextUrl para analizar la URL solicitada y tomar decisiones como redirecciones o bloqueos.
La lógica incluye:
- Ignorar solicitudes fuera de la subpágina destinada a la internacionalización (/i18n en este caso).
- Permitir el paso directo si la URL ya contiene un identificador de idioma soportado (e.g., /i18n/es o /i18n/en).
- Redirigir solicitudes sin identificador de idioma al idioma más adecuado según la configuración del usuario.

¿Cómo determinar el idioma preferido del usuario?

Usamos el encabezado HTTP Accept-Language, que los navegadores envían indicando los idiomas preferidos del usuario.
Con la librería negotiator y format.js, se pueden:
- Extraer los idiomas aceptados por el navegador.
- Comparar con los idiomas soportados por la aplicación (es, en).
- Seleccionar el idioma por defecto (es) en caso de que no haya coincidencias.

¿Cómo se estructura la lógica para redirecciones en el middleware?

Ignorar rutas irrelevantes:
- Verificar si la ruta solicitada comienza con /i18n.
- Si no, dejar que la solicitud continúe sin modificaciones.
Permitir rutas con idioma configurado:
- Analizar si la URL contiene un idioma soportado.
- Si es positivo, permitir que la solicitud continúe.
Redirigir rutas sin idioma configurado:
- Determinar el idioma usando el encabezado Accept-Language.
- Modificar el pathname de la solicitud para incluir el idioma.
- Realizar la redirección basada en esta nueva URL.

¿Cómo probar la implementación?

Cambiar el idioma preferido en las configuraciones del navegador.
Acceder a la página raíz y verificar la redirección automática al idioma correspondiente.
Probar con idiomas no soportados para asegurar que se asigna el idioma por defecto.

Comentarios

Juan Diego Mejia Maestre

student

🌍 Internacionalización (i18n) con Middleware

La internacionalización no es solo traducir texto, es adaptar la ruta y el contenido de la app según la procedencia del usuario. Hacerlo mediante Middleware permite redirecciones instantáneas sin destellos de contenido en el idioma equivocado.

🛣️ El Flujo de Intercepción

El Middleware actúa como un "peaje" que analiza cada petición antes de que llegue a tus páginas.

Detección: El navegador envía el header Accept-Language (ej. es-ES,es;q=0.9,en;q=0.8).
Negociación: Comparamos los idiomas que el usuario quiere vs. los que nuestra app soporta.
Redirección: Si el usuario entra a /contacto pero prefiere inglés, el middleware lo mueve silenciosamente a /en/contacto.

🛠️ Implementación: Lógica de Redirección

Para no entrar en un bucle infinito, el middleware debe seguir estas reglas lógicas:

Excluir Assets: No procesar imágenes, fuentes o archivos de public.
Verificar Prefijo: Si la URL ya tiene /es o /en, no hacer nada.
Fallback: Si el idioma del navegador no coincide con los nuestros, usar el idioma por defecto (ej. es).

Ejemplo de lógica en middleware.ts:

import { NextResponse } from 'next/server';
import type { NextRequest } from 'next/server';

const locales = ['en', 'es'];

export function middleware(request: NextRequest) {
  const { pathname } = request.nextUrl;

  // 1. Verificar si el idioma ya está en la URL
  const pathnameHasLocale = locales.some(
    (locale) => pathname.startsWith(`/${locale}/`) || pathname === `/${locale}`
  );

  if (pathnameHasLocale) return;

  // 2. Si no está, determinar el idioma y redirigir
  const locale = 'es'; // Aquí usarías 'negotiator' para detectar el idioma real
  request.nextUrl.pathname = `/${locale}${pathname}`;

  return NextResponse.redirect(request.nextUrl);
}

📚 Datos Extra para un Nivel Avanzado

Dictionary Pattern: No hardcodees textos. Crea archivos JSON (es.json, en.json) y carga solo el necesario en tus Server Components usando un getDictionary(lang).
SEO & hreflang: Next.js permite añadir etiquetas link rel="alternate" hreflang="..." automáticamente para que Google sepa que tienes versiones en varios idiomas y no lo penalice como contenido duplicado.
Librerías recomendadas: Aunque hacerlo nativo es excelente para aprender, en proyectos grandes (como Código Limpio) podrías usar next-intl o i18next para manejar fechas, números y monedas fácilmente.

💡 Tip de Carrera

Saber configurar i18n manualmente con Middleware demuestra que entiendes el ciclo de vida de una petición HTTP. Es una habilidad muy valorada para roles de Senior o Arquitecto de Software, ya que impacta directamente en el SEO global y en la experiencia de usuario internacional.

Josue David

student

Tengo una duda. Si se quisiera aplicar intenacionalizacion a todo el sitio web, entonces no habria que restringirlo solo a la pagina de "i18n". Solo seria de remover dicha condicion que se agrego en el primer punto y funcionaria en general, ¿no?

Bryan Aranda

student

Donde se coloca este archivo ?

Use the file middleware.ts (or .js) in the root of your project to define Middleware. For example, at the same level as pages or app, or inside src if applicable.

David Behar

student

Lo que está diciendo el texto que colocas es que se debe de colocar en la base del proyecto, en este caso el profe lo pone en /middleware.ts, que está fuera del src.

Servio Quezada

student

Buenisimo, otro buen ejemplo es manejar el acceso a secciones en especifico de la pagina y quieres que un tipo de usuario sea el unico que pueda verlas.

import { NextResponse } from 'next/server';
import type { NextRequest } from 'next/server';

const locales = ['en', 'es'];

export function middleware(request: NextRequest) {
  const { pathname } = request.nextUrl;

  // 1. Verificar si el idioma ya está en la URL
  const pathnameHasLocale = locales.some(
    (locale) => pathname.startsWith(`/${locale}/`) || pathname === `/${locale}`
  );

  if (pathnameHasLocale) return;

  // 2. Si no está, determinar el idioma y redirigir
  const locale = 'es'; // Aquí usarías 'negotiator' para detectar el idioma real
  request.nextUrl.pathname = `/${locale}${pathname}`;

  return NextResponse.redirect(request.nextUrl);
}

Fundamentos

Desarrollo Web Escalable con Next.js: Optimización y SEO Integrado

Novedades y Cambios Clave en Next.js 15

Migración de Next.js 11 a 15: Guía Paso a Paso

Haciendo tu proyecto más rápido

Creación de React Server Components con Next.js y PostgreSQL

Integración de React Server Components con PostgreSQL

Consumiendo datos de manera eficiente

Consumo de datos en servidores con ORM Drizzle y TypeScript

Consumo de APIs en Next.js con ReactQuery y useEffect

Optimización del Consumo de Datos en Aplicaciones Web

Implementación de Suspense y Streaming en React y Next.js

Escalabilidad y personalización