Name: Add Middleware to an API Route Created with next-connect
Uploaded: 2022-03-18T17:20:21-05:00
Description: We'll learn how to create a middleware function for next-connect. This middleware will work at the route level, for example, for every request that hits the /api/next-connect-middleware endpoint, or at the HTTP verb level, GET /api/next-connect-middleware

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

We'll learn how to create a middleware function for next-connect. This middleware will work at the route level, for example, for every request that hits the /api/next-connect-middleware endpoint, or at the HTTP verb level, GET /api/next-connect-middleware

https://app.egghead.io/api/v1/lessons/next-js-add-middleware-to-an-api-route-created-with-next-connect/subtitles

Instructor: [0:00] Let's start by creating our handler with the help of next-connect. Let's start handling any GET requests. We have the request and response function. This will return a response that says, "Message GET." Let's export the handler as the default export for this file. Let's test this out. It works.

[0:29] Let's create a middleware withAuthentication(). This is a function that has a request, a response, and then this next as its arguments. This middleware is going to check if the request doesn't have an authentication header present.

[0:51] In the case of the authentication header is missing, we're going to return a 401. We'd have a message that says, "Error." If it is present, what we do is we return the next function. Let's try this out.

[1:12] Let's call it withAuthentication middleware right before the callback for the GET method. Let's try this out. Indeed, we get a 401 back, because we didn't set the authentication header in our request. Now let's send an authentication header to that endpoint again. Yes, we get back a GET and a 200-status code.

[1:35] If we want this middleware to work on any of the verbs that this API route handles, we can use the use() function and call the withAuthentication middleware there. Let's try that out. We're going to call the next connect middleware API route with the authentication headers set to true, and we get back a 200, but if we remove the header, you will get back a 401.

[2:00] To recap, in order to create a middleware function on an API route that uses next-connect, we have to create a function that has three arguments, the request, a response and the next function, and we have to return next for the request to keep going.

[2:15] In order to use it, we will pass the middleware that we just created to the use function, and it will run on every single handler. For instance, it will run on GET, on the POST and the DELETE, and the PATCH. If what we want is to run that middleware just for the GET, we will call it right before the callback for the GET handler.

Add Middleware to an API Route Created with next-connect

Share this video with your friends

Course

Effectively Build RESTful APIs using Next.js API Routes