Preview on Vercel

[dnlmzw]

Hi again,

I see that it is stated in the documentation that "Live preview from Sanity" is possible and I was wondering if you could provide some insight into how to best set this up?

I'm quite new to Next.js as I come from Gatsby where things are done in a completely different way, and is also the primary reason for my recent switch to NextJS where it is my understanding that I have more options.

Now, I've deployed my project to Vercel and it's working fine. However, my build time is around 5 minutes which I'd like to speed up — however only on my test-domain. Is it possible to reach the same speeds as my local environment and see the changes I've made in Sanity with a simple page refresh? If so, I'd love to know if you could point me in the right direction.

Thanks in advance again and thank you for all the support so far to my other questions!

Much love for this project. It's already saved me soooo many hours of work, so I couldn't be more grateful 🙌

[ndimatteo]

Hey there @dnlmzw,

Thanks for the kind words, and definitely happy to provide more insight into how the "Live Preview" works!

The live preview is utilizing Next's built-in "Preview Mode" feature, which you can read about here: https://nextjs.org/docs/advanced-features/preview-mode

In short, it works like this:

1. Use a custom /api/preview route that enables Preview Mode by setting cookies with: res.setPreviewData({})
2. Send a page slug to this API endpoint (which sets the preview mode), and redirect to the page in question
3. Now, the page will have getStaticProps called at request time (instead of at build time) because Preview Mode is on.

What this means, is we can now load our data in real-time, AND switch up what loads when this is the case.

In HULL, how we're doing this can be seen here: https://github.com/ndimatteo/HULL/blob/main/pages/%5B...slug%5D.js#L32-L36

You'll see we're passing in the preview and previewData props which allows us to incorporate preview mode in our data fetching. We send this as a second parameter to our data fetching function, as an object:

{
  active: preview,
  token: previewData?.token
}

With this, in our data fetching function, we can get the latest draft content to send back: https://github.com/ndimatteo/HULL/blob/main/lib/api.js#L367-L388

What's interesting about this, is our actual GROQ remains unchanged! Instead, how we grab the latest draft data is just in how we setup our Sanity Client. We pass that preview object along to our Sanity Client setup, which you can see here how it's utilized: https://github.com/ndimatteo/HULL/blob/main/lib/sanity.js#L23-L24

By turning off the useCdn option and passing our token we can now access draft data in our GROQ calls. If you check out the documentation around "drafts" here, you can see it says:

Drafts are not available to the public API, but can be accessed using an authenticated client or using an access token.

The last piece to the puzzle is where/how you actually initiate the "live preview" for a particular page/product/etc.

And that's where the custom Sanity Action comes to the rescue! I'm adding this custom action to the studio that when clicked opens a new tab at the API endpoint with the document slug, which in turn goes through steps 1-3 above. And finally, together with our updated data fetching, your page will display with the latest content from Sanity ✨

---

bonus: You're probably wondering how to "stop" previewing content. This is simply done by expiring the preview cookie after 20 seconds. So once you "preview" a page, your whole site will be in preview mode (meaning you can preview other pages as well!) for 20 seconds, and then refreshing after that you'll be back to seeing your currently live/deployed version.

I hope that helps, but let me know if anything needs clarified!

[peepers-rick]

Would it be possible to have a realtime preview mode in a separate pane in Sanity? Meaning if I'm editing the text of, say, the homepage hero, I would be able to see the live preview update as I'm typing? I believe I saw Kevin Green of midway do this in a YouTube video, but obviously that's Gatsby, not Next.

Something similar to this: https://www.sanity.io/blog/live-preview-with-nextjs

[ndimatteo]

Hey there @peepers-rick absolutely!

The implementation of this is fairly straightforward and HULL has done some of the legwork for this setup already. I'd suggest reviewing this to see how it's done: https://www.sanity.io/guides/nextjs-live-preview

[peepers-rick]

Thanks @ndimatteo !

I was able to get this working shortly after posting my comment. I just wanted to ensure I wasn't being redundant with the preview you already had baked in. Thanks so much for this repo, it's an absolutely fantastic starting point.

[ndimatteo]

@peepers-rick that's great to hear! And nope, not being redundant :)

Slightly different techniques that share the same Next.js preview mode, so very useful to have both for different editing experiences.

Glad you're enjoying the repo! 🤘