Skip to main content

GitHub Repository

You can find the project source code on GitHub.
This tutorial uses Next.js App Router. If you want to use Pages Router, check out our Pages Router tutorial.
This tutorial uses Redis as state store for a Next.js application. We simply add a counter that pulls the data from Redis.

​
Project Setup

Let’s create a new Next.js application with App Router and install @upstash/redis package. 
npx create-next-app@latest
cd my-app
npm install @upstash/redis

​
Database Setup

Create a Redis database using Upstash Console or Upstash CLI and copy the UPSTASH_REDIS_REST_URL and UPSTASH_REDIS_REST_TOKEN into your .env file.
.env
UPSTASH_REDIS_REST_URL=<YOUR_URL>
UPSTASH_REDIS_REST_TOKEN=<YOUR_TOKEN>
If you are using the Vercel & Upstash integration, you may use the following environment variables:
.env
KV_REST_API_URL=<YOUR_URL>
KV_REST_API_TOKEN=<YOUR_TOKEN>

​
Home Page Setup

Update /app/page.tsx:
/app/page.tsx
import { Redis } from "@upstash/redis";

const redis = Redis.fromEnv();

export default async function Home() {
  const count = await redis.incr("counter");
  return (
    <div className="flex h-screen w-screen items-center justify-center">
      <h1 className="text-4xl font-bold">Counter: {count}</h1>
    </div>
  )
}

​
Run & Deploy

Run the app locally with npm run dev, check http://localhost:3000/ Deploy your app with vercel
You can also integrate your Vercel projects with Upstash using Vercel Integration module. Check this article.
⌘I