Preview Drafts
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:
- Head to your Prismic repository and click on Settings > Previews
- Ignore the step about including the Prismic Toolbar, we’ll be doing that later.
- Click the “Create Preview” button.
- You’ll be prompted to input a site name, a domain for your application, and an optional Link Resolver.
- Fill out the fields with the following information:
Domain: [localhost:3000](<http://localhost:3000>)
Link Resolver: /api/preview
If you haven't already, head to the terminal window for your project and install @prismicio/next and @prismicio/react
npm install --save @prismicio/next @prismicio/reactIn 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.
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>
)
}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.
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
}Wherever you query Prismic data in your pages directory using getStaticProps() or getServerSideProps(), make sure you pass previewData to createClient from Next Context.
import { createClient } from '../prismiscio'
export async function getStaticProps({ previewData }) {
const client = createClient({ previewData })
const home = await client.getByUID('page', 'home')
return {
props: {
home,
},
}
}Create a preview.js file inside the pages/api folder.
Copy and paste the following code:
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.
Create a file at pages/api/exit-preview.js with the following content.
Copy the following code for exiting preview mode:
import { exitPreview } from '@prismicio/next'
export default async function exit(req, res) {
await exitPreview({ res, req });
}Was this article helpful?
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.