Rewriting at the Edge using Upstash

Rewriting at the Edge using Upstash is a Next.js example project from the official Vercel examples repository that demonstrates how to avoid calling several backend services by pre-checking stock availability in an Upstash Redis cache at the network edge.

What is Rewriting at the Edge using Upstash?

Rewriting at the Edge using Upstash is a reference implementation that combines Next.js edge middleware with Upstash, a serverless Redis service. The project's core function is to check whether an item is in stock before the request reaches a backend service, then use URL rewrites to route the request to the appropriate destination based on that cached stock state. It runs on Next.js, deploys to Vercel with one click, and is styled with Tailwind CSS according to the project metadata.

Key Features

• Edge Middleware — Uses Next.js middleware that executes at the edge, before the request hits the origin server.
• Upstash Redis Integration — Reads and writes stock state through Upstash's serverless Redis cache, avoiding direct calls to multiple services.
• URL Rewrites — Rewrites incoming requests to different paths based on the stock check result, enabling fallback pages or alternative backends.
• One-Click Deploy — Includes a deploy button that clones the repository and deploys it to Vercel with the required environment.
• Tailwind CSS Styling — The example's UI is styled with Tailwind CSS, as indicated in the project metadata.
• Part of the Vercel Examples Collection — Maintained in the vercel/examples GitHub repository alongside many other Next.js patterns.

Who is it for?

• Next.js developers who want a practical example of running logic in edge middleware rather than in serverless functions.
• E-commerce engineering teams looking to reduce backend load by serving stock availability checks from a Redis cache at the edge.
• Upstash users who need a reference pattern for integrating Upstash Redis with Next.js rewrites.

What can you do with it?

• Stock-aware routing: route users to an out-of-stock page or alternate product when the Redis cache indicates zero inventory.
• Edge-level pre-checking: validate a condition (like stock) at the edge to skip calling multiple slower backend services.
• Learning reference: study the middleware and rewrite configuration to apply the same pattern to other pre-check scenarios.

How does it work?

The README lists two ways to use the example: one-click deploy on Vercel, or cloning locally with create-next-app using the example URL and pnpm. After bootstrapping, you run pnpm dev for development. The middleware reads stock status from Upstash and applies rewrites accordingly, although the exact endpoint and Redis keys are not detailed in the README itself.

FAQ

What stack does it use?

It is built with Next.js, uses Tailwind CSS for styling, and integrates Upstash as the Redis provider. The edge middleware feature is available in the Next.js framework.

How do I run it locally?

Execute pnpm create next-app --example https://github.com/vercel/examples/tree/main/edge-middleware/rewrites-upstash rewrites-upstash, then run pnpm dev. This bootstraps the project and starts the Next.js development server.