Next.js is a minimalistic framework for server-rendered React applications.

Kamil Khadeyev

We will learn how to create a REST endpoint that returns a hardcoded json response. Apart from that, we'll create deeply nested routes by following Next.js' file based router.

Create a Static REST Endpoint in Next.js

We're going to learn how to read dynamic segments from a URL using dynamic routes.

Create a Dynamic Next.js API route 

We're going to learn how to create an API route that can read at least one or more dynamic segments from a URL.

Create a Catch All Next.js API route 

We're going to learn how to create an API route that can read 0 or many dynamic segments from a URL.

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

You'll learn how to handle multiple HTTP verbs in your API route (GET, POST, PATCH, PUT and DELETE). Also, you'll learn how to create a fallback 404 route in case the request doesn't match what you need.

Handle Different HTTP Verbs in a Next.js API Route

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.

Add a Middleware to a Next.js API Route

We'll learn an alternative way of creating API routes using the next-connect package. next-connect gives us an alternative that would feel familiar to anyone that has worked with Express in the past.

- https://github.com/hoangvvo/next-connect

Create an API Route Using the next-connect Package

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

Add Middleware to an API Route Created with next-connect

We'll learn how to use Next.js API Routes to hide sensitive information from the clients. In this case, we're calling the JSON Placeholder API with a "secret" value in the headers. All that sensitive information is hidden from the clients since they don't call, or even know, that we're calling the JSON Placeholder API under the hood.

Hide Sensitive Information from the Consumers of Next.js API

In this course, Michael Chan will teach you how to integrate Storybook 6.3 with Next.js 11 so that you can flawlessly build UIs. 

Integrate Storybook in a Next.js Application

You'll build a static app with authentication that is backed by a database, change the structure of that database without compromising data, and take payments for subscriptions.

Build a SaaS product with Next.js, Supabase and Stripe

In this course, we're going to learn how to harness the power of Next.js + TypeScript and how to work with Netlify in order to deploy our site for others to enjoy!


Build a site from scratch with Next.js, TypeScript, Emotion and Netlify

Effectively Build RESTful APIs using Next.js API Routes

https://app.egghead.io/api/v1/lessons/next-js-create-a-static-rest-endpoint-in-next-js/subtitles

Instructor: [0:00] We're going to create an api folder inside the pages directory. Then we're going to create a greeting.js file inside of it. The next thing that we're going to do is to create a function, and we are going to call it handler, but you can call it whatever you want.

[0:17] This function accepts two parameters. The first one is the request object. It contains all the information about the request. For instance, the request header, the request body, the request method, etc. The second parameter is a response object, which has all the methods that we can use to respond back to the client.

[0:36] This API route will send back a JSON to the client. We call the JSON method from the response object. We said, "Agreed. Hello there."

[0:51] The last thing that we have to do is to explore the handler function as a default export. Let's make a GET request to localhost:3000/api/greeting, and we'll see that we get back the object that we have on the left.

[1:07] We will achieve the same if we have a greeting folder and if we rename this file to index.js. Let's send back the same request from last time and we get the same response back from the server. If we wanted to create a deeply nested route, we can keep adding folders here. Let's add a deeply folder. What we can do is to call the /api/greeting/deeply endpoint. I will get back the same response.

[1:39] To recap, in order to create an API route, we will have to create a folder called api inside the pages folder, and then start creating files inside of it. Each one of those files should have a function that accepts two parameters, the request object and the response object. Then, we will have to export that function as the default export for that file.

https://app.egghead.io/api/v1/lessons/next-js-create-a-static-rest-endpoint-in-next-js/transcript

https://app.egghead.io/api/v1/lessons/next-js-create-a-dynamic-next-js-api-route/subtitles

Instructor: [0:01] Let's create a folder called dynamic.

