Cómo implementar enrutamiento basado en localización en Next.js (Pages Router) v16

Problema

Al construir una aplicación multilingüe, una decisión fundamental da forma a todo lo demás: ¿cómo sabrá la aplicación qué idioma mostrar? Sin un mecanismo explícito, la URL /about se vuelve ambigua—podría representar contenido en cualquier idioma. Los usuarios no pueden compartir enlaces a versiones específicas de idioma, y los motores de búsqueda tienen dificultades para entender qué versión pertenece a qué audiencia. Esta ambigüedad crea problemas tanto para la experiencia del usuario como para el SEO, ya que no hay una manera clara de identificar o marcar contenido en un idioma particular.

Solución

Coloca un identificador de idioma directamente en la ruta URL configurando el soporte de enrutamiento i18n integrado de Next.js. Declara los idiomas que quieres soportar y un idioma predeterminado en tu configuración de Next.js. Next.js manejará automáticamente el enrutamiento, haciendo disponibles rutas como /fr/about y /nl-NL/about, mientras que el idioma predeterminado no tiene prefijo. Esto hace que cada ruta sea única para un idioma específico, eliminando la ambigüedad tanto para usuarios como para motores de búsqueda.

Pasos

1. Añadir configuración i18n a next.config.js

Añade la configuración i18n a tu archivo next.config.js para declarar qué idiomas soporta tu aplicación.

module.exports = {
  i18n: {
    locales: ["en-US", "fr", "nl-NL"],
    defaultLocale: "en-US",
  },
};

Los idiomas son Identificadores de Localización UTS, un formato estandarizado para definir idiomas, generalmente compuesto por un idioma, región y script separados por un guion. El defaultLocale se utiliza cuando se visita una ruta sin prefijo de idioma.

2. Acceder a la información de idioma en las páginas

Utiliza el hook useRouter() para acceder a la información de idioma en tus componentes de página.

import { useRouter } from "next/router";

export default function AboutPage() {
  const router = useRouter();
  const { locale, locales, defaultLocale } = router;

  return (
    <div>
      <h1>About Us</h1>
      <p>Current locale: {locale}</p>
    </div>
  );
}

La propiedad locale contiene el idioma actualmente activo, locales contiene todos los idiomas configurados, y defaultLocale contiene el idioma predeterminado configurado.

3. Acceder al idioma en funciones de obtención de datos

Al pre-renderizar páginas con getStaticProps o getServerSideProps, la información del idioma se proporciona en el contexto.

import { GetStaticProps } from "next";

export const getStaticProps: GetStaticProps = async (context) => {
  const { locale } = context;

  const messages = await import(`../messages/${locale}.json`);

  return {
    props: {
      messages: messages.default,
    },
  };
};

Esto te permite cargar datos específicos del idioma en el momento de la compilación o de la solicitud según el idioma activo.

4. Enlace entre idiomas

Usa next/link con una propiedad locale para cambiar a un idioma diferente.

import Link from "next/link";

export default function LanguageSwitcher() {
  return (
    <nav>
      <Link href="/about" locale="en-US">
        English
      </Link>
      <Link href="/about" locale="fr">
        Français
      </Link>
      <Link href="/about" locale="nl-NL">
        Nederlands
      </Link>
    </nav>
  );
}

Si no se proporciona la propiedad locale, se utiliza el idioma activo actual durante las transiciones del cliente. La propiedad locale permite a los usuarios cambiar de idioma mientras permanecen en la misma página lógica.

5. Generar rutas estáticas para todos los idiomas

Al utilizar getStaticPaths, los idiomas configurados se proporcionan en el parámetro de contexto bajo locales y el defaultLocale configurado bajo defaultLocale.

import { GetStaticPaths } from "next";

export const getStaticPaths: GetStaticPaths = async (context) => {
  const { locales } = context;

  const paths = locales.flatMap((locale) => [
    { params: { slug: "getting-started" }, locale },
    { params: { slug: "advanced" }, locale },
  ]);

  return {
    paths,
    fallback: false,
  };
};

Esto asegura que todas las versiones de idioma de tus páginas dinámicas se pre-rendericen durante la compilación.