Autor

Lucía Aldana Castillo

Internacionalización en Next.js 13

La necesidad de incorporar internacionalización es una consideración fundamental en muchos proyectos web. En este artículo, exploraremos una forma efectiva de incorporar internacionalización a tu proyecto, sin depender de la conocida librería i18next.

Ya sea que estés buscando respuestas a consultas frecuentes sobre cómo implementar la internacionalización en tus proyectos o simplemente deseas una alternativa a i18next, has llegado al lugar adecuado. A lo largo de esta guía, te presento una solución que simplificará tu código y reducirá la cantidad de dependencias, lo que resulta especialmente valioso en proyectos más pequeños.

I18next sigue siendo una elección sólida para proyectos grandes y complejos que requieren funciones avanzadas de internacionalización, si lo necesitas te dejo esta guía Internacionalización en NextJs-13 con I18Next para integrar I18Next a tu proyecto con NextJs 13. Pero, en otras ocaciones, podemos lograr los mismos resultados de manera más sencilla para proyectos más modestos. Así que, si estás listo para descubrir cómo internacionalizar tu aplicación Next.js 13 de manera efectiva y sin las complejidades de i18next, ¡continúa leyendo!

Crear el proyecto

Empecemos creando un proyecto con Next.js 13. Si ya tienes uno, puedes saltarte este paso.

npx create-next-app@latest
  
// What is your project named? … next13-internationalization
// Would you like to use TypeScript? … No / Yes ✅
// Would you like to use ESLint? … No / Yes ✅
// Would you like to use Tailwind CSS? … No / Yes ❌
// Would you like to use src/ directory? … No / Yes ✅
// Would you like to use App Router? (recommended) … No / Yes ✅
// Would you like to customize the default import alias? … No / Yes ❌

cd next13-internationalization

Instalar dependencias

npm install @formatjs/intl-localematcher negotiator
npm i --save-dev @types/negotiator

Estos dos módulos nos ayudarán a adapatarnos a las preferencias del usuario al seleccionar automáticamente el idioma más apropiado para el usuario en función de las preferencias de idioma proporcionadas en las cabeceras HTTP y la configuración de internacionalización que definiremos.

Enrutamiento

1. Nueva estructura

Crearemos la nueva estructura del proyecto donde usaremos el idioma para crear rutas dinámicas.

Estas rutas se crean agregando segmentos dinámicos a partir de datos dinámicos que se completan en el momento de la solicitud o se renderizan previamente en el momento de la compilación.

Este segmento dinámico lo creamos colocando el nombre de la carpeta entre corchetes, que en nuestro caso será [lng], y lo tendremos disponible como parámetros en layout, page, route y generateMetadata.

En este proyecto usaré los idiomas español e inglés, pero puedes agregar tantos como quieras.

La ruta de nuestro proyecto se verá cómo:

Ruta => app/[lng]/page.tsx

URL => http://localhost:3000/[lng] => [lng] será reemplazado por el lenguaje que usemos.
por ejemplo http://localhost:3000/es o http://localhost:3000/en donde 'es' y 'en' son nuestros datos dinámicos para la url en español e inglés respectivamente.

Parámetros => {lng: ['es', 'en']}

La estructura quedaría de esta forma:

.
src
  |__ app
      |__[lng]
          |__second-page
              |__page.tsx
          |__layout.tsx
          |__page.tsx

2. Creamos un archivo lng-config.ts:

En este archivo definimos los idiomas que vamos a utilizar y el idioma por defecto.

También definimos las secciones que tendrán los diccionarios de traducciones que crearemos, por ejemplo podemos definir por pages: 'home', 'second-page'. Esta división de secciones nos ayudará a mantener una estructura más clara y limpia para manejar las traducciones.

// src/lng-config.ts
  
  export const lngConfig = {
  defaultLocale: 'en',
  locales: ['en', 'es'],
  sections: {
    home: 'home',
    second_page: 'second-page',
  },
} as const;

export type Locale = (typeof lngConfig)['locales'][number];

3. Creamos un archivo middleware.ts:

Aqui creamos un middleware para utilizar el lenguaje del navegador del usuario.

Si cambia su lenguaje preferido, cambiará el 'accept-language' que definimos en headers.

// src/middleware.ts
  
