Preview Drafts

Configure Previews in your Prismic Repository

Prismic Previews allow you to view draft content on your live website without publishing them publicly. You can set up many preview environments to preview your content in different contexts, such as production and development. Learn more about how Prismic Previews work.

In order to take advantage of Prismic Previews, you first need to set Previews up from your dashboard:

  1. Head to your Prismic repository and click on Settings > Previews
  2. Ignore the step about including the Prismic Toolbar, we’ll be doing that later.
  3. Click the “Create Preview” button.
  4. You’ll be prompted to input a site name, a domain for your application, and an optional Preview Route.
  5. Fill out the fields with the following information:
    Domain: http://localhost:3000
    Preview Route: /api/preview

Install @prismicio/next

If you haven't already, head to the terminal window for your project and install @prismicio/next and @prismicio/react.

Copy
npm install @prismicio/next @prismicio/react

Wrap your app in <PrismicPreview />

In the default file named _app.js, import PrismicPreview and wrap it around <Component />

Make sure you pass your Prismic Repository name to the repositoryName prop. This can be defined here or imported from the prismicio.js file as shown below or in the setup article.

What does the <PrismicPreview /> wrapper component do?

The PrismicPreview component wraps around the entire Next.js app, makes the Prismic Toolbar available to the website, and adds event listeners for Prismic Toolbar events like prismicPreviewUpdate and prismicPreviewEnd.

pages/_app.js
Copy
import Link from 'next/link'
import { PrismicProvider } from '@prismicio/react'
import { PrismicPreview } from '@prismicio/next'
import { repositoryName } from '../prismicio'

export default function App({ Component, pageProps }) {
  return (
    <PrismicProvider internalLinkComponent={(props) => <Link {...props} />}>
      <PrismicPreview repositoryName={repositoryName}>
        <Component {...pageProps} />
      </PrismicPreview>
    </PrismicProvider>
  )
}

The Prismic settings file

At the root level of your project, you should have a file name prismicio.js, as described in the set-up article. This file is used to create an instance of the Prismic client and configure it for previews.

Below is an example prismicio.js file with Preview specific parts highlighted.

prismicio.js
Copy
import * as prismic from '@prismicio/client'
import * as prismicNext from '@prismicio/next'
import sm from './slicemachine.config.json'

/**
 * The project's Prismic repository name.
 */
export const { repositoryName } = sm

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

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

  return client
}

Pass preview data to queries

Wherever you query Prismic data in your pages directory using getStaticProps() or getServerSideProps(), make sure you pass previewData to createClient from Next Context.

Copy
import { createClient } from '../prismiscio'

export async function getStaticProps({ previewData }) {
  const client = createClient({ previewData })

  const home = await client.getByUID('page', 'home')

  return {
    props: {
      home,
    },
  }
}

Add the Preview route

Create a preview.js file inside the pages/api folder.

Copy and paste the following code:

pages/api/preview.js
Copy
import { setPreviewData, redirectToPreviewURL } from '@prismicio/next'
import { createClient } from '../../prismicio'

export default async (req, res) => {
  const client = createClient({ req })

  await setPreviewData({ req, res })

  await redirectToPreviewURL({ req, res, client })
}

For this instance of createClient, we’re passing the req object from Next instead of previewData.

Exit preview route

Create a file at pages/api/exit-preview.js with the following content.

Copy the following code for exiting preview mode:

pages/api/exit-preview.js
Copy
import { exitPreview } from '@prismicio/next'

export default async function exit(req, res) {
  await exitPreview({ res, req });
}

The Prismic Toolbar will trigger this API on exit.

Use Previews in your Repo


Was this article helpful?
Not really
Yes, Thanks

Can't find what you're looking for? Spot an error in the documentation? Get in touch with us on our Community Forum or using the feedback form above.