M

MLOG

Español

Aprende a implementar internacionalización (i18n) de forma fluida en tus aplicaciones Next.js para llegar a una audiencia global. Cubre enrutamiento, traducción de contenido y mejores prácticas.

Internacionalización en Next.js: Creando aplicaciones multilingües para una audiencia global

En el mundo interconectado de hoy, crear aplicaciones que se adapten a una audiencia global ya no es un lujo, es una necesidad. Next.js, un potente framework de React, proporciona características robustas para implementar la internacionalización (i18n), permitiéndote crear aplicaciones multilingües que ofrecen una experiencia localizada a usuarios de todo el mundo. Esta guía completa te guiará a través de los conceptos, técnicas y mejores prácticas esenciales para construir aplicaciones internacionalizadas con Next.js.

Entendiendo la Internacionalización y la Localización

Antes de sumergirnos en los detalles de la i18n de Next.js, aclaremos los términos clave:

En esencia, la i18n prepara tu aplicación para la localización. Al separar los elementos dependientes del idioma del código principal, facilitas la localización de la aplicación para diferentes mercados.

¿Por qué implementar la internacionalización en Next.js?

Implementar i18n en tu aplicación Next.js ofrece numerosos beneficios:

Características y configuración de i18n en Next.js

Next.js ofrece soporte integrado para i18n a través de sus funciones de enrutamiento y gestión de contenido. A continuación, se desglosan las características importantes:

1. Configurando i18n en next.config.js

La configuración principal para i18n reside en el archivo next.config.js. Aquí tienes un ejemplo:


/** @type {import('next').NextConfig} */
const nextConfig = {
  i18n: {
    locales: ['en', 'es', 'fr'], // Un array de las configuraciones regionales (locales) soportadas (códigos de idioma)
    defaultLocale: 'en', // El locale predeterminado a utilizar
    localeDetection: true, // Habilita/deshabilita la detección automática del locale según la configuración del navegador (opcional)
    //  domains: [
    //  {
    //    domain: 'example.com',
    //    defaultLocale: 'en',
    //  },
    //  {
    //    domain: 'example.es',
    //    defaultLocale: 'es',
    //  },
    //  ],
  },
}

module.exports = nextConfig;

Explicación:

2. Enrutamiento con prefijos de locale

Next.js añade automáticamente prefijos a las rutas con el locale. Por ejemplo, si tienes una página en /about y el locale es 'es' (español), la URL se convertirá en /es/about. Esto permite tener diferentes versiones de idioma de las páginas y que los motores de búsqueda indexen el contenido para cada locale. El framework se encarga de la redirección y el enrutamiento por ti.

3. Utilizando el hook useRouter

El hook useRouter de next/router proporciona acceso al locale actual y a otra información de enrutamiento.


import { useRouter } from 'next/router';

function MyComponent() {
  const router = useRouter();
  const { locale, locales, defaultLocale } = router;

  return (
    

      
Locale actual: {locale}

      
Locales disponibles: {locales.join(', ')}

      
Locale predeterminado: {defaultLocale}

    

  );
}

export default MyComponent;

El objeto router ofrece las siguientes propiedades clave:

Estrategias de traducción de contenido

Una vez que hayas configurado tu aplicación Next.js para i18n, necesitarás implementar estrategias para traducir tu contenido. Aquí hay varios enfoques populares:

1. Usando un sistema de gestión de traducciones (TMS) dedicado

Para proyectos a gran escala con muchos idiomas, un TMS es muy recomendable. Las opciones populares incluyen:

Beneficios:

2. Creando archivos de traducción JSON

Para proyectos más pequeños, usar archivos JSON para almacenar traducciones es un método simple y efectivo.

Ejemplo de estructura de directorios:


/src
├── locales
│   ├── en.json
│   └── es.json
├── components
│   └── MyComponent.js
└── pages
    └── index.js

Ejemplo de en.json:


{
  "greeting": "¡Hola, mundo!",
  "welcomeMessage": "Bienvenido a nuestro sitio web."
}

Ejemplo de es.json:


{
  "greeting": "¡Hola, mundo!",
  "welcomeMessage": "Bienvenido a nuestro sitio web."
}

Ejemplo de MyComponent.js:


import { useRouter } from 'next/router';
import en from '../locales/en.json';
import es from '../locales/es.json';

function MyComponent() {
  const { locale } = useRouter();
  const t = locale === 'es' ? es : en;

  return (
    

      
{t.greeting}

      
{t.welcomeMessage}

    

  );
}

export default MyComponent;

