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

# Next.js with Redis

> This tutorial shows how to use Upstash inside your Next.js application.

This tutorial uses Redis as state store for a Next.js application. We simply add
a counter that pulls the data from Redis.

See [code](https://github.com/upstash/examples/tree/master/examples/nextjs-with-redis)
and [demo](https://nextjs-with-redis.vercel.app/)

### `1` Create Next.js Project

Run this in terminal

```bash
npx create-next-app -e https://github.com/upstash/examples/tree/master/examples/nextjs-with-redis nextjs-with-redis
```

### `2` Create a Redis (Upstash) Database

* Create a database as [getting started](../overall/getstarted)

### `3` Set up environment variables

Copy the `.env.local.example` file in this directory to `.env.local`

```bash
cp .env.local.example .env.local
```

* `REDIS_URL`: Copy the url in the database page Upstash console

<Snippet file="redis/ioredisnote.mdx" />

### `4` Run the app

Install dependencies packages

```bash
yarn
```

Let's run the project

```bash
yarn dev
```

### `5` Live!

Go to [http://localhost:3000/](http://localhost:3000/) 🎉

### Notes:

* For best performance the application should run in the same region with the
  Redis database's region.
* Alternatively, counter can be read from the
  [APIs](https://nextjs.org/docs/api-routes/introduction) instead of
  getServerSideProps().