import { NextResponse } from 'next/server';
import type { NextRequest } from 'next/server';
import { lngConfig } from './i18n-config';
import { match as matchLocale } from '@formatjs/intl-localematcher';
import Negotiator from 'negotiator';

function getLocale(request: NextRequest): string | undefined {

const negotiatorHeaders: Record<string, string> = {};
request.headers.forEach((value, key) => (negotiatorHeaders[key] = value));

const locales: string[] = lngConfig.locales;

let languages = new Negotiator({ headers: negotiatorHeaders }).languages(locales);

const locale = matchLocale(languages, locales, lngConfig.defaultLocale);

return locale;
}

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

const pathnameIsMissingLocale = lngConfig.locales.every(
(locale) => !pathname.startsWith(`/${locale}/`) && pathname !== `/${locale}`
);

if (pathnameIsMissingLocale) {
const locale = getLocale(request);

    return NextResponse.redirect(new URL(`/${locale}${pathname.startsWith('/') ? '' : '/'}${pathname}`, request.url));

}
}

export const config = {
  matcher: ['/((?!api|_next/static|_next/image|favicon.ico).*)'],
};

4. Creamos el diccionario de traducciones que vamos a utilizar:

El diccionario es la base de nuestra internacionalización que nos permite ofrecer la experiencia de usuario en diferentes idiomas.

En una carpeta llamada dictionaries, organizaremos los archivos de internacionalización de una manera estructurada. Creamos carpetas dentro de dictionaries con el nombre de un idioma específico, como 'es' para español, 'en' para inglés, como definimos en locales en el archivo lng-config.ts.

Dentro de cada una de estas carpetas de idioma, crearemos los archivos .json que contendrán las traducciones para cada sección que también definimos en el archivo lng-config.ts, como 'home' y 'second-page'. Todos los json deben respetar la misma estructura en cada carpeta.

// la carpeta `en` y `es` serán el diccionario para las traducciones en inglés y español respectivamente.
// Dentro tendremos los json que serán cada sección que definimos en lng-config.ts:

|__ src
    |__dictionaries
        |__en
            |__home.json
            |__second-page.json
        |__es
            |__home.json
            |__second-page.json

5. Creamos la función para traer el diccionario que necesitamos según el lenguaje seleccionado:

Aquí tendremos una función que recibe el lenguaje que estamos utilizando y la sección que solicitamos. Esto devuelve el archivo json que creamos en dictionaries que corresponde a ese lenguaje y sección respectivamente.

import 'server-only';
import { lngConfig, Locale } from './lng-config';

type DictionaryFunction = (section: string) => Promise<any>;

const dictionaries: { [key: string]: DictionaryFunction } = {};

lngConfig.locales.forEach((language) => {
dictionaries[language] = (section: string) =>
import(`./dictionaries/${language}/${section}.json`).then((module) => module.default);
});

// Agregar una función para el idioma predeterminado ('en') que no necesita 'section'
dictionaries.en = (section: string) => import(`./dictionaries/en/${section}.json`).then((module) => module.default);

export const getDictionary = async (locale: Locale, section: string) => {
  const dictionaryFunction = dictionaries[locale];
  if (dictionaryFunction) {
    return dictionaryFunction(section);
  } else {
    // Si el idioma no está disponible, devolver el diccionario en inglés por defecto
    return dictionaries.en(section);
  }
};

6. En el archivo layout.tsx agregamos los lenguajes:

Ahora que ya tenemos todas las configuraciones hechas y nuestros diccionarios definidos, utilizamos generateStaticParams para añadir el idioma al HTML.

import { Inter } from 'next/font/google';
import { lngConfig } from '../../lng-config';
import '../globals.css';

const inter = Inter({ subsets: ['latin'] });

export async function generateStaticParams() {
  return lngConfig.locales.map((locale) => ({ lang: locale }));
}

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

export const metadata = {
  title: 'i18n within app directory - Vercel Examples',
  description: 'How to do i18n in Next.js 13 within app directory',
};

7. Usar las traducciones en Server Component:

El componente Home utiliza la función getDictionary para obtener las traducciones y configuraciones necesarias para mostrar contenido multilingüe en nuestra aplicación. Para asegurarnos de que la aplicación funcione de manera fluida y que no se bloquee mientras espera que las traducciones se carguen, utilizamos async/await al llamar a getDictionary.

