Understanding preview mode in Next.js with Sanity

I'm looking at the Next Sanity docs and I'm not sure how the preview mode works without an authenticated client. Anyone have any insights here? Thanks

You will need an authenticated client to view any drafts or any documents from a private dataset.

Right, but how does the Next Sanity helpers accomplish this? With the examples I've seen there, there's no token being passed to the client.

It relies on you also being logged into the Studio in the same browser session. The next-sanity helpers look at the Studio’s session.

Ah - this requires Sanity Studio being on the same domain, right? I'm currently using Sanity Studio that deployed to Sanity, so this won't work, right?

Less sure about that. If you’re using Safari, try Chrome?

I honestly went with a different approach altogether as the examples all seem to depend on conditionally using the

usePreview

hook via preview components. Creating preview components was impractical so I've taken a very different approach which seems to be working well.

If NextJS is in draft-mode, I instead use an auth-client instance (with a read-only token) and updated my queries to order by _updatedAt if in draft-mode. The data is fetched client-side only and React Query is polling to get somewhat live updates.

I think the examples are there to show you how to think about loading previews on the frontend but I’d imagine many would then build out their own solution. I know I’ve been experimenting with a single reusable “PreviewWrapper” component in a Remix app atm.

Ah. That’ll work for your queries but not for resolving draft references. That’s the magic that groq-store in next-sanity gives you — always returning drafts in favor of published if they exist.

So this solution won't work for related data?

No.
If you’re querying for a blog post that has a referenced category — you won’t get the draft version of that category.

Damn

I feel you 😅

https://github.com/SimeonGriggs/sanity-remix-template/blob/preview/app/components/PreviewWrapper.tsx
Here’s where my current experiment is. It’s using remix but you could adapt to Next.

It’s a way to render your components as normal, unless the site is in preview mode where it would instead run that render function.

Interesting, thanks for sharing - I appreciate it. I'll have to see how I can utilise this without breaking my current pages which use React Query

I’m not 100% happy with the ergonomics of that component above, but the idea is there 😅

Yeah, in my case I'd imagine it'd mean utilising the

usePreview

hook inside my existing RQ hooks (as that's where my groq queries live - I really don't want to export them too) - though conditionally doing so might be tricky 😞

You reckon I'm okay exposing a read-only token to the browser as described above?

You’d want to make sure it is retrieved in some encrypted way like from a session – but please be clear I’m no expert in that space.

As it says in the next-sanity package

• Like all things with great power comes great responsibility. You’re responsible for implementing adequate protection against leaking the

token

in your js bundle, or preventing the

/api/preview?secret=${secret}

from being easily guessable.

I guess cuz it's a read-only token, I'm not overly concerned if someone were to retrieve it and pass it to the preview endpoint. I mean, it wouldn't be the end of the world at that point.

Depends how sensitive your draft content is 😄

Ha, that's true 😂

Seeing as we need the token on the client, what's the best way to expose it to the client in a secure manner?

I don’t have guidance to give you there, other than that it should be stored in the user’s session, not in the client JS bundle.

Thanks - just not sure of the best way of getting it into the user's session tbh

The next.js docs should help you out there