Was this page helpful?

Setting up a route handler to activate Draft Mode


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.



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:


After verifying that the provided bypass secret matches the secret used in your Vercel project, the handlers above would redirect a user to:


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.