Vercel Next.js Toolkit for Contentful

A toolkit of Next.js helpers that make it easier to use Contentful in a Next.js project hosted on Vercel.

This toolkit is intended as a companion to Contentful's Vercel App, a Contentful Marketplace integration that helps your content team get up and running quickly with your Vercel project powered by Contentful.

Requirements

• Node.js v16 or later
• Next.js v13 or later

Getting Started

Install the toolkit using npm:

npm install --production @contentful/vercel-nextjs-toolkit

Usage

Route handlers for activating 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 usage

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 usage

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";

Preview URL output

With these handlers installed aboves, 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 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.

[!NOTE]
If you install and configure Contentful's Vercel App, a preview URL similar to the above will be generated dynamically and integrated seamlessly into Contentful's content preview experience for your Contentful users.

Additional helpful resources

• To be completed

Reach out to us

You have questions about how to use this library?

• Reach out to our community forum:
• Jump into our community slack channel:

Found a bug or want to propose a feature?

• File an issue here on GitHub: . Make sure to remove any credentials from your code before sharing it.

You need to share confidential information or have other questions?

• File a support ticket with Contentful Customer Support:

License

This repository is published under the MIT license.

Code of Conduct

We want to provide a safe, inclusive, welcoming, and harassment-free space and experience for all participants, regardless of gender identity and expression, sexual orientation, disability, physical appearance, socioeconomic status, body size, ethnicity, nationality, level of experience, age, religion (or lack thereof), or other identity markers.

Read our full Code of Conduct.