How do Next.js route handlers work? - React.js Tutorial

- [Instructor] All right, so now that we know a little bit more about how these Next.js route handlers work, what we're going to do next is jump in and see how we can create one of these, as well as communicate with it, right, in other words, how to test that it does what it's supposed to do. So in order to do this, what we're going to do is open up our ecommerce application, the folder that our Next.js application was in. And inside the app directory, we're going to create a new folder, and for now we're just going to call it "hello". This is just going to be a simple demonstration of how these things work. So the thing about these route handlers is that they work in a very similar way to how pages work, right? The difference here is that instead of sending back a rendered React component, we're just going to send back whatever data it is that our application is going to need. So in this case, we're going to get started by just creating a very simple route handler that instead of sending back a rendered React component is going to send back a string saying "hello," all right? So here's what this is going to look like. We're going to say new file, and the convention here is to call these files route.ts, all right? You don't need .tsx because we're not creating React components here. It's just route.ts. And inside here, we get to define as many functions as we want for different HTTP methods, all right? And I'll describe this in a little bit more detail later as well. But for now, what we're going to do is we're just going to create a simple function that returns what we want to send back to the client side when it receives a request. So here's what this is going to look like. We're just going to say export async function, and we're going to call this function, GET(), with all capital letters, all right? Now this corresponds with the HTTP GET() method, which is usually used to load data. So as you'll see, we're going to have our frontend actually make a request to this route handler to load things like products or users' shopping carts. We'll go into much more detail on that shortly. But for now, all we're going to have to do, as I said, is return what we want to send back to the client. And in this case, we're just going to say: return new Response, with a capital R, this is just how we create HTTP responses inside these route handlers. We don't need to import this or anything, it's automatically provided by Next.js. And inside of here, we get to define what we want to send back as part of that response. So as I said, we're just going to do a simple string saying: "Hello from a Next.js route handler!" All right, so pretty straightforward. Now that we have this route handler, let's take a look at how to test this thing. The first thing that we're going to do, of course, is we're going to need to run our app. So if you already have your app running from the previous chapter, that's fine. Otherwise we're just going to run: npm run dev again to start this thing up. And, oops, it looks like we got an error because I'm not in the correct folder. Make sure that you're in the ecommerce folder when you do this. So I'm just going to say: cd ecommerce. And let's try that again. We're going to say: npm run dev, and that should run our application. So again, the nice part about these route handlers is that they are served by the same thing that's going to render our React components and send them to our browser. So just like how we were able to go into a browser and go to whatever this string is /products in order to see the products page, or /product/123 to see a specific product, we can also send requests to the route handlers that we define just by looking at their file path inside the app directory. So again, we just created this hello folder inside app. So we can send a request to this route handler and actually activate this thing and see this response by going to, again, whatever that string is, to the Codespaces, it'll be localhost:3000 if you're just doing this locally. We're going to say /hello, right, the name of the folder. And sure enough, what we'll see is that that sends back this string saying, "Hello from a Next.js route handler!" So again, that's the basic way of creating route handlers in Next.js. Let's just take a look at a few more details of this here. The first thing to note is that if you want to send back a different status code, right, status codes are just numbers that we can send back to the client indicating whether the request was handled successfully or not, right, similar to 404, that indicates that something wasn't found. If you want to specifically define the status code, all you need to do is add a second argument to this response constructor, which is a JavaScript object, and that's going to have status:, and we can set that to whatever we want, right? The default one for success is going to be 200, but if you want something else there, like, I dunno, 201, 202, 404, whatever, you can add that there. So we'll just add that just to be very specific about the status code. And another thing that I wanted to show you here is that we can add as many route handlers as we want, right? So if we wanted to create another folder here, and we'll call it something like products, for example, we'll be adding this later, and actually what you'll notice is that we can't create this file or this folder, rather, because we already have a folder called products. And that leads me to another key point, which is that you can't have both a page and a route at the same path. So if we open up cart, for example, well, we already have a page.tsx page in there, so we can't create a route next to that. Next.js won't let you do that because in that case, if we were to go to /cart for example, it wouldn't know whether to forward that request to give us a page or to be handled by the route handler, right? It would just be very ambiguous. So what we're going to be doing is we're actually going to be creating a new folder to sort of nest these similarly named paths in, and we're going to call this folder, api, right, this is a pretty common convention that you'll see. And now, if there's any specific resources that we want to add a route handler for, we can just put those straight into here. All right, I'm just going to move that there, and we'll say Yes. Inside this API folder now, it's perfectly fine if we create a new folder called something like products, or we can do cart as well, we'll create a new folder called cart, because the paths no longer overlap, right? These ones are at /api/cart, for example, whereas this one's just at /cart. So there are different paths, and this is how we get around that restriction. So anyway, that is the basics of creating route handlers. The next thing that we're going to do is we're going to take a look at how we can test these in a little bit more of a robust way using a tool called Postman.