NextJS preview works locally but not on Netlify

Support
1

Hi,

I’m using NextJS with Sanity.io on https://mambu-rebuild.netlify.app/ (Live site: https://www.mambu.com/). We have preview set up in accordance with the NextJS/Sanity demo (next.js/examples/cms-sanity at canary · vercel/next.js · GitHub). It was working up until last Friday but stopped at the beginning of this week. We did a bunch of work towards the end of the week/early this week and so I initially assumed we had changed something to cause it to break and rolled back to a prior commit before all the potentially breaking changes. However, I expected that the preview would start working again once rolled back and it hasn’t. This is a quick run down of my experience in case anyone has any ideas that might help identify the problem:

  • Hitting the preview api route sets __prerender_bypass & __next_preview_data cookies as expected and redirects correctly;
  • However, despite the cookies being set preview mode does not kick in and therefore live updates do not show;
  • The preview variable logs false in getStaticProps;
  • We are using the next essentials plugin and have set the next.config.js target to ‘serverless’;
  • Everything works perfectly on my local server i.e. the cookies are set, the app enters preview mode and all live updates are visible.

The cookies are being set as HttpOnly, Secure, SameSite=None. I initially suspected that one of these settings might be the cause but manually manipulating those cookies in the api preview function did not help;

res.setPreviewData({})

const previous = res.getHeader('Set-Cookie')
previous.forEach((cookie, index) => {
  previous[index] = cookie
    .replace('SameSite=None', 'SameSite=Lax')
    .replace('HttpOnly', '')
    .replace('Secure', '')
})

res.setHeader(`Set-Cookie`, previous)

I’m at a loss for what else to try now. I’d be grateful for any ideas.

Thanks

2 Likes
2

UPDATE: I just tested our site and it seems to be working once again as of 04/30 6.20am PST. Yesterday before it stopped working for good, I noticed a similar spotty behavior throughout the day. I will report again throughout the day today.

We are experiencing the same issue. For us, it seems to have started yesterday despite no code changes or package updates either on nextjs or next-on-netlify.

We are seeing both nextjs cookies being set and the redirect work, but preview is coming as undefined on getStaticProps. This problem is only happening in production. Preview mode works fine in both development mode and in local production when running and serving a local build via netlify build.

We have since tried, upgrading next-on-netlify to 3.2.0 which did not help. We also tried going back a few days to deploys we know were 100% working and these are now not working either.

I have a feeling that this issue could be related to this other issue function cookies, but thats just a wild guess.

This issue is concerning as we were about to go live net week with a new project.

Thanks for any help.

JP

1 Like
5

howdy @jpprietobaez ! sorry you had some instability. Yesterday we were alerted to a bug that seems connected to what you were seeing:

https://answers.netlify.com/t/bug-netlify-functions-event-headers-cookie-sometimes-suddenly-used-comma-instead-of-semicolon/36793

the good news is we were able to roll out a fix for this issue, and we understand the cause of the problem, so this should not happen again. This explains why you saw some issues that were then mysteriously fixed (its cause we fixed 'em~)

if you do see problems like this re-occur, please do let us know right away and we will investigate, but we feel confident this was a one-time thing.

3 Likes
6

thanks for the explanation @perry! much appreciated. We were going crazy thinking it was something we had done at our end.

So, today we certainly saw some improvement compared to yesterday, but we did have some odd behaviors this afternoon (PST). Things seems to be working at the moment, but it would be great to get some reassurance that you guys are still monitoring this issue.

I will keep you posted during the weekend.

Once again thanks for the response.
JP

1 Like
7

Thanks, we ended up deploying the live preview to Vercel but I’ve just checked staging and everything seems to be up and running again :partying_face:.

9

Thanks for letting us know - do reach out again as soon as possible if you see something like this re-occur.

10

Hello,

I am experiencing the same behaviour on GitHub - Kentico/kontent-starter-corporate-next-js: Next.js corporate starter site using Kentico Kontent as a data source. repository.

The deployment URL is https://kontent-starter-corporate-next-js.netlify.app/api/preview

And the actual preview API route is https://kontent-starter-corporate-next-js.netlify.app/api/preview?secret=netlify_secret - it sets the cookies but does not show preview content (should display a preview panel + have cyan background instead of orange).

I have updated to the latest packages and tried again, but it still does not work - locally everything works as expected.

11

Hey there, @Simply007 :wave:

Welcome to the Netlify Forums! Thanks so much for reaching out about this.

Are you still encountering this issue? If so, can you please share your repo as well as an update of the debugging steps you have taken so far? Thank you :slight_smile:

12

Hello, yes I am still encountering the issue.

I have already shared the repository and I will try do be more detailed for the repro steps.

Repository: https://github.com/Kentico/kontent-starter-corporate-next-js
Repro steps:

  1. Open deployed version of the repository https://kontent-starter-corporate-next-js.netlify.app/
  2. Access the /api/preview endpoint with secret key (there are no sensitive information): https://kontent-starter-corporate-next-js.netlify.app/api/preview?secret=netlify_secret
    • Cookies are __next_preview_data and __prerender_bypass are set, but the preview data are not visible (there should be a preview bar and the background of the site should be cyan instead of orange see https://github.com/Kentico/kontent-starter-corporate-next-js#enter-the-preview for more information)

image
image1920×1004 125 KB

If you run the same locally everything works - to test that, you can go through

  • section https://github.com/Kentico/kontent-starter-corporate-next-js#how-to-use
  • section https://github.com/Kentico/kontent-starter-corporate-next-js#preview
    • use following as KONTENT_PREVIEW_API_KEY - as I said the data are not sensitive, it is a starter
ew0KICAiYWxnIjogIkhTMjU2IiwNCiAgInR5cCI6ICJKV1QiDQp9.ew0KICAianRpIjogIjNhOTVkYTVlZTZkMTQ2OWNhMWNjNzJhMWM1MzZiYmVkIiwNCiAgImlhdCI6ICIxNjEzNzM2OTQ3IiwNCiAgImV4cCI6ICIxOTU5MzM2OTQ3IiwNCiAgInByb2plY3RfaWQiOiAiMzAxNTFmZjNmNjViMDAzZTVlN2E0ZmE2NDYwYzQ3YjQiLA0KICAidmVyIjogIjEuMC4wIiwNCiAgImF1ZCI6ICJwcmV2aWV3LmRlbGl2ZXIua2VudGljb2Nsb3VkLmNvbSINCn0.99q5EJRfw6yMdl55fFs__JOG8e8uNqxtOd1AyIaMPWo
13

Hi there, @Simply007 :wave:

Thanks for your patience here. I want to assure you we have not forgotten about your question-- I am meeting with our NextJS experts tomorrow and they will dive in further. Thanks!

14

Thanks @hillary,

looking forward to the news!

1 Like
16

Hey there, @Simply007 :wave:

Thanks for your patience here while I spoke with our NextJS folks this afternoon. A fix for preview mode where fallback is set to true was released yesterday. You can see more about that here: Preview mode with ODB-supported pages · Issue #440 · netlify/next-runtime · GitHub

Can you please try installing the plugin and redeploying? The plugin is out now as 3.8.0. We believe that this should do the trick, but please let me know how it goes or if you have any further questions :slight_smile:

17

Thanks @hillary,

I have tested the redeploy with plugin version 3.8.0. And everything works as expected.

FYI: Deploy log - Netlify App

Thanks for your help!

1 Like
18

hey there, @Simply007 :wave:

So glad everything is working now :netliconfetti: thanks for following up!