Enrutamiento basado en idiomas

Configuración de enrutamiento basado en idiomas en Next.js (App Router)

Problema

Una única URL, como /about, es inherentemente ambigua cuando una aplicación admite varios 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

Incorporar 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. Crear un segmento de idioma dinámico

En el App Router de Next.js, se maneja el enrutamiento de idiomas 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 a 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. Actualizar 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. Define los 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 a Next.js generar estáticamente estas rutas durante la 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 admite /en, /es y /fr. Las solicitudes para otras rutas (como /de) resultarán en una página 404 Not Found.

4. Añade rutas anidadas

Todas las demás páginas de tu aplicación ahora se crean 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 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.