DEV Community

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

Collapse
 
zauni profile image
Matthias Zaunseder

Do you have Craft 3.4 installed?
And can you do a console.log inside the pages/api/preview.ts file, so that we can be sure, that the function gets called correctly?
And what do you get if you log the context variable inside the getStaticProps function?

Collapse
 
markjoeljimenez profile image
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!

Thread Thread
 
zauni profile image
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.

Thread Thread
 
zauni profile image
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.