> For clean Markdown of any page, append .md to the page URL.
> For a complete documentation index, see https://contentful.com/developers/docs/llms.txt.
> For AI client integration (Claude Code, Cursor, etc.), connect to the MCP server at https://contentful.com/_mcp/server.

# Setting up a route handler to activate Draft Mode

> How to configure a route handler

## Overview

The toolkit provides convenient route handlers you can export from your application that allow members of your team to activate [Draft Mode](https://nextjs.org/docs/app/building-your-application/configuring/draft-mode), enabling them to view unpublished content dynamically in your application.

These handlers leverage Vercel's [Protection Bypass for Automation](https://vercel.com/docs/security/deployment-protection/methods-to-bypass-deployment-protection/protection-bypass-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](/tools/vercel/vercel-nextjs/vercel-nextjs-toolkit).

## Usage

### App Router

If your NextJs project is using [App Router](https://nextjs.org/docs/app),
create a  `route.ts` or `route.js`  [route handler](https://nextjs.org/docs/app/building-your-application/routing/route-handlers) file in a dedicated folder (e.g. `api/enable-draft`) inside your `app` directory:

```ts
// 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](https://nextjs.org/docs/pages), create an  `enable-draft.ts` or `enable-draft.js`  [API route](https://nextjs.org/docs/pages/building-your-application/routing/api-routes) file inside the `pages/api` directory:

```ts
// 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](https://vercel.com/docs/security/deployment-protection/methods-to-bypass-deployment-protection/protection-bypass-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 dynamically, with Draft Mode enabled.

> How to configure a route handler