How to set up a Web Hook for On-Demand ISR in Next.js

5 replies

Last updated: Sep 20, 2022

I’m setting up a web hook for on-demand ISR in NextJS. I now have a webhook sending data to my production site, but it’s not clear what request it’s sending. I need to setup the NextJS API endpoint to handle the ISR, but without seeing the incoming API request, it feels like shooting in the dark. Any ideas here?

Sep 20, 2022, 5:14 AM

Right, so it sends a POST request with the fields you define in the webhook settings as part of the body.

Sep 20, 2022, 6:39 AM

Your handler may look a little like this:


export default async function handler(request, response) {
  if (request.method !== 'POST') {
    return response.status(405).send('Method Not Allowed')
  }

  const Authorization = request.headers.authorization || ''
  const token = Authorization.replace(/bearer/i, '').trim()

  if (token !== process.env.NEXT_REVALIDATION_TOKEN) {
    return response.status(401).send('Unauthorized')
  }

  try {
    const paths = getRevalidationPaths(request.body).filter(Boolean)

    if (paths.length === 0) {
      return response.status(400).send('Bad Request')
    }

    await Promise.all(paths.map(path =&gt; response.revalidate(path)))
    return response.status(204).send('No Content')
  } catch (error) {
    console.error(error)
    return response.status(500).send('Internal Server Error')
  }
}

Sep 20, 2022, 6:40 AM

A few notes:• The authorization part may look different if you use next-sanity for instance. I personally decided to handle it myself with an Authorization HTTP header.
• The

getRevalidationPaths

is a little function you write that defines which paths should be revalidated for the given payload.

Sep 20, 2022, 6:41 AM

I recommend testing with something like webhook.site first, which allows you to see what’s coming in. You can also access the delivery log in your project’s settings dashboard, or via

sanity hook logs

Sep 20, 2022, 8:05 AM

Awesome. That webhook service is exactly what I need. Also thanks

user F

for that code snippet

Sep 20, 2022, 11:06 AM

Sanity.io – build remarkable experiences at scale

Sanity is a customizable solution that treats content as data to power your digital business. Free to get started, and pay-as-you-go on all plans.

Get Started Join our Slack

How to set up a Web Hook for On-Demand ISR in Next.js

Sanity.io – build remarkable experiences at scale

Categorized in