Get help on Discord

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?
Right, so it sends a POST request with the fields you define in the webhook settings as part of the body.
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 => response.revalidate(path)))
    return response.status(204).send('No Content')
  } catch (error) {
    console.error(error)
    return response.status(500).send('Internal Server Error')
  }
}

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.
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
.
Awesome. That webhook service is exactly what I need. Also thanks
user F
for that code snippet

Sanity – Build the way you think, not the way your CMS thinks

Sanity is the developer-first content operating system that gives you complete control. Schema-as-code, GROQ queries, and real-time APIs mean no more workarounds or waiting for deployments. Free to start, scale as you grow.

Get started for freeExplore the demo

Was this answer helpful?