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
&lt;a&gt;
tag to the
&lt;Link&gt;

{preview &amp;&amp; &lt;Link href="/api/exit-preview"&gt;&lt;a&gt;Exit Preview Mode !&lt;/a&gt;&lt;/Link&gt;}
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 &amp;&amp; &lt;a href="/api/exit-preview"&gt;Exit Preview Mode !&lt;/a&gt;}
Oct 4, 2021, 12:19 PM
Hi Brian, thanks again,I did think I had to use only an
&lt;a&gt;
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

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?