Is the Next.JS preview supposed to update automatically?

I've set up my Next.js site with preview mode and clicking the preview button successfully loads the site with the preview cookie. However, I was expecting the site to update automatically when I save changes and instead I have to load the site again to re render the page. Is that normal?

Yes, it is normal when using a Static site generator such as Next.js. This happens because the Prismic Toolbar script, which is the window that connects your project to Prismic's built in support for hot reloads, is always expecting to detect new queries, but it stops listening when all pages are built and it only refreshes the page when, as you said, a new preview session is opened from the writing room.

Now, if you've already done all the steps for configuring the preview in your project you may have noticed that Next.js has its own mechanism for storing the state of the preview ref (Preview mode) which is required to bypass Static Generation and successfully load the most recent changes from a new preview session.

This value is primarily used to query the API again using the preview ref but you can also use it to make the Toolbar subscribe to any ref changes and replay prismic queries on demand.

To do this you'll need to add react hooks to work with the Toolbar. Luckily, we're just about to release a project where you can see an example of how to do it.

Here you can see the project code, and here's the file that makes up the hot reload.

Here's a gist we're you can see an example of the function being used in a page component

If you have any questions about this or anything else, please let us know

Thanks

1 Like

Thanks Paulina. Is this the recommended way of handling previews with Next.JS and Prismic going forward? I heard some talk that Prismic might eventually ship Toolbar as a component with event handlers?

Also, from the code, I can't see where the Toolbar is coming from. Does it get rendered in this example?

For the moment it is something that we implemented in our own documentation site, so it's something we just created as a simple workaround. But we don't have plans yet for introducing a similar thing build in the Toolbar.

And the Toolbar gets rendered in the left down corner of the page when you have your repository opened. The preview script goes in every page of your app, including the 404 page. You add this as a regular script in the head.

Right sorry I just didn't see where you'd added it. Thanks again.

ups, sorry about that. Here's the link to a page that uses the hook: https://github.com/prismicio/nextjs-multi-language-site/blob/master/pages/[uid].js#L16

This topic was automatically closed 24 hours after the last reply. New replies are no longer allowed.