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

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.

I did follow step 5 here https://github.com/vercel/next.js/tree/canary/examples/cms-sanity and it worked perfectly.

I'll follow this a little closer and give it a shot, thanks!

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?

do you have any source code to look at?

I can provide snippets here in a moment!

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

res.setPreviewData({})

as appropriate3. in

getStaticProps

, I should use a different client with a token set to request preview data4. I should receive the preview data.

do you have an api route for preview as well?

(Thanks for taking the time!)

ok, is preview ever true in getStaticProps?

It is, once you go through the API route (cookies cleared after session ends)

I have seen

preview

come back true, as well as the right client returned with a token assigned

in your api route you seems to missing
Just a notice

Do you get any data in response in your api/preview route?

res.redirect(post.slug)

should be a stand in for that, according to the official NextJS docs on Preview redirects

I do, it's the expected published data however

Even when preview is set. It seems that despite having a token set, my previewClient doesn't get preview data

Is the post you are viewing published?

It is published, but as unsaved changes. Does preview work only for unpublished documents?

So you are saying your console.log(data) is empty?

another thing, in your api route for preview when you're calling

getPageData

you're not pass on preview property, So it should always be false on that function

But in the API it's just checking that a page with that slug exists. in

getStaticProps

, where we render the page, I'm setting

preview

to get the appropriate data

console.log(data) isn't empty, it returns the published data instead of unpublished data I'm trying to preview.

Is this in dev?

it is!

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

I opted to set things up per the CMS example posted above. Is Next-Sanity the preferred way of doing it atm?

Don’t know if it’s preferred, but it’s the way i did it.

have you tried remove the

[0]

from your query btw?

Yeah because the way sanity works is it creates a new document

drafts.id

... that's absolutely it

Thank you both, I need to specifically query for the

draft

prefixed ID...

I never put together you'd have to query it separately, which makes perfect sense.