NextJS route resolver with ISR

Developing with Prismic
1

Hi! I am trying to use ISR to rebuild certain pages when I change something in prismic. I am using the code from your example on: Better Next.js Sites: On-demand Incremental Static Regeneration - Prismic

The only thing that is not working for me is that I don't use the link resolver but the route resolver.

I have an external createClient function with my routes already:

import * as prismic from "@prismicio/client";
import * as prismicNext from "@prismicio/next";
import config from "./slicemachine.config.json";

/**
 * The project's Prismic repository name.
 */
export const repositoryName = config.repositoryName;

/**
 * A list of Route Resolver objects that define how a document's `url` field
 * is resolved.
 *
 * {@link https://prismic.io/docs/route-resolver#route-resolver}
 *
 * @type {prismic.ClientConfig["routes"]}
 */

const routes = [
  {
    type: "homepage",
    path: "/",
  },
];

/**
 * Creates a Prismic client for the project's repository. The client is used to
 * query content from the Prismic API.
 *
 * @param {prismicNext.CreateClientConfig} config - Configuration for the Prismic client.
 */
export const createClient = (config = {}) => {
  const client = prismic.createClient(repositoryName, {
    routes,
    ...config,
  });

  prismicNext.enableAutoPreviews({
    client,
    previewData: config.previewData,
    req: config.req,
  });

  return client;
};

import * as prismic from '@prismicio/client'
import * as prismicH from '@prismicio/helpers'

import { createClient } from '../../../prismicio'

/**
 * This API endpoint will be called by a Prismic webhook. The webhook
 * will send an object containing a list of added, updated, or deleted
 * documents. Pages for those documents will be rebuilt.
 *
 * The Prismic webhook must send the correct secret.
 */
export default async function handler(req, res) {
  if (req.body.type === 'api-update' && req.body.documents.length > 0) {
    // Check for secret to confirm this is a valid request
    if (req.body.secret !== process.env.PRISMIC_WEBHOOK_SECRET) {
      return res.status(401).json({ message: 'Invalid token' })
    }

    // If you have a `createClient()` function defined elsewhere in
    // your app, use that instead
    const client = createClient()

    // Get a list of URLs for any new, updated, or deleted documents
    const documents = await client.getAllByIDs(req.body.documents)
    const urls = documents.map((doc) => prismicH.asLink(doc))

    try {
      // Revalidate the URLs for those documents
      await Promise.all(
        urls.map(async (url) => await res.revalidate(url))
      )

      return res.json({ revalidated: true })
    } catch (err) {
      // If there was an error, Next.js will continue to show
      // the last successfully generated page
      return res.status(500).send('Error revalidating')
    }
  }

  // If the request's body is unknown, tell the requester
  return res.status(400).json({ message: 'Invalid body' })
}

This is what I have currently for my revalidation route. But my const urls = ... is not properly set-up for the route resolver yet. The problem is that I have no clue how to implement the route resolver in my code above.

Anyone that can help me out?

3

Hello @boudewijn_bout

Thanks for posting this to us.

You can use either a Route Resolver or a Link Resolver. We recommend using Route Resolver until you don't need to create advanced conditions or URL formatting. In the advanced URL case, You must use the Link Resolver.
Here are two guides I'd recommend you to follow:

I hope this will be helpful for you. Let me know if you need any assistance.

Thanks,
Priyanka