Discussion on setting up previews with Next.js and Sanity, including debugging steps and clarification on querying for draft data.

32 replies
Last updated: Feb 10, 2021
If anyone can point me to the current right way to set up previews with Next.js, I'd be very grateful! I think I muddled a few methods and tutorials, looking to try a fresh go at it.
Jan 25, 2021, 2:44 PM
I did follow step 5 here https://github.com/vercel/next.js/tree/canary/examples/cms-sanity and it worked perfectly.
Jan 25, 2021, 2:50 PM
I'll follow this a little closer and give it a shot, thanks!
Jan 27, 2021, 5:19 PM
Just want to revisit this: I don't know what I'm missing, but I can't seem to get draft data to preview from Sanity in my NextJS app, and I can't think of any further steps to debug it.
I see Get Preview options, I'm able to set the appropriate cookies on the NextJS api and use a different client with a token configured for previews... but no preview data. Is there a way to stream what's being queried on the Sanity side? Some other configuration I might be missing?
Feb 10, 2021, 8:39 PM
do you have any source code to look at?
Feb 10, 2021, 8:44 PM
I can provide snippets here in a moment!
Feb 10, 2021, 8:45 PM
My understanding of the overall paradigm in NextJS is this:
1. Point Sanity's preview mechanism to an API endpoint that requires a secret and the slug of the page to preview.
2. The API
as appropriate3. in
, I should use a different client with a token set to request preview data4. I should receive the preview data.
Feb 10, 2021, 8:52 PM
do you have an api route for preview as well?
Feb 10, 2021, 8:59 PM
(Thanks for taking the time!)
Feb 10, 2021, 9:02 PM
ok, is preview ever true in getStaticProps?
Feb 10, 2021, 9:03 PM
It is, once you go through the API route (cookies cleared after session ends)
Feb 10, 2021, 9:04 PM
I have seen
come back true, as well as the right client returned with a token assigned
Feb 10, 2021, 9:05 PM
in your api route you seems to missing
response.writeHead(307, {Location: `/${page.slug.current}`});
Just a notice
Feb 10, 2021, 9:05 PM
Do you get any data in response in your api/preview route?
Feb 10, 2021, 9:06 PM
should be a stand in for that, according to the official NextJS docs on Preview redirects
Feb 10, 2021, 9:06 PM
I do, it's the expected published data however
Feb 10, 2021, 9:08 PM
Even when preview is set. It seems that despite having a token set, my previewClient doesn't get preview data
Feb 10, 2021, 9:09 PM
Is the post you are viewing published?
Feb 10, 2021, 9:11 PM
It is published, but as unsaved changes. Does preview work only for unpublished documents?
Feb 10, 2021, 9:12 PM
So you are saying your console.log(data) is empty?
Feb 10, 2021, 9:12 PM
another thing, in your api route for preview when you're calling
you're not pass on preview property, So it should always be false on that function
Feb 10, 2021, 9:12 PM
But in the API it's just checking that a page with that slug exists. in
, where we render the page, I'm setting
to get the appropriate data
Feb 10, 2021, 9:14 PM
console.log(data) isn't empty, it returns the published data instead of unpublished data I'm trying to preview.
Feb 10, 2021, 9:14 PM
Is this in dev?
Feb 10, 2021, 9:15 PM
user L
it is!
Feb 10, 2021, 9:15 PM
The reason I was asking is you haven’t setup the subscription for getting live updates like next-sanity provides https://github.com/sanity-io/next-sanity#usage
Feb 10, 2021, 9:16 PM
I opted to set things up per the CMS example posted above. Is Next-Sanity the preferred way of doing it atm?
Feb 10, 2021, 9:17 PM
Don’t know if it’s preferred, but it’s the way i did it.
Feb 10, 2021, 9:19 PM
have you tried remove the
from your query btw?
Feb 10, 2021, 9:19 PM
Yeah because the way sanity works is it creates a new document
Feb 10, 2021, 9:21 PM
... that's absolutely it
Feb 10, 2021, 9:24 PM
Thank you both, I need to specifically query for the
prefixed ID...
Feb 10, 2021, 9:26 PM
I never put together you'd have to query it separately, which makes perfect sense.
Feb 10, 2021, 9:34 PM

Sanity– build remarkable experiences at scale

The Sanity Composable Content Cloud is the headless CMS that treats content as data to power your digital business. Free to get started, and pay-as-you-go on all plans.

Was this answer helpful?

Categorized in