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 Preview Route.
- Fill out the fields with the following information:
Domain: http://localhost:3000
Preview Route: /api/preview
If you haven't already, head to the terminal window for your project and install @prismicio/next and @prismicio/react.
npm install @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.
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.
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>
)
}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'
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
}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 { 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.
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.