Skip to content
Unlock seamless workflows and faster delivery with our latest releases - Join the deep dive
Get help on Slack

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
Oct 1, 2021, 9:41 AM
The actual preview seems to be working but ...
Oct 1, 2021, 9:41 AM
1.if I hit 
<http://localhost:3000/api/preview>
it returns the error message 
{"message":"No secret token"}
Oct 1, 2021, 9:41 AM
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
Oct 1, 2021, 9:41 AM
2.when I click the 
/api/exit-preview
link I get the following two errors
Oct 1, 2021, 9:41 AM
GET <http://localhost:3000/_next/static/chunks/pages/api/exit-preview.js> net::ERR_ABORTED 404 (Not Found)
Oct 1, 2021, 9:42 AM
Uncaught (in promise) Error: Failed to load script: /_next/static/chunks/pages/api/exit-preview.js     at HTMLScriptElement.script.onerror
Oct 1, 2021, 9:42 AM
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.
Oct 1, 2021, 3:50 PM
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?
Oct 1, 2021, 3:51 PM
Hi Brian, thanks for getting back to me
Oct 4, 2021, 9:49 AM
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.
Oct 4, 2021, 9:50 AM
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
Oct 4, 2021, 9:51 AM
Hi Eugene, you have to remove the Link component completely.

{preview && <a href="/api/exit-preview">Exit Preview Mode !</a>}
Oct 4, 2021, 12:19 PM
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
šŸ¤”
Oct 4, 2021, 2:45 PM
It should work on localhost.
Oct 4, 2021, 4:54 PM
Did you 
return res.end();
at the end of the file? Post the code if you donā€™t mind.
Oct 4, 2021, 4:56 PM
hello
Oct 4, 2021, 4:57 PM
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 ?? `/`})
}
Oct 4, 2021, 4:58 PM
I copy-pasted it šŸ™„ Iā€™m learning so if the guide took some knowledge for granted I probably missed a few shots
Oct 4, 2021, 4:58 PM
Put that at the end and see if it works. Sounds like the route is just hanging because itā€™s not returning a response.
Oct 4, 2021, 4:59 PM
It happens to everyone šŸ˜
Oct 4, 2021, 5:00 PM
you are a legend šŸ™ it works šŸ˜…
Oct 4, 2021, 5:00 PM
thanks a lot
Oct 4, 2021, 5:01 PM
that was giving me a headache
Oct 4, 2021, 5:01 PM
Awesome. Iā€™m just learning Sanity as well and this slack chat is great.
Oct 4, 2021, 5:01 PM
I donā€™t suppose you could point me to any resources where I could fill my gap of knowledge about this?
Oct 4, 2021, 5:02 PM
I guess itā€™s node.js right?
Oct 4, 2021, 5:02 PM
Yes. Any of the online Node courses are pretty good. Mosh Hamedani has a super in depth course actually.
Oct 4, 2021, 5:05 PM
oh I know Mosh, I like his style, Iā€™ll dig that, thanks again šŸ‘
Oct 4, 2021, 5:05 PM
The Net Ninja on YouTube has a great Node tutorial too.
Oct 4, 2021, 5:06 PM
Mosh is fantastic
Oct 4, 2021, 5:08 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.

Get started for freeExplore the demo

Was this answer helpful?