# Rate Limiting Next.js API Routes using Upstash Redis

> **Source:** https://upstash.com/blog/nextjs-ratelimiting
> **Date:** 2022-06-07
> **Author(s):** Noah Fischer
> **Reading time:** 2 min read
> **Tags:** serverless, nextjs, redis, ratelimit
> **Format:** text/markdown — machine-readable content for agents and LLMs

---

In this article, we will show how to rate limit your Next.js API routes using the [Upstash Rate limit SDK](https://github.com/upstash/ratelimit)

### Database Setup

Create a Redis database using [Upstash Console](https://console.upstash.com) or [Upstash CLI](https://github.com/upstash/cli). Copy the `UPSTASH_REDIS_REST_URL` and `UPSTASH_REDIS_REST_TOKEN` for the next steps.

### Project Setup

We will create a Next.js application and deploy to Vercel.

```shell
npx create-next-app@latest
```

Install @upstash/ratelimit:

```shell
npm install @upstash/ratelimit @upstash/redis
```

### The Code

Update your `pages/api/hello.js` as below and replace `UPSTASH_REDIS_REST_URL` and `UPSTASH_REDIS_REST_TOKEN`.

```js:pages/api/hello.js
import {Ratelimit} from "@upstash/ratelimit";
import {Redis} from "@upstash/redis";

const redis = new Redis({
  url: 'UPSTASH_REDIS_REST_URL',
  token: 'UPSTASH_REDIS_REST_TOKEN',
})

// Create a new ratelimiter, that allows 5 requests per 5 seconds
const ratelimit = new Ratelimit({
  redis: redis,
  limiter: Ratelimit.fixedWindow(5, "5 s"),
});

export default async function handler(req, res) {
// Use a constant string to limit all requests with a single ratelimit
// Or use a userID, apiKey or ip address for individual limits.
  const identifier = "api";
  const result = await ratelimit.limit(identifier);
  res.setHeader('X-RateLimit-Limit', result.limit)
  res.setHeader('X-RateLimit-Remaining', result.remaining)

  if (!result.success) {
    res.status(200).json({message: 'The request has been rate limited.', rateLimitState: result})
    return
  }

  res.status(200).json({name: 'John Doe', rateLimitState: result})
}
```

Here, we allow 5 requests per 5 seconds.

### Run

Run the app with `npm run dev`. Refresh the browser more than 5 times and you will see the rate limiting in action.

```text
{"message":"The request has been rate limited.","rateLimitState":{"success":false,"limit":5,"remaining":-1,"reset":1654546770000,"pending":{}}}
```

### Possible Enhancements

- Use your user's id or IP address as identifier to limit the usage per user.

```js
const identifier = getClientIp(req);
const result = await ratelimit.limit(identifier);
```

- Use [Sliding Window Algorithm](https://github.com/upstash/ratelimit#sliding-window) for a smoother (but more expensive) rate limiting experience.

```js
const ratelimit = new Ratelimit({
  redis: redis,
  limiter: Ratelimit.slidingWindow(10, "10 s"),
});
```

- Use [Token Bucket Algorithm](https://github.com/upstash/ratelimit#token-bucket) to tolerate some amount of spike.

```js
const ratelimit = new Ratelimit({
  redis: redis,
  limiter: Ratelimit.tokenBucket(5, "10 s", 10),
});
```

- Use [multiple Redis in different regions](https://github.com/upstash/ratelimit#multiregionly-replicated-ratelimiting) if your Next.js application is deployed to different regions. This will help you to minimize latency for different locations.

- Keep and read your Upstash Redis credentials from environment variables or secret store.