Configuración de Content Preview en Contentful y Next.js

Clase 14 de 19 • Curso de Next.js: Optimización y Deploy a Producción

Clase anteriorSiguiente clase

Resumen

¿Cómo configurar el modo de previsualización en Contentful?

Configurar el modo de previsualización en Contentful es un proceso esencial para garantizar que los desarrolladores puedan visualizar los cambios antes de implementarlos en producción. Este moderno CMS facilita este proceso mediante la integración de tokens seguros y la posibilidad de comunicarse con diversas URLs. Este tutorial educativo guiará a los usuarios en la configuración del modo de previsualización con ejemplos claros y consejos prácticos.

¿Qué es el Content Preview en Contentful?

El Content Preview es una funcionalidad de Contentful que permite a los usuarios ver y probar los cambios en su contenido antes de publicarlos. Este modo se comunica con el generador de contenido, proporcionando una visión previa basada en el entorno con el que se conecta el CMS.

¿Cómo configurar el Content Preview?

  1. Inicio de sesión en Contentful: Accede a tu cuenta de Contentful y localiza la opción de configuración para el modo de previsualización.

  2. Setup Content Preview: Al entrar en la sección de previsualización, se solicitará un nombre para el entorno que se va a conectar. Este suele ser un nombre representativo del entorno de desarrollo, como dev, para su uso con localhost.

  3. Configuración de entidades y URLs:

    • Elige las entidades que deseas habilitar en el modo de previsualización, como en este ejemplo, la entidad "planta".
    • Contentful ofrece sugerencias útiles, como emplear entry.fields.slack para designar campos específicos en las entradas.

¿Cómo conectar Contentful con una URL?

Para poder conectar Contentful con tu entorno de desarrollo local, sigue estos pasos:

  1. Definir la URL de conexión: Utiliza una URL local, como http://localhost:3000, donde tu servidor esté en ejecución.

  2. Construcción de una API: Crea una nueva API en Next.js bajo la ruta slash API y nómbrala preview. Esta API se encargará de habilitar el modo de previsualización.

  3. Uso de query params:

    • Define un secreto compartido exclusivamente entre Contentful y Next.js. Este elemento aporta seguridad a la previsualización.
    • Utiliza parámetros adicionales, como el slack de la planta, mediante la consulta de campos de entrada en Contentful.
// Ejemplo de uso de secretos y slack en URLs:
const secret = "nunca pares de aprender";
const slack = entry.fields.slack;

¿Por qué es importante el uso seguro de los tokens y API?

Los tokens y las API keys son componentes críticos para garantizar la seguridad de las comunicaciones entre Contentful y cualquier aplicación externa. Asegúrate de:

  • Revisar y guardar las claves API en la sección de Settings de Contentful.
  • Tener acceso al Access Token que Contentful proporciona, esencial para conectarse a la API de previsualización en Next.js.

¿Qué sigue después de la configuración?

Con la preparación del entorno de Contentful y Next.js, el siguiente paso es concretar esta conexión en tu aplicación Next.js. En la siguiente parte del desarrollo, se implementarán los valores definidos para activar con éxito el modo de previsualización y asegurar una integración fluida entre Contentful y Next.js.

¡Sigue explorando y aprendiendo para llevar tus habilidades al siguiente nivel!