Contentful CMS bulk redirects (vercel.ts)

This Vercel example template, built with Next.js and Tailwind CSS, demonstrates how to sync redirect entries from Contentful into Vercel's bulk redirects at build time using the vercel.ts configuration file.

What is the Contentful CMS bulk redirects (vercel.ts) example?

This is a reference implementation from Vercel's examples repository that pulls redirect entries from Contentful during the build step, transforms them into Vercel bulk redirect objects, and writes them to a generated-redirects.json file. It runs on the Vercel platform with Next.js and uses Tailwind CSS for the demo UI. The example is maintained by Vercel as part of their public examples collection.

Key Features

• Build-time sync — Fetches redirect entries from Contentful using the Content Delivery API and generates a bulk redirects file before the Next.js build finishes.
• vercel.ts configuration — Exports a config that points bulkRedirectsPath to the generated JSON, so Vercel publishes redirects without touching Next.js routing, middleware, or edge functions.
• E-commerce demo catalog — The included UI shows seasonal collections and legacy vanity paths that map to redirect targets like /catalog/fall-2025 or /products/daybreak-pack.
• Environment variable based — Requires CONTENTFUL_SPACE_ID and CONTENTFUL_ACCESS_TOKEN (a Contentful Delivery API token) to fetch live entries.
• Local fallback — The repository ships a small generated-redirects.json so the app runs out of the box without credentials; when env vars exist, vercel.ts rewrites the file with real Contentful entries.
• CMS-agnostic pattern — The fetch logic can be swapped for any CMS while keeping the same bulkRedirectsPath mechanism.

Who is it for?

This example is for Next.js developers deploying on Vercel who want to manage redirects through a headless CMS instead of code changes. It's specifically useful for marketing and SEO teams that need to rotate seasonal or promotional URLs without shipping code, and for any team already using Contentful that wants an automated redirect pipeline.

What can you do with it?

• Marketing teams: Publish new seasonal redirects in Contentful and have them go live on the next Vercel deployment without touching the codebase.
• E-commerce sites: Manage legacy product and catalog paths from a CMS, so a product like "daybreak-pack" can redirect to its current collection page.
• Developers: Use this template as a starting point to integrate any CMS with Vercel's bulk redirects feature, following the documented pattern.

How does it work?

The build process runs vercel.ts, which fetches redirect entries from Contentful, transforms them into Vercel bulk redirect objects, and writes them to generated-redirects.json. The config exported from vercel.ts sets bulkRedirectsPath to that file, and Vercel publishes the redirects directly to its CDN. The demo UI then displays an e-commerce catalog whose collection links resolve through those redirects.

FAQ

Does this example use Next.js middleware or edge functions for redirects?

No. The vercel.ts config handles redirects through bulkRedirectsPath, so Next.js routing, middleware, and edge functions remain untouched.

Can I use a CMS other than Contentful?

Yes. The example states you can extend it to any CMS by swapping the fetch logic while keeping the same bulkRedirectsPath mechanism.

What environment variables are needed?

You need CONTENTFUL_SPACE_ID for your Contentful space and CONTENTFUL_ACCESS_TOKEN — a Content Delivery API (CDA) token. Without these, the included generated-redirects.json fallback file is used for local runs.

How do I deploy this example?

You can use the one-click Vercel deploy button or clone the repository and run pnpm dev. The deploy button asks for the two environment variables and sets up the project automatically.