[0:04] Now, let's create a file called openAngleBracketSlugWeCloseTheAngleBracket.js. Let's create a function called handler() that receives a request and a response. What we're going to do is, we are going to extract this log from the request.query. Let's return it as JSON. The last thing that we have to do is to export handler as a default export.

[0:42] Now, we're going to call the API/API/dynamic and let's add 1 here. As we can see, we are returning the 1 in the URL in the JSON response. Let's change 1 with 2 and we'll see that we are returning 2 as a slug. It's worth noting that if we try to visit dynamic/1/2, we get a 404 back, because that route doesn't exist.

[1:11] To recap, in order to create dynamic API routes, we have to create files that start with an angle bracket, then we can add the dynamic segment we want, and then we close the angle bracket. After that, we can get the dynamic segment from the request.query.

https://app.egghead.io/api/v1/lessons/next-js-create-a-dynamic-next-js-api-route/transcript

https://app.egghead.io/api/v1/lessons/next-js-create-a-catch-all-next-js-api-route/subtitles

Instructor: [0:00] Let's start by creating a folder called catch-all/inside/pages/api. Let's create a file that its name starts with an angle bracket then it is followed by three dots. Then we're going to call it slugs. We close the angle bracket, and this is going to be a JavaScript file.

[0:22] The next thing that we're going to do is to create a function that is called handler(). It will receive a request, a response, and we are going to export it as the default export for this file. Let's grab those slugs from the request.query.

[0:48] Let's return a JSON to the client with these slugs that we just grabbed from the query. Let's try out this endpoint. Let's make an API request to api/catch-all/1. We'll see that we get back an array.

[1:07] The next thing that we're going to do is that we're going to add another parameter to a URL. For instance, let's start 2 here and as we can see, we get back slugs with  and  inside an array. It is worth noting that if we don't pass any URL param to the catch-all route, we're going to get back a 404.

[1:30] To recap, to create a catch-all route, we need to create a file that it starts with an angle bracket, and it is followed by three dots. Then we add the dynamic parameter name. We close the angle bracket, and this should be a JavaScript file. Then we can grab that dynamic parameter from the request.query, and that dynamic parameter will contain all the URL segments as an array of strings.

https://app.egghead.io/api/v1/lessons/next-js-create-a-catch-all-next-js-api-route/transcript

https://app.egghead.io/api/v1/lessons/next-js-create-an-optional-catch-all-api-route-in-next-js/subtitles

Instructor: [0:00] Let's create a folder called optional-catch-all. Now, let's create a file that starts with angle bracket then it is followed by three dots then its dynamic parameter is going to be called slugs. We close the angle brackets, and this is a JavaScript file.

[0:24] The next thing that we have to do is to create a function called handler(). This function will receive a request object and a response object. We're going to export that handler function as a default export.

[0:43] The last thing that we want to do is to grab the slugs from the request.query and we're going to return that as a JSON.

[0:56] Now, let's make a request to the /api/ optional-catch-all endpoint. We see that we get back at 200 and an empty object. This is because we didn't pass anything after the optional catch-all route.

[1:13] Let's call the same endpoint with A, B and C. We see that we get back the slugs and an array with A, B and C.

[1:24] To recap, in order to create an optional catch-all route, what we have to do is that we have to create a file that starts with our angle bracket, then it is followed by three dots. Then we name the dynamic segment, and we close with double angle bracket again. After doing that, we can grab the dynamic segment from the request.query object.

[1:47] Also, if we don't pass anything to the catch-all route, we get back an empty object. If we pass any number of URL params to the catch-all route, we get back those params back as an array of strings.

https://app.egghead.io/api/v1/lessons/next-js-create-an-optional-catch-all-api-route-in-next-js/transcript

https://app.egghead.io/api/v1/lessons/next-js-handle-different-http-verbs-in-a-next-js-api-route/subtitles

Instructor: [0:00] Let's start by creating a route that is going to be called verbs. This route will have a function. We're going to call it handler(). This receives a req and a res. We're going to export that handler as the default export for this file.

