Next.js Redis Roadmap Example

Next.js with Redis (Upstash) is a Vercel-authored Next.js example that powers a roadmap voting app — visitors add and upvote feature requests and leave email addresses for release notifications — storing all data in an Upstash serverless Redis database.

What is the Next.js Redis example?

The Next.js Redis example is a small roadmap voting application built on the Next.js framework that uses Redis as its data store. Visitors submit feature requests, upvote the ones they want to see built, and optionally enter an email address to be notified when an item ships. Rather than pointing at a self-hosted Redis server, the example persists everything in Upstash, a serverless Redis database, and it lives in the examples/with-redis directory of the Vercel next.js repository. A hosted demo runs at roadmap-redis.vercel.app.

What makes this example stand out?

• Next.js framework — the project is bootstrapped directly from the official Next.js examples directory with create-next-app --example with-redis, so it tracks the framework's own example conventions.
• Upstash serverless Redis as the data store — feature requests, upvote counts, and notification sign-ups are written to a serverless Redis database rather than a local instance or a relational store.
• Add-and-upvote roadmap flow — the demo UI lets a visitor create a new roadmap item and increment the vote on any existing item.
• Email capture for release notifications — users can submit an email address so they can be notified about released items, giving the app a second data type alongside votes.
• One-click Deploy with Vercel — the README ships a Deploy with Vercel clone link that preconfigures the project name and repository name as redis-roadmap.
• Automatic database provisioning on deploy — the Vercel integration creates a free Redis database and links it to the Vercel project during deployment, so no manual connection-string setup is described.
• npm, Yarn, and pnpm support — the README gives bootstrap commands for all three package managers.

Who should use the Next.js Redis example?

Next.js developers learning Redis persistence: the example shows how to wire a serverless Redis client into a Next.js app without managing a Redis server. Product teams needing a public roadmap page: the add-and-upvote flow already covers the core interaction of a feedback board. Developers evaluating Upstash: the deploy flow provisions a free Upstash database and links it to a Vercel project in one step. Teams collecting release-notification sign-ups: the email capture flow can be pointed at a real launch list.

What can you do with the Next.js Redis example?

Ship a public roadmap: deploy the app and let visitors submit and upvote feature requests, producing a ranked list of what users want next. Collect launch interest: capture email addresses next to roadmap items so interested users can be notified when an item ships. Prototype Redis-backed features: copy the Upstash read/write pattern into a larger Next.js application that needs fast key-value counters. Test a serverless database setup: use the Vercel integration to create a free Upstash database and verify it against a real app before committing to the stack.

How does it work?

1. Bootstrap the project locally with npx create-next-app --example with-redis roadmap, or the equivalent Yarn or pnpm command.
2. Push the project to a Git repository and deploy it to Vercel using the Deploy with Vercel link.
3. During deployment, the Upstash integration creates a free Redis database and links it to the Vercel project automatically.

FAQ

Is the Next.js Redis example free?

Yes. It is an open example published inside the Vercel next.js repository, so the code can be cloned and modified without a license fee, and the deploy flow provisions a free Upstash Redis database through the Vercel integration.

What database does the example use?

It uses Upstash, a serverless Redis database, as its only data store. Feature requests, upvote data, and email sign-ups are all persisted there instead of in a relational database or a self-managed Redis instance.

Do I need to set up Redis myself?

No. The documented path is the Deploy with Vercel flow, where the Upstash integration creates a free Redis database and links it to the Vercel project during deployment, so you do not provision or configure a Redis server by hand.

Can users be notified when a feature ships?

The example includes an email sign-up step, letting visitors enter an address to be notified about released roadmap items. The example itself does not describe a mail provider, so sending those notifications requires connecting your own email service.

Which package managers can bootstrap the example?

The README lists commands for npm (npx create-next-app --example with-redis roadmap), Yarn (yarn create next-app --example with-redis roadmap), and pnpm (pnpm create next-app --example with-redis roadmap), so all three workflows are supported out of the box.