# Next.js with Redis

<Card title="GitHub Repository" icon="github" href="https://github.com/upstash/redis-js/tree/main/examples/nextjs-app-router" horizontal>
  You can find the project source code on GitHub.
</Card>
<Info>
  This tutorial uses Next.js App Router. If you want to use Pages Router, check out our [Pages Router tutorial](/redis/quickstarts/nextjs-pages-router).
</Info>

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.

```shell
npx create-next-app@latest
cd my-app
npm install @upstash/redis
```

### 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
UPSTASH_REDIS_REST_URL=<YOUR_URL>
UPSTASH_REDIS_REST_TOKEN=<YOUR_TOKEN>
```

<Note>
  If you are using the Vercel & Upstash integration, you may use the following environment variables:

  ```shell .env
  KV_REST_API_URL=<YOUR_URL>
  KV_REST_API_TOKEN=<YOUR_TOKEN>
  ```
</Note>

### Home Page Setup

Update `/app/page.tsx`:
```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`

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