Pages Router

GitHub Repository

You can find the project source code on GitHub.

Project Setup

Let’s create a new Next.js application with Pages 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 /pages/index.tsx:

/pages/index.tsx

import type { InferGetServerSidePropsType, GetServerSideProps } from 'next'
import { Redis } from "@upstash/redis";

const redis = Redis.fromEnv();

export const getServerSideProps = (async () => {
  const count = await redis.incr("counter");
  return { props: { count } }
}) satisfies GetServerSideProps<{ count: number }>

export default function Home({
  count,
}: InferGetServerSidePropsType<typeof getServerSideProps>) {
  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.