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 Link Resolver.
  5. Fill out the fields with the following information:
    Domain: [localhost:3000](<http://localhost:3000>)
    Link Resolver: /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 --save @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.

Copy
import Link from 'next/link'
import { PrismicProvider } from '@prismicio/react'
import { PrismicPreview } from '@prismicio/next'
import { linkResolver, repositoryName } from '../prismicio'

export default function App({ Component, pageProps }) {
  return (
    <PrismicProvider
      linkResolver={linkResolver}
      internalLinkComponent={({ href, children, ...props }) => (
        <Link href={href}>
          <a {...props}>
            {children}
          </a>
        </Link>
      )}
    >
      <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.

Copy
import * as prismic from '@prismicio/client' // client to query content
import { enableAutoPreviews } from '@prismicio/next' // plugin for previews
import sm from './sm.json'

export const endpoint = sm.apiEndpoint
export const repositoryName = prismic.getRepositoryName(endpoint)

/* Update the Link Resolver to match your project's route structure,
   previews use this to find your docs */
export function linkResolver(doc) {
  switch (doc.type) {
    case 'homepage':
      return '/'
    case 'page':
      return `/${doc.uid}`
    default:
      return null
  }
}

// This factory function allows smooth preview setup
export function createClient(config = {}) {
  const client = prismic.createClient(endpoint, {
    ...config,
  })

  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:

Copy
import { linkResolver, createClient } from '../../prismicio'
import { setPreviewData, redirectToPreviewURL } from '@prismicio/next'

export default async (req, res) => {
  const client = createClient({ req })
  await setPreviewData({ req, res })
  await redirectToPreviewURL({ req, res, client, linkResolver })
}

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

Note: If your app uses a Link Resolver, import it and pass it to redirectToPreviewURL(). If your app only uses a Route Resolver, you can omit the Link Resolver option.

Exit Preview route

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

Copy the following code for exiting preview mode:

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.