Using Serverless Redis with Next.js

Redis is often introduced as an in-memory cache, but it also supports data structures such as hash maps, counters, sorted lists, and queues. Lee uses it as the persistent store for a product roadmap where users can submit and upvote features.

The example runs Next.js on Vercel and Redis on Upstash, with both services available on free tiers. Lee describes Upstash’s per-request pricing, spending caps, monitoring console, and GraphQL API. Vercel’s Upstash integration connects the services and adds the needed environment variables during deployment; the example deployment takes about 45 seconds.

The app connects to Redis through ioredis, configured with a connection string in an environment variable. Its homepage reads roadmap features in `getServerSideProps`, sorting them by score and then title. SWR starts with that server-fetched data and can revalidate it so updates, such as other users’ votes, appear without a full page refresh.

A feature form sends a POST request to a Next.js API route, which validates the title, limits its length, creates a UUID and other fields, and stores the feature in Redis. SWR updates the page cache immediately after submission. A separate form handles email subscriptions, while native HTML attributes provide required-field, email-type, autocomplete, and maximum-length validation.