DEV Community

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

Matthias Zaunseder on March 15, 2020

Next.js 9.3 was released 9th of March and has a new and exciting feature for all headless CMS users out there: Static Site Generation coupled with ...
Read full post
Collapse
 
markjoeljimenez profile image
Mark Jimenez •

I'm getting context.preview as undefined. Possible reason: github.com/zeit/next.js/discussion...?

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.