4 Best Rate Limiting Solutions for Next.js Apps (2024)

When implementing rate limiting in a Next.js application, there are several effective solutions available. Let’s take a comprehensive overview of the best rate limiting options for Next.js:

This middleware for Express applications is widely used for managing how many requests a client can make in a given time frame.

Integration: You can use it in your Next.js API routes by importing the package and applying it as middleware.

Example:

import rateLimit from 'express-rate-limit';

const apiLimiter = rateLimit({
  windowMs: 15 * 60 * 1000, // 15 minutes
  max: 100, // limit each IP to 100 requests per windowMs
  message: 'Too many requests, please try again later.',
});

export default function handler(req, res) {
  apiLimiter(req, res, () => {
    res.status(200).json({ data: 'This route is rate-limited.' });
  });
}

Use Case: Ideal for simple rate limiting scenarios to prevent abuse and ensure fair usage.

This package is recommended in the Next.js documentation for rate limiting, particularly when using serverless functions.

Integration: It works well with Vercel KV, allowing you to store rate limit data in a Redis-like environment.

Example:

import { Ratelimit } from '@upstash/ratelimit';
import { kv } from '@vercel/kv';

const rateLimit = new Ratelimit({
  redis: kv,
  limiter: Ratelimit.slidingWindow(5, '10 s'), // 5 requests in 10 seconds
});

export default async function handler(req, res) {
  const { success } = await rateLimit.limit(req.ip);
  if (!success) {
    return res.status(429).json('Too many requests');
  }
  res.status(200).json({ message: 'Request successful' });
}

Use Case: Best for serverless environments where you need efficient and scalable rate limiting.

Using Redis for rate limiting is effective due to its speed and efficiency in handling concurrent requests.

Integration: Libraries like ioredis can be used to implement custom rate limiting logic.

Example:

import Redis from 'ioredis';
const redis = new Redis();

const LIMIT = 5; // requests
const DURATION = 60; // seconds

export default async function handler(req, res) {
  const ip = req.headers['x-forwarded-for'] || req.connection.remoteAddress;
  const key = `rate-limit:${ip}`;

  const current = await redis.incr(key);
  if (current === 1) {
    await redis.expire(key, DURATION);
  }
  if (current > LIMIT) {
    return res.status(429).json('Too many requests');
  }
  res.status(200).json({ message: 'Request successful' });
}

Use Case: Suitable for applications with high traffic that require robust rate limiting.

Vercel provides edge middleware that allows you to implement rate limiting at the edge, which can enhance performance and reduce latency.

Integration: You can use the @upstash/ratelimit package in conjunction with Vercel KV for efficient rate limiting.

Example:

import { NextRequest, NextResponse } from 'next/server';
import { Ratelimit } from '@upstash/ratelimit';
import { kv } from '@vercel/kv';

const rateLimit = new Ratelimit({
  redis: kv,
  limiter: Ratelimit.slidingWindow(5, '10 s'),
});

export default async function middleware(request) {
  const ip = request.ip || '127.0.0.1';
  const { success } = await rateLimit.limit(ip);
  return success ? NextResponse.next() : NextResponse.redirect('/blocked');
}

Use Case: Ideal for applications deployed on Vercel, providing a seamless way to manage rate limits at the edge.

Conclusion

The best rate limiting solution for your Next.js application will depend on your specific needs, such as the environment (serverless vs. traditional server), the expected traffic load, and the complexity of your rate limiting requirements. express-rate-limit is great for straightforward implementations, while @upstash/ratelimit and Redis-based solutions offer more robust options for high-traffic scenarios. Utilizing Vercel Edge Middleware can enhance performance and efficiency for applications hosted on Vercel.

Tell me what you’re using in the comments and share your project if you’re building using Next.js. I’m building a Micro AI SaaS with Next.js. Follow my journey to see what I’m building and how I’m building it.