App Router

Quickstart: Upstash Redis in Next.js 16

1. Install package

In your Next.js app, install our @upstash/redis package:

npm install @upstash/redis

2. Connect to Redis

1. Grab your Redis credentials from the Upstash dashboard

   

2. Paste them into your Next environment variables:

   .env.local

   UPSTASH_REDIS_REST_URL=https://holy-kite-17499.upstash.ioUPSTASH_REDIS_REST_TOKEN=AURbAAIncDEyYjM4M...

3. Create a Redis instance, for example in lib/redis.ts

   lib/redis.ts

   import { Redis } from "@upstash/redis"// 👇 we can now import our redis client anywhere we need itexport const redis = Redis.fromEnv()

3. Using our Redis Client

We can now connect to Upstash Redis from any server component or API route. For example:

import { redis } from "@/lib/redis"// 👇 server componentconst Page = async () => {  const count = await redis.get<number>("count")  return <p>count: {count}</p>}export default Page

Because this count doesn't exist yet, let's create a Next API route to populate it.

4. Storing data in Redis

Let's create a super simple API that, every time when called, increments an integer value we call count. This is the same value we display in our page above:

import { redis } from "@/lib/redis"export const POST = async () => {  await redis.incr("count")  return new Response("OK")}

Perfect! Every time we now call this API, we increment the count in our Redis database:

The server component fetches the most recent count at render-time and displays the up-to-date value automatically. For a video demo, check the video at the top of this article.

Examples