setup prismic preview on article page

components/Head.jsx

@@ -9,6 +9,7 @@ const Head = ({
   description,
   image,
 }) => {
+  const prismicRepo = process.env.NEXT_PUBLIC_PRISMIC_REPO
   const twitterHandle = '@iamsainikhil12'
   const siteName = 'NextJS Prismic Blog Starter'
   const pageTitle = `${title} | ${page} | ${siteName}`
@@ -64,6 +65,10 @@ const Head = ({
         <meta name='msapplication-TileColor' content='#00aba9' />
         <meta name='theme-color' content='#333' />
         <title>{pageTitle}</title>
+        <script
+          async
+          defer
+          src={`https://static.cdn.prismic.io/prismic.js?new=true&repo=${prismicRepo}`}></script>
         {children}
       </NextHead>
     </>

pages/api/exit-preview.js

@@ -0,0 +1,6 @@
+export default async (_, res) => {
+  res.clearPreviewData()
+
+  res.writeHead(307, {Location: '/'})
+  res.end()
+}

pages/api/preview.js

@@ -0,0 +1,37 @@
+import Prismic from 'prismic-javascript'
+import {linkResolver} from '../../prismic-configuration'
+
+const apiEndpoint = process.env.PRISMIC_API_URL
+const accessToken = process.env.PRISMIC_TOKEN
+
+// 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

pages/article/[uid].js

@@ -163,18 +163,27 @@ export default function Article({uid, tags, article, author, articles}) {
   )
 }
 
-export async function getStaticProps({params}) {
+export async function getStaticProps({
+  params,
+  preview = null,
+  previewData = {},
+}) {
   const {uid} = params
-  const {tags, data: article} = await client.getByUID('article', uid)
+  const {ref} = previewData
+  const {tags, data: article} = await client.getByUID(
+    'article',
+    uid,
+    ref ? {ref} : null
+  )
   // get authorID
   const authorId = await article?.author?.id
   // fetch author data based on authorId
-  const {data: author} = await client.getByID(authorId)
+  const {data: author} = await client.getByID(authorId, ref ? {ref} : null)
   const {results: articles} = await client.query(
     Prismic.Predicates.at('document.type', 'article')
   )
   return {
-    props: {uid, tags, article, author, articles},
+    props: {uid, tags, article, author, articles, preview},
   }
 }