Troubleshooting NextJS live preview feature with API route errors and missing response
30 replies
Last updated: Oct 4, 2021
E
Happy Friday šanyone experienced with the preview feature on NextJS please?
I followed this (awesome) guide
https://www.sanity.io/guides/nextjs-live-preview
I followed this (awesome) guide
https://www.sanity.io/guides/nextjs-live-preview
Oct 1, 2021, 9:41 AM
E
The actual preview seems to be working but ...
Oct 1, 2021, 9:41 AM
E
1.if I hit
<http://localhost:3000/api/preview>it returns the error message
{"message":"No secret token"}Oct 1, 2021, 9:41 AM
E
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 Previewbutton 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
E
2.when I click the
/api/exit-previewlink I get the following two errors
Oct 1, 2021, 9:41 AM
E
GET <http://localhost:3000/_next/static/chunks/pages/api/exit-preview.js> net::ERR_ABORTED 404 (Not Found)
Oct 1, 2021, 9:42 AM
E
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
B
For the exit preview route, is it wrapped in a
Linktag 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
atag.
Oct 1, 2021, 3:50 PM
B
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
E
Hi Brian, thanks for getting back to me
Oct 4, 2021, 9:49 AM
E
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
E
For the exit preview route, is it wrapped in aĀ2. I still have the same issues with theLinkĀ 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.
/api/exit-previewlink 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
B
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
E
Hi Brian, thanks again,I did think I had to use only an
When I click the link, I can see the browser load page wheel spinning but after a long while it just says
I donāt suppose itās because Iām working on local
š¤
<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
š¤
Oct 4, 2021, 2:45 PM
B
It should work on localhost.
Oct 4, 2021, 4:54 PM
B
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
E
hello
Oct 4, 2021, 4:57 PM
E
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
E
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
B
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
B
It happens to everyone š
Oct 4, 2021, 5:00 PM
E
you are a legend š it works š
Oct 4, 2021, 5:00 PM
E
thanks a lot
Oct 4, 2021, 5:01 PM
E
that was giving me a headache
Oct 4, 2021, 5:01 PM
B
Awesome. Iām just learning Sanity as well and this slack chat is great.
Oct 4, 2021, 5:01 PM
E
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
E
I guess itās node.js right?
Oct 4, 2021, 5:02 PM
B
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
E
oh I know Mosh, I like his style, Iāll dig that, thanks again š
Oct 4, 2021, 5:05 PM
B
The Net Ninja on YouTube has a great Node tutorial too.
Oct 4, 2021, 5:06 PM
B
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.