Integración de Next.js con Contentful para Modo Preview

¿Cómo conectar Next.js con Contentful?

La integración entre Next.js y Contentful es clave para aprovechar al máximo la capacidad de ambos sistemas. Tras configurar Contentful, es momento de que nuestra aplicación en Next.js comience a comunicarse correctamente con esta plataforma de gestión de contenido. Este enlace se realiza a través de APIs y el uso de un preview token y un secreto que se gestiona en el entorno de desarrollo.

¿Qué cambios hacer en la API de Next.js?

Para establecer esta conexión, realizaremos tres cambios esenciales:

1. Actualizar variables de entorno: Necesitamos asegurarnos de tener configurados tanto el access token como el preview secret en .env.local.
2. Crear el archivo preview.index.ts: Este archivo será fundamental para manejar las solicitudes provenientes de Contentful y activar el modo preview en Next.js.
3. Modificar la página de plantas: Ajustaremos las propiedades estáticas para poder gestionar los previews correctamente.

En el archivo preview.index.ts, implementamos un método de respuesta que verifica si el secreto recibido desde Contentful coincide con el que tenemos configurado, y que el slug sea un string válido.

// Estructura básica de preview.index.ts en Next.js
export default async (req, res) => {
  const { secret, slug } = req.query;
  
  // Verificación del secreto
  if (secret !== process.env.PREVIEW_SECRET || !slug) {
    return res.status(401).json({ message: 'Invalid token' });
  }
  
  // Obtener la planta del slug
  const plant = await getPlant(slug, true);

  // Redirigir si todo es correcto
  if (plant) {
    res.setPreviewData({});
    res.redirect(`/plant/${slug}`);
  } else {
    return res.status(404).json({ message: 'Plant not found' });
  }
};

¿Cómo se asegura el valor del preview en el frontend?

En nuestro componente de páginas de plantas, debemos informar a getStaticProps si estamos solicitando una entrada en modo preview. Esto es fundamental para habilitar el modo preview solo cuando sea necesario. La propiedad preview estará disponible en Next.js si está habilitada, lo que le permite a la API saber que se debe activar este modo.

¿Cómo gestionar el preview en el frontend?

El modo preview se gestiona mediante cookies. Esto permite al cliente y al servidor comunicarse sobre si el preview está activo. Si eliminamos la cookie next_preview_data, el cliente verá la versión sin publicar del contenido. Esencialmente, el vistazo previo da un paso más allá, permitiendo al editor manejar cómo se presenta el contenido sin publicarlo.

Implementación de mejoras adicionales

Podríamos considerar ofrecer a los usuarios (especialmente a los editores) una manera visual de identificar si están en modo preview, permitiéndoles deshabilitar ese modo cuando lo deseen. Esto se puede lograr verificando la existencia de la cookie del modo preview y proporcionando una opción en la interfaz para gestionarla.

Exploración y Desafío

Enfrentar el desafío de integrar y manejar la funcionalidad de preview en Next.js con Contentful enriquecen la experiencia de desarrollo y edición dinámica. Anímate a explorar más sobre este modo y a aplicar nuevas personalizaciones. ¡La creatividad y la mejoría de las funcionalidades siempre viene bien!

Como un paso adicional, te recomiendo que sigas investigando sobre las capacidades del preview mode y cómo mejorar la experiencia del usuario y del editor. ¡Vale la pena el esfuerzo por el control total que obtendrás en la edición de contenido!