GitHub Repository

You can find the project source code on GitHub.

​
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>

​
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.

Was this page helpful?

Pages RouterPages Router