Implementación de Localización en Páginas Estáticas con Next.js y Contentful

¿Cómo se maneja la localización con Next.js y Contentful?

En el mundo del desarrollo web moderno, es fundamental que las aplicaciones ofrezcan experiencias personalizadas a sus usuarios. Next.js y Contentful juntos forman una potente combinación para manejar la localización y la internacionalización de contenido. Aquí aprenderás cómo dejar preparado tu entorno para que las páginas carguen en el idioma que especifiques.

¿Qué necesitamos configurar en Next.js?

Para manejar diferentes idiomas, es esencial indicar a las APIs qué idioma deseamos utilizar. Next.js ofrece una infraestructura completa que facilita este proceso gracias a sus capacidades de internacionalización. Estas son las claves:

• getStaticProps: es la función que nos permite pre-renderizar una página en el momento de la construcción, lo que es ideal para el SEO y tiempos de carga más rápidos.

• Locales: recibirás los locales disponibles y el defaultLocale que está configurado en Next.js, además del locale activo en la sesión del usuario.

¿Cómo utilizamos las localizaiones con plantas?

Para demostrar cómo Next.js maneja la localización, el ejemplo de las plantas y colecciones de plantas muestra la simplicidad de solicitar los datos en el idioma deseado. Aquí te tenemos un enfoque práctico:

export async function getStaticProps({ locale }) {
  const plantList = await fetchPlantList({ locale });
  return { props: { plantList } };
}

En el ejemplo, fetchPlantList es una función que se conecta a tu fuente de datos (en este caso, a la API que construiste) y utiliza el locale proporcionado por Next.js para determinar el idioma de los datos a obtener.

¿Qué sucede al cambiar el idioma?

Durante la localización, es importante que los datos estén traducidos en Contentful. En caso de no estarlo, Contentful devolverá un fallback, normalmente en un idioma por defecto configurado. Al cambiar el idioma en la URL del navegador (/es para español), se observa cómo se obtiene el contenido traducido:

• Fallback en Contentful: Si no existe traducción de algunos contenidos, no te preocupes. Contentful ofrece un contenido por defecto que asegura que siempre se muestre algo relevante.

¿Cómo verificamos el funcionamiento?

Tras realizar las configuraciones y publicar los cambios en Contentful, se debe probar la aplicación para asegurarse de que todo funcione correctamente. Al visitar la aplicación en diferentes idiomas, verifica que no existan errores y que el contenido se cargue como se espera.

Recuerda que al retirar el idioma de la URL (/es), se utilizará el idioma por defecto, en este caso, inglés.

¡Perfecto! Ahora que entiendes cómo implantar un sistema de internacionalización básico con Next.js y Contentful, estás listo para llevar tu aplicación al siguiente nivel y hacerlo con páginas dinámicas. ¡Sigue aprendiendo y explorando nuevas posibilidades!