Enrutamiento basado en idioma

Configuración del enrutamiento basado en idioma en Next.js (App Router)

Problema

Una URL única, como /about, es inherentemente ambigua cuando una aplicación soporta múltiples idiomas. Los usuarios que visitan esta URL reciben contenido en un idioma predeterminado, pero no tienen forma de enlazar o guardar como favorito una versión de esa página en un idioma diferente. Esta ambigüedad confunde a los motores de búsqueda, que pueden no indexar todas las versiones de idioma o pueden mezclarlas.

Solución

Incorpora un identificador de idioma directamente en la ruta de la URL, como /en/about o /fr/about. Esto hace que cada ruta sea única para un idioma específico, resolviendo la ambigüedad tanto para usuarios como para motores de búsqueda.

Pasos

1. Crea un segmento de idioma dinámico

En el App Router de Next.js, gestionas el enrutamiento de idioma creando una carpeta de segmento dinámico en la raíz de tu directorio app. Crea una nueva carpeta llamada [lang] dentro de app y mueve tu archivo principal page.tsx dentro de ella.

// app/[lang]/page.tsx

export default function Home({ params }: { params: { lang: string } }) {
  return (
    <div>
      <h1>Home page</h1>
      <p>Current language: {params.lang}</p>
    </div>
  );
}

Esta carpeta [lang] captura la primera parte de la URL (por ejemplo, 'en' o 'fr') y la pasa como una propiedad lang dentro del objeto params a tu componente de página. Ahora puedes acceder a tu página en URLs como /en o /fr.

2. Actualiza el layout raíz

Tu layout.tsx raíz también debe moverse dentro de la carpeta app/[lang]. También recibirá el parámetro lang, que debes usar para establecer el atributo lang en la etiqueta <html> para accesibilidad y SEO.

// app/[lang]/layout.tsx

export default function RootLayout({
  children,
  params,
}: {
  children: React.ReactNode;
  params: { lang: string };
}) {
  return (
    <html lang={params.lang}>
      <body>{children}</body>
    </html>
  );
}

Este layout ahora envuelve todas las páginas dentro de un idioma específico. Establecer el atributo lang aquí informa a los navegadores en qué idioma está el contenido de la página.

3. Definir idiomas compatibles

Para indicarle a Next.js qué segmentos de idioma son válidos, puedes exportar una función generateStaticParams desde el layout raíz. Esto permite que Next.js genere estáticamente estas rutas en tiempo de compilación.

// app/[lang]/layout.tsx

export async function generateStaticParams() {
  return [{ lang: 'en' }, { lang: 'es' }, { lang: 'fr' }];
}

export default function RootLayout({
  children,
  params,
}: {
  children: React.ReactNode;
  params: { lang: string };
}) {
  return (
    <html lang={params.lang}>
      <body>{children}</body>
    </html>
  );
}

Esta función informa a Next.js que tu aplicación es compatible con /en, /es y /fr. Las solicitudes para otras rutas (como /de) resultarán en una página 404 Not Found.

4. Añadir rutas anidadas

Todas las demás páginas de tu aplicación se crean ahora dentro de la carpeta [lang]. Por ejemplo, para crear una página 'about', añadirías app/[lang]/about/page.tsx.

// app/[lang]/about/page.tsx

export default function AboutPage({ params }: { params: { lang: string } }) {
  return (
    <div>
      <h1>About page</h1>
      <p>Current language: {params.lang}</p>
    </div>
  );
}

Este archivo crea automáticamente rutas que son accesibles en /en/about, /es/about y /fr/about. El parámetro lang está disponible en todas las páginas si lo necesitas para obtener el contenido traducido correcto.