is there any documents or ways to implement rate limit to nextjs api routes? using app router
Unanswered
Ashy Storm-Petrel posted this in #help-forum
Ashy Storm-PetrelOP
been seeing stuff about it on the pages router but nothing much with app router
42 Replies
do you want to have a rate limit on a particular API or multiple APIs?
@tafutada777 do you want to have a rate limit on a particular API or multiple APIs?
Ashy Storm-PetrelOP
any would work i just want to add rate limit and how what i need and have to do
if you got example for both would be great
you need to implement it in middleware instead of apis. middleware is a sort of reverse proxy, which intercepts requests from users. here is my poc project that uses Redis cache.
https://github.com/tfutada/zenn-nextjs/blob/main/middleware-2.ts
https://github.com/tfutada/zenn-nextjs/blob/main/middleware-2.ts
if you host a Next.js on VPS with a single instance, you can use a global variable.
Ashy Storm-PetrelOP
wouldn't radis get expensive if someone DDOS attack ?
yes. expensive.
Ashy Storm-PetrelOP
can i use this example for single route or it's middleware so all routes
i was hoping for something like express rate limiter lol
import { rateLimit } from 'express-rate-limit'
const limiter = rateLimit({
windowMs: 15 * 60 * 1000, // 15 minutes
limit: 100, // Limit each IP to 100 requests per `window` (here, per 15 minutes)
standardHeaders: 'draft-7', // draft-6: `RateLimit-*` headers; draft-7: combined `RateLimit` header
legacyHeaders: false, // Disable the `X-RateLimit-*` headers
// store: ... , // Use an external store for more precise rate limiting
})
// Apply the rate limiting middleware to all requests
app.use(limiter)it's like as easy as this
where do you host?
Ashy Storm-PetrelOP
i will host on vercel
okay. first off, you need to understand the diff btw Serverless and self-hosted on VPS.
@tafutada777 okay. first off, you need to understand the diff btw Serverless and self-hosted on VPS.
Ashy Storm-PetrelOP
yes please
your example from Express is supposed to run on a self-hosted VPS environment.
so things are so simple. you can use a global variable to manage request counter,
limiter.Ashy Storm-PetrelOP
aha i see
so my only option for now would be redis
however, Vercel, which is serverless environment, which uses AWS lambda and Cloudflare Worker under the hood, multiple instances up and down in short time period.
so you can not use a global variable in serverless environment, so you need Redis cache.
@tafutada777 you need to implement it in middleware instead of apis. middleware is a sort of reverse proxy, which intercepts requests from users. here is my poc project that uses Redis cache.
https://github.com/tfutada/zenn-nextjs/blob/main/middleware-2.ts
Ashy Storm-PetrelOP
i see can this work on single route?
if that's the case i think adding rate limit to only otp routes would be best approach
Vercel is a bit tricy as it gets involved in Cloudflare Worker.
but why you concern about rate limit? DDoS?
Ashy Storm-PetrelOP
OTP codes
i want the OTP codes to be active for like an hour so i want user to send 1 request every hour or so
here's a guide: https://upstash.com/blog/nextjs-ratelimiting
you'll be locked into using redis and more specifically upstash's serverless redis, but it'll give you an idea on how to implement ratelimiting.
you'll be locked into using redis and more specifically upstash's serverless redis, but it'll give you an idea on how to implement ratelimiting.
actually not sure if this is app dir though
Ashy Storm-PetrelOP
that is page dir
yeah, mb didn't notice until after I posted
Ashy Storm-PetrelOP
but thank you for the comment i will be using redis
@tafutada777 you need to implement it in middleware instead of apis. middleware is a sort of reverse proxy, which intercepts requests from users. here is my poc project that uses Redis cache.
https://github.com/tfutada/zenn-nextjs/blob/main/middleware-2.ts
Ashy Storm-PetrelOP
this is with the app dir
looks like that uses upstash too
how abt using a cookie?
@tafutada777 how abt using a cookie?
Ashy Storm-PetrelOP
how can we implement that?
that sound like good idea
what's the usecase for the cache?
i want the OTP codes to be active for like an hour so i want user to send 1 request every hour or soso timestamp or something
@tafutada777 > i want the OTP codes to be active for like an hour so i want user to send 1 request every hour or so
so timestamp or something
Ashy Storm-PetrelOP
ahhhh that's also great idea!
and check the time and deny request
i didn't think about that, it's actually smart
Satin
&1089670008898080870 after applying the matcher like '/dashboard/:path*' after refreshing the url changes to /dashboard/[path]