Setting up a route handler to activate Draft Mode
Overview
The toolkit provides convenient route handlers you can export from your application that allow members of your team to activate Draft Mode, enabling them to view unpublished content dynamically in your application.
These handlers leverage Vercel's Protection Bypass for Automation feature to ensure Draft Mode is only accessible when the user is authorized via this feature.
Contentful's Vercel App makes use of these handlers to provide preview URLs that can be used out of the box with Contentful's preview features for content editors.
Requirements
- Install Contentful's Vercel Next.js toolkit.
Usage
App Router
If your NextJs project is using App Router,
create a route.ts or route.js route handler file in a dedicated folder (e.g. api/enable-draft) inside your app directory:
// app/api/enable-draft/route.ts|js
export { enableDraftHandler as GET } from "@contentful/vercel-nextjs-toolkit/app-router"Pages Router
If your NextJs project is using Pages Router, create an enable-draft.ts or enable-draft.js API route file inside the pages/api directory:
// pages/api/enable-draft.ts|js
export { enableDraftHandler as default } from "@contentful/vercel-nextjs-toolkit/pages-router";How it works
With these handlers installed above, you can construct preview URLs that activate Draft Mode and redirect the user to a desired path in your application.
Because the handlers use Vercel's Protection Bypass for Automation feature, you will need to enable Protection Bypass for Automation in your Vercel project and instrument your preview URL with the token secret.
Assuming you had a Next.js application with a route app/blog-posts/[slug].ts, an example preview URL might look like:
https://your-vercel-app.com/api/enable-draft?path=%2Fblog-posts%2Fa-day-in-my-life&x-vercel-protection-bypass=generated-vercel-secret
After verifying that the provided bypass secret matches the secret used in your Vercel project, the handlers above would redirect a user to:
https://your-vercel-app.com/blog-posts/a-day-in-my-life?x-vercel-protection-bypass=generated-vercel-secret&x-vercel-set-bypass-cookie=samesitenone
The values provided in the x-vercel-* query parameters trigger Vercel to set a cookie in a redirect response that allows future requests to bypass the cache and be served dyanmically, with Draft Mode enabled.
