Triggering Netlify redeploy from Sanity and setting up live preview in Next.js with Sanity.

I love Sanity and have been using it for the content for a site I have deployed to Netlify. My question: is there a way to trigger a Netlify redeploy from Sanity when my content changes? I see a dashboard widget -- "Netlify Deploy" -- and a plugin -- "Netlify Deploy Status Badge" -- which both appear to do the trick. But I'm looking for feedback. best practices, and where I can look to find a 'how to...' Thanks!

Hey there User 👋 , seems like what you are looking for would be accomplished via GROQ powered webhooks. There isn't just an out of the box "always redeploy" option on change, but here is the section in the docs on them along with an initial explanation .
To be fair I have limited experience with them so far, but this would definitely be a good chance for you to dive in and learn about them to solve your question

One of my colleagues, User, also shared some more insight with me related to Netlify specific process around this regarding deploys:
In Netlify’s settings are build hooks, which you can create and will get a URL. That URL goes in the URL field of the webhook. They you can set up the webhook for the conditions on which you want to trigger.

Here are some screengrabs to help with the process

Do note though, that this should be done with caution since a redeploy on any content change could be dangerous (not just from a Sanity bandwidth/API call perspective, but also build minutes on Netlify) in that it may unintentionally cause overages etc.
Something worth pointing out and to be mindful
📈 💰

I believe the best solution for this would be this:
https://www.sanity.io/plugins/sanity-plugin-dashboard-widget-netlify
Keep in mind that I haven't tested it myself, but it seems like a less technical method of accomplishing what you need without getting into webhooks to achieve it.

if you were using Vercel instead of Netlify, then this looks like a good option:

https://www.sanity.io/plugins/vercel-deploy

If I recall correctly, the Netlify deploy plugin comes with the pretty big caveat that it exposes an auth token to the Sanity studio client side code since it needs to communicate with either Netlify or Github from the frontend.

Same thing for the Vercel one by the way.

The clean approach is the one recommended by User, using a custom webhook.

Thanks User and User. I will take a look and do some investigating! 🙂

By the way and I had mentioned in my initial post, but there appears to be some plugins that do the trick (like the one below). Do you anything about them?

https://www.sanity.io/plugins/sanity-plugin-dashboard-widget-netlify

As I mentioned, most of the plugins providing a way to trigger deployments directly from the Sanity interface rely on exposing an authorization token to the Sanity studio. Which is technically available to anyone having access to your studio. For both Vercel and Netlify, this token gives full control over your account, so I would personally be worried in exposing it in the browser.

Thanks . I see. You're right. Thanks for the insight.

I'll look at more closely at the other options. Thanks! :-)

Hi and . Digging in a bit more on this I think Sanity's live Preview may be what's needed and best. However, I have few questions. I'm building a fairly simple website for a client using Sanity and Next.js. I've read through the documentation for setting up Live Preview with Nextjs and Santiy and Sanity's Preview Content. However, for what I'm building -- although there is a blog section -- it is on the most part only pages. And, all of the documentation that I see add code to a [slug].js file. For my purposes my client would like to only preview their pages (not blogs). What would you recommend? Is it better to install the production-preview plugin from Sanity (which seems easier) and manually navigate to the page one wants to preview?
Any insight would be greatly appreciated. thanks!

Hey User. I’m a little confused as what’s blocking you. This

[slug].js

thing is coincidental. This preview system would work on any page. The concept is that your

getStaticProps

functions receive whether your preview mode is enabled, and query Sanity for drafts as well. It doesn’t matter which content types you use that on.

Thanks . I didn't realize that. I'm familiar with React, but new to nextjs -- this is actually my first time using nextjs -- so that is part of why I'm asking so many questions and I will no doubt have more 🙂.

No worries. 😊 Happy to help.

Hi and . I'm struggling to get a live preview link up and running and I'm going around in circles a bit. The issue I believe is that I'm not able to properly route to the static page to preview as shown in most examples (using getStaticPaths). Silly question perhaps, but can you direct me to examples that show previewing static pages using getStaticProps?
Thanks for your help :-)

It's probably staring me in the face and at this point just can't see it. Thanks again.

Hey User. Here are a couple of links to help you:•
Setting up the preview mode on Next.js .•
Setting up the preview feature on Sanity .• And then to bridge the two, you can either look at
next-sanity or my own version which is a bit more manual but that I actually prefer other next-sanity.

Essentially it all boils down to this: once you have set up the Next.js preview mode as explained in their documentation, you use that

preview

flag in your

getStaticProps

functions to pick an alternative Sanity client which uses a secret token so it can query drafts. And then there is a little bit of filtering logic (done either by next-sanity or by my version) to pick drafts over published documents.

One main different between next-sanity and my version is that next-sanity ships much significantly more code to the client because it bundles a lot of Sanity utilities. In my case, I ship nothing to the client and keep everything on the server.

Hi User. You offered some help a while back. I thought to reach out with a couple of questions.I currently have a website deployed on Netlify that pulls data from Sanity and uses nextjs to display content in the front-end. We are interested in possibly adding a few animated GIFs.
Two questions:
-- Can I add animated GIFs the same way as I add Images through Sanity?
-- If yes, will the imageUrlBuilder (@sanity/image-url) work the same way?

Love Sanity. Thanks for the help :-)

I’ll answer in help 😉