Get help on Discord

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:
AI Update

I can see you're running into two issues with the iframe preview setup. Let me address both:

The URL vs url key issue

You're absolutely right - it should be lowercase url: not URL:. This is case-sensitive, and the correct property name in the iframe options object is url. That's why changing it to lowercase made it work.

The path-only URL issue in the iframe

The problem you're experiencing where the iframe shows only /api/preview?slug=/about instead of the full http://localhost:3000/api/preview?slug=/about is likely happening because you have angle brackets in your URL string:

url: (doc) => doc?.slug?.current 
  ? `<http://localhost:3000/api/preview?slug=${doc.slug.current}>`
  : `<http://localhost:3000/api/preview>`,

Remove the angle brackets - they're not part of the actual URL syntax and are causing the protocol/domain to be stripped. It should be:

url: (doc) => doc?.slug?.current 
  ? `http://localhost:3000/api/preview?slug=${doc.slug.current}`
  : `http://localhost:3000/api/preview`,

The angle brackets < > are just markdown/documentation formatting that sometimes appears in examples, but they shouldn't be in your actual code.

Modern alternative: Presentation tool

Since you're working on live preview functionality, you might want to check out the Presentation tool which is the modern approach to visual editing in Sanity Studio. It provides a more robust iframe preview experience with built-in support for visual editing features. The guide you're following is for the older Pages Router approach, which still works, but the Presentation tool offers a better developer experience.

If you're still seeing issues after removing the angle brackets, double-check that your preview API route is correctly handling the slug parameter and that doc?.slug?.current actually contains the value you expect when the function runs.

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
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.”
That’s a new one to me 😄
user G
did you fix this? could you please provide a code example?

Sanity – Build the way you think, not the way your CMS thinks

Sanity is the developer-first content operating system that gives you complete control. Schema-as-code, GROQ queries, and real-time APIs mean no more workarounds or waiting for deployments. Free to start, scale as you grow.

Get started for freeExplore the demo

Was this answer helpful?