Preview Mode doesn't work

[bernhardw]

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]

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')))