Introducción a la Internacionalización (i18n) con Intlayer y Next.js usando Page Router

¿Qué es Intlayer?

Intlayer es una innovadora biblioteca de internacionalización (i18n) de código abierto diseñada para simplificar el soporte multilingüe en aplicaciones web modernas. Intlayer se integra perfectamente con el marco Next.js, incluyendo su Page Router tradicional.

Con Intlayer, puedes:

• Gestionar fácilmente traducciones utilizando diccionarios declarativos a nivel de componente.
• Localizar dinámicamente metadatos, rutas y contenido.
• Asegurar soporte para TypeScript con tipos autogenerados, mejorando la autocompletación y la detección de errores.
• Aprovechar características avanzadas, como la detección dinámica de idiomas y el cambio entre ellos.

Nota: Intlayer es compatible con Next.js 12, 13, 14 y 15. Si estás utilizando el App Router de Next.js, consulta la guía para App Router. Para Next.js 15, sigue esta guía.

Guía paso a paso para configurar Intlayer en una aplicación Next.js utilizando Page Router

Paso 1: Instalar dependencias

Instala los paquetes necesarios utilizando tu gestor de paquetes preferido:

Paso 2: Configura tu proyecto

Crea un archivo de configuración para definir los idiomas admitidos por tu aplicación:

Para una lista completa de opciones de configuración disponibles, consulta la documentación de configuración.

Paso 3: Integra Intlayer con la configuración de Next.js

Modifica tu configuración de Next.js para incorporar Intlayer:

Paso 4: Configura el Middleware para la detección de idioma

Configura middleware para detectar y gestionar automáticamente el idioma preferido del usuario:

Paso 5: Define rutas dinámicas para idiomas

Implementa rutas dinámicas para servir contenido localizado basado en el idioma del usuario.

1. Crea páginas específicas por idioma:

   Renombra el archivo principal de tu página para incluir el segmento dinámico [locale].

   bash

   1mv src/pages/index.tsx src/pages/[locale]/index.tsx

2. Actualiza _app.tsx para gestionar la localización:

   Modifica tu _app.tsx para incluir proveedores de Intlayer.

   tsx

   1// src/pages/_app.tsx 2 3import { AppProps } from "next/app"; 4import { IntlayerClientProvider } from "next-intlayer"; 5import { IntlayerServerProvider } from "next-intlayer/server"; 6import intlayerConfig from "../../intlayer.config"; 7 8function MyApp({ Component, pageProps }: AppProps) { 9 const { locale } = pageProps; 10 11 return ( 12 <IntlayerClientProvider locale={locale}> 13 <Component {...pageProps} /> 14 </IntlayerClientProvider> 15 ); 16} 17 18export default MyApp;

3. Configura getStaticPaths y getStaticProps:

   En tu archivo [locale]/index.tsx, define los paths y props para gestionar diferentes idiomas.

   tsx

   1// src/pages/[locale]/index.tsx 2 3import { GetStaticPaths, GetStaticProps } from "next"; 4import { useIntlayer } from "next-intlayer"; 5import { Locales } from "intlayer"; 6 7const HomePage = () => { 8 return <div>{/* Tu contenido aquí */}</div>; 9}; 10 11export const getStaticPaths: GetStaticPaths = async () => { 12 const locales = [Locales.ENGLISH, Locales.FRENCH, Locales.SPANISH]; // Agrega aquí tus idiomas 13 14 const paths = locales.map((locale) => ({ 15 params: { locale }, 16 })); 17 18 return { paths, fallback: false }; 19}; 20 21export const getStaticProps: GetStaticProps = async ({ params }) => { 22 const locale = params?.locale as string; 23 24 return { 25 props: { 26 locale, 27 }, 28 }; 29}; 30 31export default HomePage;