La función getDictionary requiere dos parámetros:

El lenguaje: estará disponible por parámetros, cómo definimos en el layout.tsx.
La sección: la importamos desde la definición de sections en el archivo lng-config.ts para evitar errores tipográficos.

Entonces getDictionary me devolverá el archivo json de la sección que indicamos y del diccionario que estemos utilizando.

 // src/app/[lng]/page.tsx

import Link from 'next/link';
import { getDictionary } from '../../get-dictionary';
import { lngConfig, Locale } from '../../lng-config';
import styles from './page.module.css';

const Home = async ({ params: { lang } }: { params: { lang: Locale } }) => {
  const dictionary = await getDictionary(lang, lngConfig.sections.home);

  return (
    <main className={styles.main}>
      <div className={styles.description}>
        <p>{dictionary.note}</p>
      </div>
    </main>
  );
};

export default Home;

// http://localhost:3000 || http://localhost:3000/es || http://localhost:3000/en

// src/dictionaries/es/home.json
  
  {
    "note": "Esta es la página de inicio"
  }
  
// src/dictionaries/en/home.json
  
  {
    "note": "This is the home page"
  }

8. Usar las traducciones en Client Component:

Un Client Component recibirá las traducciones por parámetro, directamente el String que va a mostrar.

Recordar agregar en el componente el type para este parámetro, ejemplo:

// type del parámetro dictionary que recibe el client component:
  
dictionary: Record<string, string>

// Desde un server component padre:

const dictionary = await getDictionary(lang, i18n.sections.home);

<CustomClientComponent lng={lng} dictionary={dictionary.note} />

9. Crear un switch de idioma:

Para cambiar de idioma, lo que hacemos es usar la ruta dinámica que creamos con la carpeta [lng]. Entonces debemos navegar a la ruta del idioma que queramos.

El componente será un client component porque usaremos el hook usePathname.

Este hook (usePathname) es necesario para hacer la navegación en caso de que tengamos una url con más partes que el dominio, por ejemplo /second-page que tenemos definida en esta estructura. Tomamos el path completo y luego con una expresión regular, reemplazamos el idioma por el que elegimos en el switch.

En langRegex modificamos nuestro array de idiomas definido en lng-config.ts para usarlo en la expresión regular y no tener que agregar manualmente al switch algún idioma extra.

En el atributo href del elemento Link, sustituimos el idioma actual en la ruta de acceso (pathname) con el idioma que hemos seleccionado en el switch. Esto nos permite navegar a la misma página con el nuevo idioma elegido.

// src/components/SwitchLng/index.tsx

'use client';
import Link from 'next/link';
import { usePathname } from 'next/navigation';
import { lngConfig } from '../../lng-config';
import styles from './styles.module.css';

const SwitchLng = ({ lng, dictionary }: { lng: string; dictionary: Record<string, string> }) => {
  const pathname = usePathname();
  const languages = lngConfig.locales;
  const langRegex = languages.join('|');

  return (
    <div className={styles.languageSwitch}>
      {languages.map((lang, index) => (
        <Link
          href={pathname.replace(new RegExp(`^/(${langRegex})\b`), `/${lang}`)}
          key={lang}
          className={`${styles.link} ${styles[index === 0 ? 'firstLink' : '']} ${
          styles[index === languages.length - 1 ? 'lastLink' : '']
          } ${styles[lang === lng ? 'activeLng' : '']}`}
        >
          <span className={styles.language}>{dictionary[lang]}</span>
        </Link>
      ))}
    </div>
  );
};

export default SwitchLng;

// src/app/[lng]/page.tsx

const dictionary = await getDictionary(lang, lngConfig.sections.home);

<SwitchLng lng={lang} dictionary={dictionary.languages} />

// src/dictionaries/es/home.json

{
  "note": "Esta es la página de inicio",
  "languages": {
    "es": "ES",
    "en": "EN"
  }
}

Para obtener más detalles y acceder al proyecto completo, te invito a visitar el repositorio del proyecto en GitHub.

¡Espero que esta guía te haya sido útil y que tu proyecto web brille en múltiples idiomas!

Referencias

Next.js Internationalization

Ejemplo de proyecto