Unlock seamless workflows and faster delivery with our latest releases - Join the deep dive

Issue with previewing slug routes in Sanity Studio-embedded previews.

4 replies
Last updated: Sep 21, 2023
Hi Sanity folks,First, thanks for getting the guide at
https://www.sanity.io/guides/nextjs-live-preview back up. It’s helped me get Studio-embedded previews working. However, when I add the code in Next Steps to my Iframe options object, I can’t preview my slug routes, only my homepage. I checked that the slug is available and the path correct. For instance, if I try to hit my about page, the url displayed in the studio’s Iframe form has http://localhost:3000 carved off and displays only
/api/preview?slug=/about

When I enable preview mode outside of the studio and navigate to those routes, it works fine. Looking through
the repo linked in the guide, I can’t see anything I’m missing. Should the
true
condition resolve for valid slugs here? What am I missing?

.options({
  URL: (doc) => doc?.slug?.current 
    ? `<http://localhost:3000/api/preview?slug=${doc.slug.current}>`
    : `<http://localhost:3000/api/preview>`,
})
Also, the key
URL:
seems not to work at all, and I only get the preview to resolve if I use the lowercase
url:
Aug 19, 2023, 7:49 PM
You’ll need to update your preview route to:
1. Retrieve the value of the
slug
parameter, if supplied2. Perform a client.fetch for a document with that
slug
3. If found, redirect to the found document’s slug, not the home page
Aug 23, 2023, 4:18 AM
Thanks,
user T
. That’s what I was missing. I think this was a case of “read one map and get there, read 5 maps and get lost.”
Aug 24, 2023, 1:52 AM
That’s a new one to me 😄
Aug 24, 2023, 1:16 PM
user G
did you fix this? could you please provide a code example?
Sep 21, 2023, 1:28 PM

Sanity– build remarkable experiences at scale

Sanity is a modern 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?