On-demand Revalidation

How to implement on-demand revalidation for instant content updates.


Starting with `v12.1.0`, Next.js added support for on-demand Incremental Static Regeneration.

⚠️

On-demand revalidation is experimental in Next.js 12.1.0, so we're shipping it in the `next_extras` module as experimental as well.

Implementation

  1. On your Drupal site, visit `/admin/modules` and enable the Next Extras module.
  2. Next, visit `/admin/config/services/next/entity-types` and click edit next to an entity type.
  3. Under Experimental are the settings for revalidation.
  4. You can provide additional paths for revalidation under Paths.

On the Next.js site, implement the following route.

pages/api/revalidate.ts

import { NextApiRequest, NextApiResponse } from "next"
export default async function handler(
request: NextApiRequest,
response: NextApiResponse
) {
let slug = request.query.slug as string
const secret = request.query.secret as string
// Validate secret.
if (secret !== process.env.DRUPAL_PREVIEW_SECRET) {
return response.status(401).json({ message: "Invalid secret." })
}
// Validate slug.
if (!slug) {
return response.status(400).json({ message: "Invalid slug." })
}
try {
await response.unstable_revalidate(slug)
return response.json({})
} catch (error) {
return response.status(404).json({
message: error.message,
})
}
}

Usage

Now whenever the configured entity type is updated or deleted on your Drupal site, the `next_extras` module will ping your Next.js site to purge the cache and revalidate the page.