search

storyblok / react-next-boilerplate

Nextjs Storyblok boilerplate
https://www.storyblok.com/tp/add-a-headless-cms-to-next-js-in-5-minutes
64 stars 34 forks source link

Preview Mode doesn't work #16

Open bernhardw opened 3 years ago

bernhardw commented 3 years ago

I've tried to set up draft previews with Next.js Preview Mode and this boilerplate.

For that I've created an HTTPS tunnel to my local development instance via the preview URL https://21f40123xxxx.eu.ngrok.io/api/preview?secret=MY_SECRET_TOKEN&slug=.

But preview from https://github.com/storyblok/react-next-boilerplate/blob/main/pages/%5B...slug%5D.js#L31 is always false from inside the Storyblok editor, even though the redirect in /api/preview.js happens.

However everything works perfectly when I open https://21f40123xxxx.eu.ngrok.io/api/preview?secret=MY_SECRET_TOKEN&slug=mypage directly in my browser.

Does anybody have the same problem?

lisilinhart commented 3 years ago

This might be due to Cookie blocking in your Browser. Next.js preview mode works through passing a cookie around, if that is blocked, it will not work. I would suggest disabling cookie blocking browser plugins or try a different browser. In the API preview function api/preview, it's also important to replace the cookies with SameSite=None;Secure

    // Set cookie to None, so it can be read in the Storyblok iframe
    const cookies = res.getHeader('Set-Cookie')
    res.setHeader('Set-Cookie', cookies.map((cookie) => cookie.replace('SameSite=Lax', 'SameSite=None;Secure')))