Understanding preview mode in Next.js with Sanity

27 replies
Last updated: May 18, 2023
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
May 16, 2023, 2:35 PM
You will need an authenticated client to view any drafts or any documents from a private dataset.
May 16, 2023, 5:21 PM
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.
May 17, 2023, 8:10 AM
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.
May 17, 2023, 9:06 AM
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?
May 17, 2023, 10:04 AM
Less sure about that. If you’re using Safari, try Chrome?
May 17, 2023, 10:05 AM
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.
May 17, 2023, 10:10 AM
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.
May 17, 2023, 10:12 AM
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.
May 17, 2023, 10:12 AM
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.
May 17, 2023, 10:13 AM
So this solution won't work for related data?
May 17, 2023, 10:14 AM
No.
If you’re querying for a blog post that has a referenced category — you won’t get the draft version of that category.
May 17, 2023, 10:14 AM
Damn
May 17, 2023, 10:15 AM
I feel you 😅
May 17, 2023, 10:15 AM
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.
May 17, 2023, 10:16 AM
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
May 17, 2023, 10:22 AM
I’m not 100% happy with the ergonomics of that component above, but the idea is there 😅
May 17, 2023, 10:22 AM
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 😞
May 17, 2023, 10:25 AM
user T
You reckon I'm okay exposing a read-only token to the browser as described above?
May 17, 2023, 3:20 PM
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.
May 17, 2023, 3:29 PM
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.
May 17, 2023, 3:34 PM
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.
May 18, 2023, 9:54 AM
Depends how sensitive your draft content is 😄
May 18, 2023, 9:55 AM
Ha, that's true 😂
May 18, 2023, 9:56 AM
Seeing as we need the token on the client, what's the best way to expose it to the client in a secure manner?
May 18, 2023, 9:59 AM
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.
May 18, 2023, 10:04 AM
Thanks - just not sure of the best way of getting it into the user's session tbh
May 18, 2023, 11:49 AM
The next.js docs should help you out there
May 18, 2023, 11:52 AM

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