[0:20] The next thing that we're going to do is we're going to get the method that's coming from the request, and we're going to compare it with some strings. Here, we have if the method equals to GET, then we're going to respond to the client with a status of 200, and we're sending back a json that says ({ message: "GET" }).

[0:49] Now, let's try out this endpoint. We're going to send a GET request to localhost:3000/api/verbs. We see that we get back a message that says GET.

[1:02] Let's create a fallback response. We're going to set the status to 404. We're going to send back a json that says ({ message: "Not found" )}. Now, we're sending a POST request to that same endpoint, and we should get a 404 back. Yes, indeed, that is what we got.

[1:26] Let's check the method against a POST request. I'm going to return a 200 as well. 200 here and a json that says ({ message: "POST" }). Let's try that out in our terminal. We're going to hit api/verbs with the POST method. Yep, we get back a 200 with the message POST.

[1:53] Let's do the same but with the other verbs. We're going to do this with PATCH. PATCH here. Then PUT. Last but not least, we're going to do DELETE. Let's see. We're going to send a PATCH. Now we're going to send a PUT to api/verbs. Last but not least, we're going to send DELETE. There you go.

[2:36] To recap, if we want our API Route to handle different HTTP verbs, what we have to do is we have to get the method from the req object. Then we check it against...This is strings. For instance, if you're checking for a GET, then we do a === and then GET in uppercase, same for POST, HATCH, PUT and DELETE.

[3:04] In the case that our API Route doesn't handle all the HTTP verbs, let's make sure that we create a fallback response to the client. In this case, we're going to respond with a 404 and a json message that says, "Not found."

https://app.egghead.io/api/v1/lessons/next-js-handle-different-http-verbs-in-a-next-js-api-route/transcript

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.

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

https://app.egghead.io/api/v1/lessons/next-js-create-an-api-route-using-the-next-connect-package/transcript

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.

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

https://app.egghead.io/api/v1/lessons/next-js-hide-sensitive-information-from-the-consumers-of-next-js-api/subtitles

Instructor: [0:00] All right. Let's start by creating a secret proxy API route. We're going to create a handler function that has two arguments, the request and the response. We're going to export that handler function as the default export for this file.

[0:24] What this route is going to do, is that we are going to get a secret todo item from this function that we're going to create in a second that is called getSuperSecretData. We're going to return it to the client as a JSON.

[0:43] We're going to call this todo. This is going to be the secret todo. The idea behind the getSuperSecretData function is that we're going to call another endpoint with sensitive data. Here, we are going to call the JSONPlaceholder API. Here, we're going to send sensitive information in our headers. Let's create an Authorization header. This is going to be superSecretValue.

[1:20] Now, we're going to return whatever that JSONPlaceholder API has, and we just return their result. Let's call this secret proxy endpoint. We're going to print out the request information. As you can see, we don't have any Authorization header here. We're getting the JSONPlaceholder data through our secret proxy handler here.

[1:50] To recap, we can use API routes to hide sensitive information from the consumers of our API. In this case, getSuperSecretData is sending a request to JSONPlaceholder, and it is also setting an Authorization header with a superSecretValue that no one should know. Because all this is executed in Node, there is no way that the consumers know about it.

https://app.egghead.io/api/v1/lessons/next-js-hide-sensitive-information-from-the-consumers-of-next-js-api/transcript

Effectively Build RESTful APIs using Next.js API Routes

Alejandro Ñáñez

You might also like these resources:

Integrate Storybook in a Next.js Application

Build a SaaS product with Next.js, Supabase and Stripe

Build a site from scratch with Next.js, TypeScript, Emotion and Netlify

Credits

Course Content

You might also like these resources:

Integrate Storybook in a Next.js Application

Build a SaaS product with Next.js, Supabase and Stripe

Build a site from scratch with Next.js, TypeScript, Emotion and Netlify