Support custom exit preview url when closing using the toolbar

[johnsardine]

When integrating with Next.js we have to define a local cookie so that Next.js knows it should bypass any statically generated files and preform the request to Prismic API. This works as expected with the correct preview url defined in Prismic settings.

However when closing the preview using the toolbar, this only clears the cookie on prismic side, leaving the cookie that Next.js defines to be able to preview.

I'd like to request the toolbar to support a setting that allows us to define our app exit url so that we can clear the local cookie and exit the preview correctly

[jineshshah36]

As far as I can tell, using the toolbar makes the preview session unusable on nextjs. If we only close the next preview session, it doesn't close the prismic preview session and vice-versa. Is there a workaround in the meantime or a best practice for this?

[justintemps]

It seems like the Next.js demo repo doesn't use the Prismic toolbar at all so I guess the best practice is just not to use it.

[levimykel]

I think that it would be awesome if the Prismic toolbar could handle this in the future. As a workaround for now, here's what I did when working on the Prismic Documentation (built with Next.js):

I created an exit preview button that displays when in Preview mode. When you click on it, it will exit the preview mode and redirect back to the page you were on when you clicked the button.

Here is a simple version of an ExitPreviewButton component

import React from 'react'
import { withRouter } from 'next/router'

function ExitPreviewButton({ router }) {
  const previewExitUrl = '/api/exit-preview'
  const linkUrl = router.asPath ? `${previewExitUrl}?currentUrl=/docs${router.asPath}` : previewExitUrl

  return <a href={linkUrl}>Exit Preview</a>
}

export default withRouter(ExitPreviewButton)

Then here is the /api/exit-preview.js file:

const url = require('url')

export default async function exit(req, res) {
  res.clearPreviewData()

  const queryObject = url.parse(req.url, true).query
  const redirectUrl = queryObject && queryObject.currentUrl ? queryObject.currentUrl : '/docs'

  res.writeHead(307, { Location: redirectUrl })
  res.end()
}

[justintemps]

Thanks @levimykel, were you using the Toolbar in addition to this?

[levimykel]

@justintemps Yeah, I do use the Toolbar in addition. It means that you need to click the close preview button, then click to close the toolbar as well. I hope this can eventually be built into the toolbar so that previews can be closed with a single click, but hopefully this will do as a workaround for now.

[justintemps]

@levimykel It would be amazing to have a Toolbar component that could take onExit handler for that.