Este enfoque proporciona flexibilidad y es sencillo para proyectos más pequeños. Generalmente es fácil de actualizar y mantener.

3. Usando una biblioteca de traducción

Varias bibliotecas de JavaScript agilizan la traducción de contenido dentro de tus componentes de React.

Ejemplo con next-i18next (Instalación: npm install next-i18next i18next react-i18next):

Crea un archivo de configuración de i18n (p. ej., i18n.js en tu directorio raíz):


// i18n.js
import { createServerSideHelpers } from 'next-i18next'
import { i18n } from './next-i18next.config'

export function initI18next(req, res, namespaces = ['common']) {
  const helpers = createServerSideHelpers(
    req, 
    res, 
    i18n, 
    namespaces
  )

  return helpers
}

export { appWithTranslation } from 'next-i18next'
export { i18n }

Crea tu configuración de Next.js para next-i18next.


// next-i18next.config.js
const { i18n } = require('./next-i18next.config');

/** @type {import('next').NextConfig} */
const nextConfig = {
  reactStrictMode: true,
  i18n: {
    defaultLocale: 'en',
    locales: ['en', 'es', 'fr'],
  },
  // otra configuración
}

module.exports = nextConfig

Añade la configuración y la importación de la traducción a tu _app.js:


import { appWithTranslation } from 'next-i18next';
import '../styles/globals.css';

function MyApp({ Component, pageProps }) {
  return ;
}

export default appWithTranslation(MyApp);

Crea una carpeta y llénala con los locales para tus traducciones.


/public
└── locales
    ├── en
    │   └── common.json
    ├── es
    │   └── common.json
    └── fr
        └── common.json

Ejemplo en/common.json:


{
  "greeting": "¡Hola, mundo!",
  "welcomeMessage": "Bienvenido a nuestro sitio web."
}

Usando la traducción en un componente:


import { useTranslation } from 'next-i18next';

function MyComponent() {
  const { t } = useTranslation('common');

  return (
    

      
{t('greeting')}

      
{t('welcomeMessage')}

    

  );
}

export default MyComponent;

Este ejemplo usa el hook useTranslation para obtener las traducciones basadas en el locale actual.

Manejando rutas dinámicas y generación de sitios estáticos (SSG)

La internacionalización se vuelve más compleja al tratar con rutas dinámicas (p. ej., entradas de blog, páginas de productos) y la generación de sitios estáticos (SSG).

1. Rutas dinámicas (p. ej., /blog/[slug])

Para las rutas dinámicas, necesitarás generar las rutas correctas para cada locale durante el tiempo de compilación usando getStaticPaths. Esta función devuelve un array de rutas que Next.js debe pre-renderizar.


export async function getStaticPaths() {
  const paths = [];
  const locales = ['en', 'es', 'fr'];
  const posts = await fetchPosts(); // Obtener datos de las entradas del blog

  posts.forEach(post => {
    locales.forEach(locale => {
      paths.push({
        params: {
          slug: post.slug,
        },
        locale,
      });
    });
  });

  return {
    paths,
    fallback: false, // o 'blocking' si quieres mostrar un estado de carga
  };
}

export async function getStaticProps({ params, locale }) {
  const post = await getPostBySlug(params.slug, locale);

  return {
    props: {
      post,
    },
  };
}

Explicación:

2. Generación de sitio estático (SSG) con getStaticProps

En getStaticProps, puedes obtener contenido traducido basándote en el parámetro locale.


export async function getStaticProps({ params, locale }) {
  // Obtener contenido según el locale y los parámetros
  const { post } = await getPostBySlug(params.slug, locale);

  return {
    props: {
      post,
    },
  };
}

La función getPostBySlug debería obtener el contenido traducido para el slug y el locale dados, que podría recuperarse de tus archivos de traducción, una base de datos o un CMS.

3. Renderizado del lado del servidor (SSR) con getServerSideProps

Para contenido que necesita ser obtenido en el momento de la solicitud, usa getServerSideProps. Esto es útil si el contenido cambia con frecuencia o es personalizado para cada usuario.


export async function getServerSideProps({ params, locale, req, res }) {
  // Obtener datos según el locale y los parámetros (p. ej., desde una base de datos)
  const data = await fetchData(params.slug, locale);

  return {
    props: {
      data,
    },
  };
}

Mejores prácticas para la internacionalización en Next.js

Seguir estas mejores prácticas te ayudará a construir aplicaciones multilingües robustas, mantenibles y fáciles de usar:

Consideraciones de SEO para sitios web internacionalizados

