DEV Community

Sh Raj
Sh Raj

Posted on

9 2 2 2 2

How to Add Rate Limiting to Your Next.js App Router

How to Add Rate Limiting to Your Next.js App Router

Rate limiting is an essential technique to protect your application from abuse by controlling the number of requests a user can make in a given time frame. In this tutorial, we'll walk you through adding rate limiting to your Next.js application using the App Router and middleware. We'll cover both TypeScript and JavaScript implementations.

Why Rate Limiting?

Rate limiting helps to:

  • Prevent denial-of-service (DoS) attacks
  • Control API usage and prevent abuse
  • Ensure fair usage among all users
  • Protect server resources

Setting Up Middleware for Rate Limiting

We'll use the rate-limiter-flexible package for implementing rate limiting. It supports various backends, including in-memory, Redis, and more.

Step 1: Install the Required Package

First, install the rate-limiter-flexible package:

npm install rate-limiter-flexible
Enter fullscreen mode Exit fullscreen mode

Step 2: Create Middleware

Next, create a middleware file in your project root. We'll provide both TypeScript and JavaScript examples.

TypeScript Implementation

Create a middleware.ts file:

// middleware.ts

import { NextResponse } from 'next/server';
import type { NextRequest } from 'next/server';
import { RateLimiterMemory } from 'rate-limiter-flexible';

// Initialize the rate limiter
const rateLimiter = new RateLimiterMemory({
  points: 10, // Number of points
  duration: 1, // Per second
});

export async function middleware(request: NextRequest) {
  try {
    // Consume a point for each request
    await rateLimiter.consume(request.ip);

    // If successful, proceed with the request
    return NextResponse.next();
  } catch (rateLimiterRes) {
    // If rate limit is exceeded, send a 429 response
    return new NextResponse('Too many requests', { status: 429 });
  }
}

// Specify the paths that will use this middleware
export const config = {
  matcher: '/api/:path*',
};
Enter fullscreen mode Exit fullscreen mode

JavaScript Implementation

Create a middleware.js file:

// middleware.js

const { NextResponse } = require('next/server');
const { RateLimiterMemory } = require('rate-limiter-flexible');

// Initialize the rate limiter
const rateLimiter = new RateLimiterMemory({
  points: 10, // Number of points
  duration: 1, // Per second
});

async function middleware(request) {
  try {
    // Consume a point for each request
    await rateLimiter.consume(request.ip);

    // If successful, proceed with the request
    return NextResponse.next();
  } catch (rateLimiterRes) {
    // If rate limit is exceeded, send a 429 response
    return new NextResponse('Too many requests', { status: 429 });
  }
}

// Specify the paths that will use this middleware
const config = {
  matcher: '/api/:path*',
};

module.exports = { middleware, config };
Enter fullscreen mode Exit fullscreen mode

Step 3: Testing Your Middleware

Start your Next.js development server and make multiple requests to any API route under /api/ to verify that the rate limiting is enforced. After the allowed number of requests, additional requests should receive a 429 Too Many Requests response.

Conclusion

By following these steps, you can effectively implement rate limiting in your Next.js application using the App Router and middleware. This will help you control the rate of requests to your API routes and protect your server from being overwhelmed by too many requests. For more scalable solutions, consider using a distributed store like Redis with RateLimiterRedis.

Happy coding!

Sentry blog image

Identify what makes your TTFB high so you can fix it

In the past few years in the web dev world, we’ve seen a significant push towards rendering our websites on the server. Doing so is better for SEO and performs better on low-powered devices, but one thing we had to sacrifice is TTFB.

Read more

Top comments (4)

Collapse
 
avisiboni profile image
AviSiboni_Simple β€’

Thanks for sharing. A few notes: most websites use Web Application Firewalls (WAFs), which means the preferred method is to implement this at the network level. If you decide to implement it at the code level, ensure you have the real user’s IP address, as it is often not forwarded.

Collapse
 
rayhan_islam_6ce80ceb58b1 profile image
Rayhan Islam β€’

Should I use it for the frontend side? this example for backend api

Collapse
 
sh20raj profile image
Sh Raj β€’

No, don't use it, this article is just for fun purpose

Collapse
 
moein_b727448bcc3fde10e6c profile image
moein β€’

usefull πŸ‘Œ

Billboard image

Use Playwright to test. Use Playwright to monitor.

Join Vercel, CrowdStrike, and thousands of other teams that run end-to-end monitors on Checkly's programmable monitoring platform.

Get started now!

πŸ‘‹ Kindness is contagious

Explore a sea of insights with this enlightening post, highly esteemed within the nurturing DEV Community. Coders of all stripes are invited to participate and contribute to our shared knowledge.

Expressing gratitude with a simple "thank you" can make a big impact. Leave your thanks in the comments!

On DEV, exchanging ideas smooths our way and strengthens our community bonds. Found this useful? A quick note of thanks to the author can mean a lot.

Okay