Get help on Discord

Troubleshooting NextJS live preview feature with API route errors and missing response

30 replies
Last updated: Oct 4, 2021
Happy Friday šŸ˜Žanyone experienced with the preview feature on NextJS please?
I followed this (awesome) guide

https://www.sanity.io/guides/nextjs-live-preview
AI Update

Happy Friday! šŸ˜Ž

I'd be happy to help with the Next.js live preview feature! That guide you linked is indeed excellent for setting up Visual Editing with the Pages Router.

What specific part of the preview setup are you having trouble with? Here are some common areas where people need help:

Common issues with Next.js draft mode and live preview:

  1. Draft mode not activating - Make sure your /api/draft route is properly validating the preview URL secret and setting the draft mode cookie correctly with res.setDraftMode({ enable: true }).

  2. Preview not updating in real-time - You need both:

    • The useLiveQuery hook from next-sanity/preview wrapping your queries on the client side
    • The VisualEditing component from @sanity/visual-editing/next-pages-router added to your _app.tsx
    • The LiveQueryProvider wrapping your preview components

  3. Stega encoding not appearing (no clickable overlays) - Ensure your Sanity client is configured with:

    • perspective: 'previewDrafts' when in draft mode
    • stega: { enabled: true, studioUrl: '/studio' }
    • A valid viewer token passed to the client

  4. CORS errors - Don't forget to add your local development URL (like http://localhost:3000) to your project's CORS origins in sanity.io/manage.

  5. Presentation tool not loading your preview - Check that the presentationTool plugin in your sanity.config.ts has the correct previewUrl.draftMode.enable path pointing to your draft API route (typically /api/draft).

The key architecture is:

  • Server-side: Fetch with the correct perspective and stega encoding using a dynamically configured client
  • Client-side: Use useLiveQuery to subscribe to content updates
  • Studio: Presentation tool activates draft mode via your API route and communicates changes in real-time

The guide walks through creating separate "preview" components (like PostsPreview.tsx) that use useLiveQuery to wrap your regular components, which is a clean pattern for managing the preview state.

If you can share what specific error message or unexpected behavior you're seeing, I can give you more targeted help! Common symptoms include:

  • "No posts found" in Presentation
  • Changes not appearing as you type
  • 401/403 errors in the console
  • Overlays not appearing on content
The actual preview seems to be working but ...
1.if I hit 
<http://localhost:3000/api/preview>
it returns the error message 
{"message":"No secret token"}
I crossed checked all my files and they match the ones of the guide (except for the secret token of course)Oddly enough, when I click the 
Open Preview
button within Studio, I do see the secret passed in the url before I land on the front-end page
2.when I click the 
/api/exit-preview
link I get the following two errors
GET <http://localhost:3000/_next/static/chunks/pages/api/exit-preview.js> net::ERR_ABORTED 404 (Not Found)
Uncaught (in promise) Error: Failed to load script: /_next/static/chunks/pages/api/exit-preview.js     at HTMLScriptElement.script.onerror
For the exit preview route, is it wrapped in a 
Link
tag on the front end? If so, itā€™ll cause that error because Next is trying to use its client side router on the URL. It needs to be wrapped in an 
a
tag.
Your API route is failing the first conditional test that checks for the secret in the query parameters. If you go to the URL manually with a secret in the parameters does it get past that check?
Hi Brian, thanks for getting back to me
Your API route is failing the first conditional test that checks for the secret in the query parameters. If you go to the URL manually with a secret in the parameters does it get past that check?
1. In hindsight I think Iā€™m meant to get that error, thatā€™s actually mentioned in the guide (https://www.sanity.io/guides/nextjs-live-preview#e0a6b3b6629c ) but it was not clear how to handle it, whether to ignore it or what. Furthermore, as you suggested, I did try to pass the secret manually in the url and it works fine.
For the exit preview route, is it wrapped in aĀ 
Link
Ā tag on the front end? If so, itā€™ll cause that error because Next is trying to use its client side router on the URL. It needs to be wrapped in anĀ 
a
Ā tag.
2. I still have the same issues with the 
/api/exit-preview
link despite adding an 
<a>
tag to the 
<Link>

{preview && <Link href="/api/exit-preview"><a>Exit Preview Mode !</a></Link>}
I also restarted the servers just in case.
I mean itā€™s not a big deal but it would be nice if I could get it to work
Hi Eugene, you have to remove the Link component completely.

{preview && <a href="/api/exit-preview">Exit Preview Mode !</a>}
Hi Brian, thanks again,I did think I had to use only an 
<a>
tag so I tried that but didnā€™t help.I mean Iā€™m not getting the error anymore but the page wonā€™t load.
When I click the link, I can see the browser load page wheel spinning but after a long while it just says

This page isn't working
localhost didn't send any data.
ERR_EMPTY_RESPONSE
I donā€™t suppose itā€™s because Iā€™m working on local
šŸ¤”
It should work on localhost.
Did you 
return res.end();
at the end of the file? Post the code if you donā€™t mind.
hello
no I didnā€™t return that, this is all I got in the file
export default function exit(req, res) {
  res.clearPreviewData()

  res.writeHead(307, {Location: req?.query?.slug ?? `/`})
}
I copy-pasted it šŸ™„ Iā€™m learning so if the guide took some knowledge for granted I probably missed a few shots
Put that at the end and see if it works. Sounds like the route is just hanging because itā€™s not returning a response.
It happens to everyone šŸ˜
you are a legend šŸ™ it works šŸ˜…
thanks a lot
that was giving me a headache
Awesome. Iā€™m just learning Sanity as well and this slack chat is great.
I donā€™t suppose you could point me to any resources where I could fill my gap of knowledge about this?
I guess itā€™s node.js right?
Yes. Any of the online Node courses are pretty good. Mosh Hamedani has a super in depth course actually.
oh I know Mosh, I like his style, Iā€™ll dig that, thanks again šŸ‘
The Net Ninja on YouTube has a great Node tutorial too.
Mosh is fantastic

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?