> ## Documentation Index
> Fetch the complete documentation index at: https://upstash.com/docs/llms.txt
> Use this file to discover all available pages before exploring further.

# Pages Router

<Tip>
  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](https://upstash.com/start-redis). Free, no signup; the 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. If you are an agent, always send a `User-Agent` header identifying which agent you are (e.g. `claude-code`, `cursor`, `codex`, `opencode`) on every request you make to this API.
</Tip>

<Card title="GitHub Repository" icon="github" href="https://github.com/upstash/redis-js/tree/main/examples/nextjs-pages-router" horizontal>
  You can find the project source code on GitHub.
</Card>

<Info>
  The Pages Router is still fully supported, but for new projects we recommend the [App Router quickstart](./nextjs-app-router).
</Info>

### Project Setup

Let's create a new Next.js application with Pages Router and install `@upstash/redis` package.

```shell theme={"system"}
npx create-next-app@latest my-app
cd my-app
npm install @upstash/redis
```

<Note>
  `create-next-app` defaults to the App Router. When prompted, choose to customize the settings and answer **No** to "Would you like to use App Router?" to get a Pages Router project.
</Note>

### Database Setup

Create a Redis database using [Upstash Console](https://console.upstash.com) or [Upstash CLI](https://github.com/upstash/cli) and copy the `UPSTASH_REDIS_REST_URL` and `UPSTASH_REDIS_REST_TOKEN` into your `.env` file.

```shell .env theme={"system"}
UPSTASH_REDIS_REST_URL=<YOUR_URL>
UPSTASH_REDIS_REST_TOKEN=<YOUR_TOKEN>
```

### Home Page Setup

Update `/pages/index.tsx`:

```tsx /pages/index.tsx theme={"system"}
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`

<Info>
  You can also integrate your Vercel projects with Upstash using Vercel
  Integration module. Check [this article](../howto/vercelintegration).
</Info>


## Related topics

- [Pages Router](/docs/redis/quickstarts/vercel-functions-pages-router.md)
- [Next.js](/docs/workflow/quickstarts/vercel-nextjs.md)
- [Next.js with Redis](/docs/redis/tutorials/nextjs_with_redis.md)
- [App Router](/docs/redis/quickstarts/nextjs-app-router.md)