Page specific revalidation

• Build Revalidation Endpoint: pages → api → revalidate.js

export default async function (req, res) {
    const slug = req.query.slug

    // Check for secret to confirm this is a valid request
    if (req.query.secret !== process.env.FRONTEND_SECRET) {
        return res.status(401).json({ message: 'Invalid token' })
    } else if (!slug) {
        return res.status(400).json({ message: 'Missing slug' })
    }

    try {
        // this should be the actual path not a rewritten path
        // e.g. for "/blog/[slug]" this should be "/blog/post-1"
        await res.revalidate(`/${slug.replace(/index/, '')}`)
        return res.json({ revalidated: true })
    } catch (err) {
        console.log(err)
        // If there was an error, Next.js will continue
        // to show the last successfully generated page
        return res.status(500).send('Error revalidating')
    }
}

• create FRONTEND_SECRET in .env.local

Backend

• create updateFrontend.js

  • Set ENVS: PAYLOAD_PUBLIC_FRONTEND_SECRET, PAYLOAD_PUBLIC_FRONTEND_URL

  import axios from "axios";
  
  export async function revalidatePage(slug) {
      if (!process.env.PAYLOAD_PUBLIC_FRONTEND_SECRET || !process.env.PAYLOAD_PUBLIC_FRONTEND_URL);
  
      try {
          await axios({
              method: 'get',
              url: `${process.env.PAYLOAD_PUBLIC_FRONTEND_URL}/api/revalidate?secret=${process.env.PAYLOAD_PUBLIC_FRONTEND_SECRET}&slug=${slug}`
          })
          console.log('Revalidation triggered')
      } catch (e) {
          console.log(e)
      }
  }
  
  

  • Add to after Change Hooks in pages

    hooks: {
      afterChange: [
        ({ doc }) => {
            revalidatePage(doc.slug)
         }
      ]
    },