Name: Add a Middleware to a Next.js API Route
Uploaded: 2022-03-18T17:19:58-05:00
Description: In this lesson, you're going to learn how to create a Middleware that checks for the existence of an Authentication header. If that header doesn't exist, we'll terminate the request and let it continue if it does. We'll abstract that functionality in a middleware so we can reuse it in other API routes.

Create a Static REST Endpoint in Next.js

Create a Dynamic Next.js API route 

Create a Catch All Next.js API route 

Create an Optional Catch-All API Route in Next.js

Handle Different HTTP Verbs in a Next.js API Route

Add a Middleware to a Next.js API Route

Create an API Route Using the next-connect Package

Add Middleware to an API Route Created with next-connect

Hide Sensitive Information from the Consumers of Next.js API

Effectively Build RESTful APIs using Next.js API Routes

In this lesson, you're going to learn how to create a Middleware that checks for the existence of an Authentication header. If that header doesn't exist, we'll terminate the request and let it continue if it does. We'll abstract that functionality in a middleware so we can reuse it in other API routes.

https://app.egghead.io/api/v1/lessons/next-js-add-a-middleware-to-a-next-js-api-route/subtitles

Instructor: [0:00] Let's create a testing middleware API route, to test this out. Let's begin by creating a function called handler() that has a request and a response. Let's export that function as the default export for this API route. Let's return a response that has a status of 200. This returns a JSON with a message "OK."

[0:35] Let's try this out to see that it is working. Yes, indeed, it is working. We check if the request headers contains an authentication header. If it doesn't, then we can return a 401, a JSON that says message "Error." Let's test this out. We do the same request that we did before. Now we see that we get back a 401 and a message that says Error.

[1:15] Let's create a function that is called withAuthentication(). This will receive a handler function. This function also returns a function that accepts our requests, no response. We are going to grab what we have in the handler, and we're going to paste it here. Lastly, we're going to return a handler function with request and a response.

[1:52] Let's wrap the default export with withAuthentication. We're going to pass the handler function to it. Let's go over the input again. This middleware, this returns an error with a 401. All right. Now, we're going to call the same endpoint, but we're going to pass authentication header and we're going to set it to true.

[2:14] It doesn't matter in the end. We're just checking that we have that header present. It works. We're getting back a 200 and the OK message.

[2:26] To recap, in order to create a middleware for a Next.js API route, we have to create a function that returns a function. The first function will receive the handler, which is the one that we created above. The second function will have a request and a response. Then, we do whatever we want.

[2:47] In this case, we're going to check the authentication header, and we'll return the response. If not, we let the request continue its natural course. The last thing that we have to do is we have to wrap the handler function with the middleware.

Add a Middleware to a Next.js API Route

Share this video with your friends

Course

Effectively Build RESTful APIs using Next.js API Routes