Next.js + Contentful Preview Mode setup walkthrough
One challenge when working with statically generated content is how to allow editors to preview their changes before publishing to production. While many traditional content managements systems have preview built in, that’s a little more difficult when the CMS is headless and has to wait for a build each time content is updated.
Playlist for this series:
• Next.js + Contentful
🐱 Repository for code in the video:
https://github.com/Jimmydalecleveland...
🗎 Next.js Docs:
https://nextjs.org/docs
https://nextjs.org/docs/advanced-feat...
~~~~~~
00:00 - What we'll cover
02:03 - Quick recap of the project
02:47 - Next.js API routes
05:40 - Enabling Preview mode in Next.js
08:07 - How Preview changes getStaticProps
10:46 - Read query params in preview API route
12:16 - Contentful preview access tokens
13:51 - Contentful preview client
18:54 - Previewing draft content from Contentful
20:05 - Redirecting in Next.js API routes
25:29 - Product redirecting working
26:04 - Contentful Content Preview links setup
31:41 - Adding a secret parameter for enabling preview
35:48 - Route for clearing Preview mode
37:15 - Preview Mode Enabled Banner for users
41:17 - Check for valid entries before enabling Preview and redirecting
46:40 - Wrapping up
~~~~~~
Follow Jimmy Cleveland's doings:
twitter: / jimmydcleveland
blog: https://blog.jimmydc.com/
#javascript #nextjs #contentful #cms