Optimizar tu sitio web internacionalizado para los motores de búsqueda es esencial para atraer tráfico orgánico de todo el mundo. Aquí hay algunas prácticas clave de SEO:

Ejemplo: Construyendo un blog multilingüe simple

Vamos a crear un ejemplo simplificado de un blog multilingüe usando Next.js. Esto proporcionará una ilustración más concreta de cómo aplicar los conceptos discutidos anteriormente.

1. Configuración del proyecto

Crea un nuevo proyecto de Next.js:


npx create-next-app mi-blog-multilenguaje
cd mi-blog-multilenguaje

2. Configurar i18n (next.config.js)


/** @type {import('next').NextConfig} */
const nextConfig = {
  reactStrictMode: true,
  i18n: {
    locales: ['en', 'es', 'fr'],
    defaultLocale: 'en',
  },
}

module.exports = nextConfig

3. Crear archivos de traducción

Crea una carpeta locales en el directorio raíz y añade los siguientes archivos JSON:

locales/en.json:


{
  "title": "Welcome to My Blog",
  "postTitle": "My First Post",
  "postContent": "This is the content of my first blog post."
}

locales/es.json:


{
  "title": "Bienvenido a mi Blog",
  "postTitle": "Mi Primer Post",
  "postContent": "Este es el contenido de mi primer publicación de blog."
}

locales/fr.json:


{
  "title": "Bienvenue sur Mon Blog",
  "postTitle": "Mon Premier Article",
  "postContent": "Ceci est le contenu de mon premier article de blog."
}

4. Crear el componente de la entrada del blog (p. ej., components/BlogPost.js)


import { useRouter } from 'next/router';
import en from '../locales/en.json';
import es from '../locales/es.json';
import fr from '../locales/fr.json';

function BlogPost() {
  const router = useRouter();
  const { locale } = router;

  let translations;
  switch (locale) {
    case 'es':
      translations = es;
      break;
    case 'fr':
      translations = fr;
      break;
    default:
      translations = en;
  }

  return (
    

      
{translations.postTitle}

      
{translations.postContent}

    

  );
}

export default BlogPost;

5. Crear la página de inicio (pages/index.js)


import { useRouter } from 'next/router';
import BlogPost from '../components/BlogPost';
import en from '../locales/en.json';
import es from '../locales/es.json';
import fr from '../locales/fr.json';

function HomePage() {
  const router = useRouter();
  const { locale, locales } = router;

  let translations;
  switch (locale) {
    case 'es':
      translations = es;
      break;
    case 'fr':
      translations = fr;
      break;
    default:
      translations = en;
  }

  return (
    

      
{translations.title}

      
      

        {locales.map((l) => (
          
            {l.toUpperCase()}
          
        ))}
      

    

  );
}

export default HomePage;

Este ejemplo simplificado muestra los principios fundamentales de la internacionalización en Next.js. Puedes ampliar este marco básico para incluir características más complejas, como rutas dinámicas e integración con sistemas de gestión de traducciones. Considera mejorar los enlaces anteriores con el componente Link y añadir el atributo locale apropiado.

6. Ejecutar la aplicación

Ejecuta la aplicación con:


npm run dev

Ahora puedes acceder a tu blog en http://localhost:3000 (inglés), http://localhost:3000/es (español) y http://localhost:3000/fr (francés). Deberías ver el título y el contenido de la entrada del blog traducidos según el locale seleccionado.

Conclusión

Next.js proporciona un conjunto completo de características para implementar la internacionalización en tus aplicaciones web. Siguiendo los principios y técnicas descritos en esta guía, puedes crear aplicaciones multilingües que ofrezcan experiencias localizadas a usuarios de todo el mundo. Recuerda planificar tu estrategia de i18n con antelación, elegir el método de traducción adecuado para tus necesidades y priorizar la experiencia del usuario. Con una planificación y ejecución cuidadosas, puedes construir aplicaciones que conecten con una audiencia global y abran nuevas oportunidades de crecimiento. El aprendizaje continuo y mantenerse al día con las últimas versiones y mejores prácticas garantizará que utilices tus herramientas y tecnologías de manera efectiva.

A medida que la tecnología avanza, es de esperar que surjan características de i18n más avanzadas. La capacidad de llegar a usuarios de diferentes culturas y grupos lingüísticos seguirá siendo una prioridad clave para los desarrolladores de aplicaciones en todo el mundo. Por lo tanto, dominar los fundamentos de la i18n es una habilidad valiosa que aumentará tu valor en el panorama del desarrollo global actual.