La internacionalización (i18n) es el proceso de diseñar una aplicación para que sea fácilmente adaptable a diferentes idiomas y regiones sin cambios de ingeniería. En este artículo, aprenderá cómo configurar i18n en una aplicación Next.js y crear un selector de idioma para alternar entre inglés y español usando next-intl.

Instalación

Primero, debe instalar la biblioteca next-intl, que facilita la gestión de la internacionalización en Next.js. Ejecute el siguiente comando en su terminal:

npm install next-intl

Estructura del proyecto

La estructura del proyecto será la siguiente:

├── messages
│   ├── en.json
│   └── es.json
├── next.config.mjs
└── src
    ├── i18n.ts
    ├── middleware.ts
    └── app
        └── [locale]
            ├── layout.tsx
            └── page.tsx

1. Configurar mensajes de traducción

Crea un directorio de mensajes en la raíz de tu proyecto. Dentro de este directorio, agregue archivos JSON para cada idioma que desee admitir.

mensajes/en.json

{
  "greeting": "Hello Codú",
  "farewell": "Goodbye Codú"
}

mensajes/es.json

{
  "greeting": "Hello Codú",
  "farewell": "Goodbye Codú"
}

Estos archivos contienen las traducciones de las frases que utilizará tu aplicación.

2. Configurar Next.js

Configure Next.js para admitir la internacionalización en next.config.mjs.

siguiente.config.mjs

import { getRequestConfig } from 'next-intl/server';

// List of supported languages
const locales = ['en', 'es'];

export default getRequestConfig(async ({ locale }) => {
  // Validate that the incoming `locale` parameter is valid
  if (!locales.includes(locale)) {
    return { notFound: true };
  }

  return {
    messages: (await import(`./messages/${locale}.json`)).default
  };
});

Este archivo configura Next.js para cargar los mensajes de traducción correctos según el idioma solicitado.

3. Middleware de internacionalización

Crear middleware para manejar la redirección y configurar el idioma predeterminado.

src/middleware.ts

import createMiddleware from 'next-intl/middleware';

export default createMiddleware({
  // List of all supported languages
  locales: ['en', 'es'],

  // Default language
  defaultLocale: 'en'
});

export const config = {
  // Only match internationalised pathnames
  matcher: ['/', '/(en|es)/:path*']
};

Este middleware maneja la redirección al idioma predeterminado si no se especifica ninguno.

4. Configuración de internacionalización

Crea un archivo de configuración para administrar la configuración de internacionalización.

src/i18n.ts

import { notFound } from 'next/navigation';
import { getRequestConfig } from 'next-intl/server';

const locales = ['en', 'es'];

export default getRequestConfig(async ({ locale }) => {
  if (!locales.includes(locale as any)) notFound();

  return {
    messages: (await import(`../messages/${locale}.json`)).default
  };
});

Este archivo valida las configuraciones regionales y carga los mensajes correspondientes.

5. Configurar el diseño y la página

Configurar el diseño y la página principal para admitir la internacionalización.

src/app/[local]/layout.tsx

import { useLocale } from 'next-intl';
import { ReactNode } from 'react';

export default function Layout({ children }: { children: ReactNode }) {
  const locale = useLocale();
  return (
    
      {children}
    
  );
}

src/app/[local]/page.tsx

import { useTranslations } from 'next-intl';

export default function Page() {
  const t = useTranslations();
  return (
    

      
{t('greeting')}
      
{t('farewell')}
    
  );
}

Estos archivos configuran el diseño y la página principal para usar las traducciones.

6. Creando el selector de idiomas

Finalmente, crea un selector de idioma para alternar entre inglés y español.

src/app/[local]/switcher.tsx

'use client';

import { useLocale } from 'next-intl';
import { useRouter } from 'next/navigation';
import { ChangeEvent, useTransition } from 'react';

export default function LocalSwitcher() {
  const [isPending, startTransition] = useTransition();
  const router = useRouter();
  const localActive = useLocale();

  const onSelectChange = (e: ChangeEvent) => {
    const nextLocale = e.target.value;
    startTransition(() => {
      router.replace(`/${nextLocale}`);
    });
  };

  return (
    
      
Change language
      
        English
        Spanish
      
    
  );
}

Este componente permite a los usuarios cambiar el idioma de la interfaz.

Conclusión

Con estos pasos, has configurado exitosamente la internacionalización en tu aplicación Next.js y has creado un selector de idiomas para alternar entre inglés y español. Esto permitirá que su aplicación admita varios idiomas y proporcione una experiencia de usuario localizada.