Prerequisites
This tutorial assumes you’ve completed the Contentful Next.js tutorial. You should have two things in place already:
Ready? Buckle up, and let’s get started!
Step 1: Setup preview URL and Next.js draft mode
In your Contentful space, go to Settings > Content preview and add a new content preview. The name can be anything you like, e.g., Blog Preview.
Then, under Content preview URLs, check the Post content type and set its value to:
https://your-blog.vercel.app/api/draft?secret=<CONTENTFUL_PREVIEW_SECRET>&slug={entry.fields.slug}
This tutorial uses a deployed website URL, but you can also use this feature locally.
To set up a local environment, replace https://your-blog.vercel.app with http://localhost:3000 or your preferred localhost port.
Just remember to start your local server before previewing your blog.
Replace <CONTENTFUL_PREVIEW_SECRET> with its respective value in your project’s .env file.
This secret prevents unauthorized access to draft URLs. Make sure to store the same value in your hosting provider.
Step 2: Install the live preview SDK
To enable live preview, add the live preview SDK to your project.
In your terminal, navigate to your project folder and run:
npm install @contentful/live-preview
This blog format showcases the steps required to integrate Contentful’s live preview feature with a Next.js blog, allowing real-time content editing and updating. From setting up the preview URL to enabling live updates and inspector mode, each step is detailed with instructions and tips for a seamless experience. Incorporating images for visual aid further enhances the content, making it easier to follow and implement. The blog concludes with a reminder to publish changes for permanent visibility and a call to explore the live preview SDK with other frameworks, encouraging users to enhance their content editing and publishing workflow. Happy editing and publishing!