Discussion on: Craft CMS Live Preview with Next.js 9.3 Static Site Generation and GraphQL

[Mark Jimenez]

Yup! Running Craft 3.4.11. I've also upgraded Next to 9.3.4@canary mentioned in this Github issue: github.com/zeit/next.js/issues/112...

pages/api/preview.ts

// Set the token as preview data
res.setPreviewData({
    previewToken: req.query.token ?? null,
});

console.log(res.getHeaders());

// Output: [Object: null prototype] {
  'set-cookie':
   [ '__prerender_bypass=f65ed8f32b20ac283013dcecb729649e; Path=/; HttpOnly; SameSite=Lax',
     '__next_preview_data=eyJhbGciOiJIUzI1NiJ9.NjhiNjVmNzNmNDdmZWY4MmQwNDkwN2ZjZjY5NDZjYTdlYzFiOWQ5NTIwOWYwNTE2YWU2N2FiZjNkMmI1YWJlM2Q3OTcwOGIxYTk0M2M4MzhmOTkwOWRkNmZiMGZjODY4NDVjMWQ5ZDUzYmU3MTljNjRhZDU2NWQ0Zjg2M2ZiNjJjODJiYWE1MDg1Y2JjZGVlZDVhMTYxZDNmNzkzMjQ1YjY1NzFhMWM3ZmMzY2M4MjMwYjJkYTdhZDUxNGZhYjE4OTg5OGMwODVhOTYwYmU4Y2RkYWExMWQyOGU5ZGJlN2MwYmY5N2Q2NzE0OTc2MWUyMDQyYjFmMTRhODlhYTEzN2RkNzMxMTNiNDk2MDlmNDcxOWI2MjBiNzAzOGE3OTUxODc0NGI3.i9UtAkpXPU5tRhxFVZzTnYXEi27_cRh0SdLdumpc9No; Path=/; HttpOnly; SameSite=Lax' ] }

pages/[page].tsx

export const getStaticProps: GetStaticProps = async (context) => {
    console.log(context);

    // Output: { params: { page: 'page' } }

    ...
}

But when I access the preview page directly (from Craft's iFrame), it sends the correct context:

{ params: { page: 'page' },
  preview: true,
  previewData: { previewToken: '...' } }

Thanks for the quick responses, Matthias!

[Matthias Zaunseder]

Does it help to update to the newest Craft 3.4.16? (github.com/craftcms/cms/blob/maste...)
It adds CORS headers with a * so maybe that helps in your case.

[Matthias Zaunseder]

@mark
Now I also had the problem that the Next.js frontend didn't update in the live preview. Then I deleted the cookies for the domain where Craft runs and suddenly it worked again... Very strange and at the moment I have no idea what went wrong with the cookies.