Answer Engine: How to Set up Rate Limiting in Next.JS with Upstash Redis

--- type: transcript date: 2024-04-16 youtube_id: 3_aNVu6EU3Y --- # Transcript: Answer Engine: How to Set up Rate Limiting in Next.JS with Upstash Redis in this video I'm going to be showing you how you can set up rate limiting within your application I'm going to be demonstrating it within this answer engine project and I thought it'd be interesting cuz I saw a couple weeks ago Chachi BT no longer requires an account for you to use it and this is a little bit of a theme that I've started to see where you can just go to a link and start interacting with a project which I think is overall great now the reason why is important is say if you want to share the project with a wide number of people then you want to set up some sort of conditions and boundaries if say if you're just trying to protect some of those more expensive invocations that are within your application this as an example say you want to limit people to 10 requests every hour or something like that with this I'm going to be using up stash rdus and their rate limiting package up stash isn't sponsoring this video I just really wanted to show this package because it's incredibly powerful and super simple to set up and I think a lot of people will benefit from incorporating something like this to make an account on reddis just go to up stash.com there's a number of different products here that you can check out if you're interested once you're set up just go ahead and make database then once you're within here you'll see that you get 10,000 requests per day for your reddest database so incredibly generous free tier and then within here once your database is set up you can just grab these environment variables once we have that I'm going to pull down the repo here and then once we have it we're just going to go within the repo and then I'm just going to open up vs code terminal here within this new workspace once we have it set up I'm just going to install all the packages here now the first thing that we're going to do within the project is we're going to go within our application folder and within the configuration file here we're going to add a new key we're going to call this rate limiting we're going to set this to true this is going to be optional you don't need to use this within the application if you want to use the up stash implementation like I'm about to show you toggle this on to true and incorporate the other pieces once we have that set up we're just going to go with inaction. TSX and the first thing that we're going to do is we're going to include a number of new packages we're going to first just put in a comment we're going to say that this is optional I'm going to push this within the repo you can just go ahead and pull this down if you'd like we get a couple packages so just make sure to install these packages you can just mpm install and then we're just going to be incorporating the headers and that's going to be how we actually get the IP from the user as the key within our key value pair on how to detect how many queries a user has left go ahead get the environment variables so just make sure you've pasted in those en variables within yourb within the application here and then once you have all that set up you can just set your rate limit here so say if you want to have 10 requests every 10 hours if you want five requests every hour you can set it up like this so you can set it up for minutes say if you want five requests every 10 minutes it's really flexible and easy to set up now within our action here we're going to say okay if that configuration object is set to use rate limiting first we're going to declare the identifier this is going to be where you could put in something like a key if a user is logged in say if you do have authentication set up or if you just want to use their IP you could set up something like this once we have that we're going to wait for the response and the nice thing with the setup here is you're going to be able to access a number of different values so you don't just need to access whether it's successful or not you can also access how many attempts are left so say if you want to render within the UI like you have four requests left what have you or if you want to render when the request will reset say if you want to have a message that says something like you've exceeded your rate limit for today try again at this time and you could have it tomorrow or in a couple hours or whatever it is with gbd4 I know for a little while there they had something set up where if you reached a certain number of messages a motal would pop up and it would say okay basically try again in two hours or whatever the time frame was would tell you the time to try again for it you can do something very similar with this setup as well the rate limit has been reached we're going to stream that response back to our front end now within our front end all that we're going to do is if we go just like we did in the previous videos if you saw them is now we're going to add this new status and this status we're going to declare as a string and then once we have that set up within here we say if our type message of status equals rate limit reach we're going to go ahead and declare that within the state of our application once we have all that set up we can just head on over to where we render all of our different messages here and similarly we can just say if message status equals rate limit reached we can go ahead and render something here instead of this case of rendering a div here I'm just going to go ahead and say rate limit and then we're going to make a new component here at the top here we'll just go ahead and declare we'll say optional use up stash rate limiting and then here we're going to import our own component we just copy one that we already have here and I'm going to call this rate limit just like that from there we're just going to go with in our folder where we have all of our different components here and then we're going to make a new file called R here if I just go with nvs code and I C file say rate limit. TSX so all that this has here is we're just going to say that the rate limit is reached we're going to show that up stash logo we're going to say you've reached the rate limit for the current period but like I mentioned if you want to pass in more details you could pass in say the time that it will reset within here if you like you can change this out and pass in props here if you once we have that set up you can go ahead and test it here if you make a few different requests you'll see that it will render and then at a certain point once it reaches that limit won't be incurring those additional costs for those API calls or that llm response and all of that I encourage you check out upst Rus as you saw this is a super easy way on how you can incorporate this with you can use this on API end points you can use use this on nextjs applications you can use this in really a number of different ways I'm going to definitely be using it in more projects if you want to be sharing an example widely out there and you don't necessarily want to have users sign up because a lot of users will just bounce off your page if they have to sign up for something and you just want to say look at this cool thing that I built try it out and limit it with a certain amount of queries you can go ahead and set up something like this if you found this video useful please like comment share and subscribe otherwise that's it for this one I'll see you in the next one