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.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.

JSON:API ParamsTypeScript