Mantén tu Contenido Siempre Fresco: Usando `revalidate` en Next.js con Webhooks de Sanity

Introducción

Next.js es un framework de React que permite la creación de aplicaciones web rápidas y escalables. Una de las características más potentes de Next.js es su capacidad para realizar revalidación de contenido de forma incremental. Esto es especialmente útil cuando se trabaja con sistemas de gestión de contenido como Sanity, donde los cambios en el contenido pueden ocurrir en tiempo real. En este artículo, exploraremos cómo configurar un webhook en Sanity que active la revalidación de páginas en Next.js, permitiendo que el contenido recién agregado o actualizado se refleje inmediatamente en tu aplicación.

¿Qué es la Revalidación en Next.js?

La revalidación es una técnica que permite actualizar el contenido de las páginas estáticas en Next.js sin tener que realizar una nueva construcción completa de la aplicación. Utilizando la propiedad revalidate en la función getStaticProps, puedes especificar un intervalo de tiempo en segundos después del cual la página se regenerará en el fondo la próxima vez que se acceda a ella.

Configuración Inicial

Paso 1: Crear un Proyecto de Sanity

Si aún no tienes un proyecto de Sanity, puedes crear uno siguiendo estos pasos:

npm install -g @sanity/cli
sanity init

Sigue las instrucciones para configurar tu proyecto y elige un esquema de contenido adecuado.

Paso 2: Crear un Proyecto de Next.js

Luego, crea un nuevo proyecto de Next.js:

npx create-next-app@latest my-nextjs-sanity-app
cd my-nextjs-sanity-app

Paso 3: Instalar Dependencias de Sanity

Dentro de tu proyecto de Next.js, instala las dependencias necesarias para conectar Sanity:

npm install @sanity/client

Paso 4: Configurar el Cliente de Sanity

Crea un archivo sanity.js en la raíz de tu proyecto de Next.js:

// sanity.js
import sanityClient from '@sanity/client';

const client = sanityClient({
  projectId: 'tu_project_id', // Reemplaza con tu ID de proyecto
  dataset: 'production', // Cambia si es necesario
  apiVersion: '2023-10-16', // Usa la fecha en la que se lanzó la versión de la API
  useCdn: true, // `false` si necesitas datos frescos
});

export default client;

Configurando el Webhook en Sanity

Paso 5: Crear un Webhook en Sanity

Para permitir que Sanity notifique a tu aplicación de Next.js sobre cambios en el contenido, necesitas configurar un webhook:

1. Ve a tu proyecto de Sanity y abre Sanity Studio.
2. Navega a Settings > API > Webhooks.
3. Crea un nuevo webhook con la siguiente configuración:
   • URL: https://tu-dominio.com/api/revalidate (reemplaza con la URL de tu aplicación de Next.js).
   • Triggers: Selecciona los eventos que quieres que activen el webhook (por ejemplo, "Create" y "Update" en documentos).

Paso 6: Crear un Endpoint en Next.js para el Webhook

Ahora, necesitas crear un endpoint en tu aplicación de Next.js que maneje las solicitudes del webhook de Sanity y ejecute la revalidación de las páginas.

Crea un archivo en la carpeta pages/api/revalidate.js:

// pages/api/revalidate.js
import { NextResponse } from 'next/server';

export default async function handler(req, res) {
  // Verifica el método de la solicitud
  if (req.method === 'POST') {
    try {
      // Aquí podrías agregar autenticación para asegurar el webhook
      // Realiza la revalidación de las rutas que necesites
      await res.unstable_revalidate('/'); // Revalida la página de inicio
      // Si tienes otras rutas, puedes revalidarlas también
      // await res.unstable_revalidate('/otra-ruta');

      return res.json({ revalidated: true });
    } catch (err) {
      return res.status(500).send('Error revalidando');
    }
  }
  return res.status(405).send('Method Not Allowed');
}

Usando getStaticProps con Revalidación

Paso 7: Configurar getStaticProps en tu Página

Ahora, necesitas utilizar getStaticProps en la página donde deseas que se reflejen los cambios en tiempo real. Por ejemplo, en pages/index.js:

// pages/index.js
import client from '../sanity';

const Home = ({ posts }) => {
  return (
    <div>
      <h1>Mis Publicaciones</h1>
      {posts.map((post) => (
        <div key={post._id}>
          <h2>{post.title}</h2>
          <p>{post.body}</p>
        </div>
      ))}
    </div>
  );
};

export async function getStaticProps() {
  const posts = await client.fetch('*[_type == "post"]'); // Reemplaza con tu consulta

  return {
    props: { posts },
    revalidate: 10, // Revalida cada 10 segundos
  };
}

export default Home;

Conclusión

Usar la revalidación en Next.js junto con un webhook de Sanity es una excelente manera de mantener tu contenido actualizado en tiempo real. Al configurar el webhook para que notifique a tu aplicación de Next.js sobre cambios en el contenido, puedes asegurarte de que los usuarios siempre vean la versión más reciente de tu página.

Este enfoque es particularmente útil en aplicaciones que dependen de contenido dinámico y frecuentemente actualizado, como blogs, tiendas en línea o portafolios.

Si estás listo para implementar esta funcionalidad en tu proyecto, sigue los pasos mencionados y disfruta de un flujo de trabajo optimizado y eficiente.

---

Si tienes preguntas o comentarios sobre el uso de revalidación en Next.js con webhooks de Sanity, ¡no dudes en dejarlos a continuación!