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:

/api/preview

Your configuration will look something like this:

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.

import Prismic from "prismic-javascript";
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 prismic-javascript kit.

‚ö†ÔłŹ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:

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

9 Rue de la Pierre Levée, 75011 Paris