Next.js + Prismic Previews - Cannot exit preview

Developing with Prismic
1

Hey there,

I can successfully view previews, however clicking the "X" button on the preview toolbar reloads the site yet does not trigger the api/exit-preview endpoint or clear the Next.js preview cookie.

I see some posts dating back to Oct of last year but I still don't have a clear idea about how this works.

  1. Does clicking on the toolbar's "X" button trigger the exit-preview api endpoint under the hood?
  2. I read in another post somewhere that the X button doesn't actually tell Next.js to end its preview state. So the Prismic does seem to suggest that hitting this endpoint is manually needed on our end to exit.

Exploring the Network tab in the browser tools, I don't see api/exit-preview being hit.

Any suggestions?

Thanks

2

Hi Kevin,

We've made some changes to our recommendations on how to set up previews with Next.js as it's a tricky technology for working with Previews. You can follow the documentation below which will show you how to configure your project so that the api/exit-preview route is triggered when you click the "X" button on the preview toolbar.

Let me know if you have any questions.

Thanks.

6

Thanks @Phil,

Finally got it working but I think the docs need a little updating.

When adding useUpdatePreviewRef, I noticed a couple of issues:

  • Inside of pages/[uid].js in the example, useUpdatePreviewRef cannot be used conditionally since it's a hook. It needs to come before the if statements. If you do that, the condition needs to be moved into the hook itself:
export function useUpdatePreviewRef(previewRef, documentId) {
  const router = useRouter()
  const previewExitRoute = getExitPreviewRoute(router)

  useEffect(() => {
    if (!documentId) return // I moved the condition to here and added the rest of the dependences to useEffect's dependency array
    const updatePreview = async () => {
      await timeout(1000)

      const rawPreviewCookie = Cookies.get('io.prismic.preview')
      const previewCookie = rawPreviewCookie ? JSON.parse(rawPreviewCookie) : null

      const previewCookieObject = previewCookie ? previewCookie[`${repoName}.prismic.io`] : null

      const previewCookieRef =
        previewCookieObject && previewCookieObject.preview ? previewCookieObject.preview : null

      if (router.isPreview) {
        if (rawPreviewCookie && previewCookieRef) {
          if (previewRef !== previewCookieRef) {
            return router.push(`/api/preview?token=${previewCookieRef}&documentId=${documentId}`)
          }
        } else {
          return router.push(previewExitRoute)
        }
      } else if (rawPreviewCookie && previewCookieRef) {
        return router.push(`/api/preview?token=${previewCookieRef}&documentId=${documentId}`)
      }
      return undefined
    }
    updatePreview()
  }, [documentId, previewRef, previewExitRoute, router])
}
  • Also, the hooke useUpdatePreviewRef is exporting useUpdatePreview, however the hook is still being imported as useUpdatePreviewRef in the examples.

Best,
Kevin

12

Hello @kevinf

Thank you for your valuable feedback. We will look into the code and update the documentation accordingly.

Best,
Priyanka

1 Like