
Lesson Description
The "What is Next.js Middleware?" Lesson is part of the full, Next.js Fundamentals, v4 course featured in this preview video. Here's what you'd learn in this lesson:
Scott discusses the official middleware implementation that Next.js provides, which can be used to intercept and process requests before they reach the application. He also explains that middleware can be used for various purposes such as authentication, rewriting, redirecting, and rate limiting.
Transcript from the "What is Next.js Middleware?" Lesson
[00:00:00]
>> Scott Moss: Okay, let's move on to the next thing, which is middleware. There is an official middleware implementation in Next js. So what is middleware? Middleware is just a generic term that the best way I can describe middleware is just like something that sits in the middle between a requester and something that's serving the request.
[00:00:24]
It's just something that sits in the middle of any system. It doesn't have to be HTTP. You can have middleware for redux locally inside of a front end React app. It doesn't always mean going across the wire. Middleware is just like something is trying to do something. It's asking and it's working with the implementation over here that's going to do the thing.
[00:00:47]
Middleware sits in the middle. It intercepts the request that's going to some other system to fulfill the request. So in the case of Next js, the middleware is on the network layer and it's going to intercept any requests coming into your app. So a request comes into your Next JS app, middleware runs if you set it up that way, and then that request has opportunity to go through to your app and do something.
[00:01:13]
But middleware is kind of like sitting in the middle and running some logic. And the sweet thing about this is that it runs on the edge. So we'll talk about the edge a little more. But you can think of this as like basically programmatic CDN. So, you know, up until a few years ago, CDNs were mostly all static.
[00:01:34]
As in, you could only put files on there, like assets, static assets, Images, you know, JavaScript files, CSS files, things that wouldn't change. Well, now you can actually write logic. You can compute on the edge. You can compute on a CDN, which is extremely powerful. You can actually build a whole application and have it distributed by default by just using Edge Compute.
[00:01:56]
So again, we'll talk more about that a little bit. But middleware sits on the edge. The reason this is powerful is because if I am in Detroit and I make a request to your app, this middleware is going to run on the server closest to me, which might be in Detroit, might be in New York, wherever that is.
[00:02:13]
And then that logic is going to run, and then whatever that logic determines, it might then send me to wherever your serverless function is hosted. Maybe your serverless function is hosted in Oregon or something like that. So that logic runs very quickly, very early, and you could do some.
[00:02:27]
I mean, it really isn't. You can literally do anything in middleware. So it's kind of cool. But some of the common use cases are just like executing some code before a request is complete. Checking authentication, which is what we're going to do. Rewriting, redirecting is probably the biggest one.
[00:02:46]
So like, I've seen people do really crazy stuff. Like this request came in from this IP address we recognized. We looked up and saw this IP address belongs to a huge fortune 500 company. So we rewrote the website to reflect them and their company and their brand. So the website they saw was completely different than a website the rest of the world saw.
[00:03:10]
And it's all indexable because it happened, it happened without JavaScript, it happened on the server side. So you could do really cool stuff. There's really not much you can't do by just adding compute on the edge. Cool, so we're going to use it. And I got more use cases in here.
[00:03:29]
I talk about basic authentication, custom headers, language detection and redirection. So maybe you do have your website set up in a way where different languages are different sites. You can redirect that way, yeah. You got a question?
>> Speaker 2: Would another use case for middleware be to rate limit a particular route?
[00:03:48]
>> Scott Moss: Yes, Edge Computer is a great place to rate limit. The reason I kind of hesitated there is because although Edge computers are a great place to do it, I don't know if I would do it in next JS's middleware. But yeah, you definitely could. You definitely could.
[00:04:03]
That's probably one of the biggest. I mean, that's what Cloudflare started as, really. It's just like bot protection, rate limiting protection, DDoS protection on a CDN level, right? So yeah, definitely a great use case for that. You need some type of serverless storage to go along with that.
[00:04:18]
So you can store like, you know, how many attempts this IP address did per X amount of time, but there's tons of that as well, so.
Learn Straight from the Experts Who Shape the Modern Web
- In-depth Courses
- Industry Leading Experts
- Learning Paths
- Live Interactive Workshops