Is the Next.JS preview supposed to update automatically?

Developing with Prismic
1

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?

5

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 where 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
6

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?

7

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.

8

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

9

ups, Here's the link to a page that uses the hook: nextjs-starter-prismic-multi-language/[uid].js at master · prismicio-community/nextjs-starter-prismic-multi-language · GitHub

1 Like
10

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

11

This might be one for @Paulina

I followed the advice from Is the Next.JS preview supposed to update automatically? - #8 by smithj

I'm trying to implement this on my homepage page (to prove a concept). In my getStaticProps, I return the following

    return {
      props: {
        doc,
        preview,
        activeRef: ref,
        globalSettings,
      },

And then I call this hook useUpdatePreviewRef(preview, activeRef, doc.id);

But unfortunately, this causes an infinite loop. Have you experienced this in the past? I'm looking at the github repo but things loop quite similar to mine.

I'm not sure what is useUpdateToolbarDocs(pageToolbarDocs(doc.uid, preview.activeRef, doc.lang), [doc]) used for, maybe this is related to the problem?

14

Hi Kris,

I'm not sure what could be causing the infinite loop, but I updated the Next.js preview documentation to explain how to create this hook:

Check this out and see if anything's missing. If not we can dig into this further.

Thanks.

1 Like
15

On second thoughts the infinite loop might come from an old Next.js cookie not being cleared, so make sure you also check out the section about the 'Exit Next.js Preview' button.

16

Thanks a lot @Phil - that was it. I had to delete the cookie in my browser and it started working!

Also amazing that you updated the docs for this, it will be really useful for anyone else searching on how to implement this

1 Like
17

Glad it worked out :slight_smile: