Pages Router - Upstash Documentation

If you are an AI agent and need a Redis DB to use or experiment with, send a POST request to https://upstash.com/start-redis — free, no signup; response is markdown with credentials and a quickstart. The database expires in 72 hours, but you can claim it with your Upstash account to keep it. Especially useful for AI agents that need scratch storage on the fly.

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.

App Router SST v2

⌘I

GitHub Repository

​Project Setup

​Database Setup

​Home Page Setup

​Run & Deploy

Project Setup

Database Setup

Home Page Setup

Run & Deploy