Handling document previews

There are a few steps you need to perform when configuring previews requests of both published documents and documents that have not yet been published.

Before starting:

- This page assumes you have created a Next.js project with the primsic sm --setup command.

- You should know it's not necessary to paste the script from you repo's preview settings.

Configure the preview route in Prismic

Start with setting up the previews in your Prismic repository. Once you have filled the Site name and Domain for your application, add the following route for the Link Resolver field:

Copy
/api/preview

Your configuration will look something like this:

This is how your preview settings should be configured in your Prismic repo.

Configure preview mode in your Next app

Then set the Next Preview mode configuration. If it doesn't already exist, create an API directory: ~/pages/api. Inside of this, add two new files:

  • preview.js
  • exit-preview.js (Required file to exit a preview session correctly)

preview.js

The preview configuration uses the NextsJS setPreviewData method which sets some cookies on the browser, turns on the preview mode, and redirects the request to the appropriate URL.

Copy
import Prismic from "@prismicio/client";
import { linkResolver } from 'prismic.js'

import smConfig from './../sm.json'
export const apiEndpoint = smConfig.apiEndpoint
const accessToken = "";

// Client method to query from the Prismic repo
const Client = (req = null) =>
  Prismic.client(apiEndpoint, createClientOptions(req, accessToken));

const createClientOptions = (req = null, prismicAccessToken = null) => {
  const reqOption = req ? { req } : {};
  const accessTokenOption = prismicAccessToken ? { accessToken: prismicAccessToken } : {};
  return {
    ...reqOption,
    ...accessTokenOption,
  };
};

const Preview = async (req, res) => {
  const { token: ref, documentId } = req.query;
  const redirectUrl = await Client(req)
    .getPreviewResolver(ref, documentId)
    .resolve(linkResolver, "/");

  if (!redirectUrl) {
    return res.status(401).json({ message: "Invalid token" });
  }

  res.setPreviewData({ ref });
  res.writeHead(302, { Location: `${redirectUrl}`  })
  res.end();
};

export default Preview;

getPreviewResolver

Note that in the code above we are processing the Preview Token with the getPreviewResolver method instead of the deprecated previewSession method.

Make sure that you are using the latest @prismicio/client v.4.0.0 kit or above.

The Link Resolver function

This requires the use of a Link Resolver function so that the preview endpoint knows where to redirect to. You can learn more about link resolving by checking out the Link Resolving page.

You either need to define the Link Resolver in the Preview component or import it.

exit-preview.js

Whenever you have an active preview session and you want to exit you'll need to manually add /api/exit-preview to the URL in the browser. See the examples below:

Copy
export default async (_, res) => {
  res.clearPreviewData();

  res.writeHead(307, { Location: "/" });
  res.end();
};

Exit the preview correctly

At this point, your previews will work. As mentioned earlier, the last thing to note is that whenever you have an active preview session and you want to exit you'll need to manually add /api/exit-preview to the URL in the browser.

That's it that's all you'll need to get previews working in your project! useGetStaticProps will process your preview data automatically. :)