Migrate a Next API Route to App Router GET Route Returning a NextResponse
We saw we had to have http methods in our route handlers when we moved our auth route handler over.
Now by moving our customers api route handler over we see a full implementation of an app router route handler.
To do this we'll need to make a couple changes. Similar to the previous route we migrated we will need to name our file route.ts. From that file we'll rename our function to GET as it returns a list customers.
Instructor: [0:00] As we move over API routes from our Pages router, we'll notice that we have a handful of routes that are doing similar things. For instance, we have a getCustomer route, an addCustomer route, we have getCustomersLists route. It would be nice to have all of these in one place.
[0:17] It's common to also see a pattern where you can check for the method, and if it equals GET, do something, or if it equals POST, do another thing. You can have all those in one API route in the Pages router, and the App router gives us a similar pattern.
[0:35] If we come into our App router under API, let's add a new file called customers and give it our route.ts. Then let's get code from our getCustomers list. Now we need to change a few things.
[0:50] In the App Router, this is no longer Next API request or response. We actually don't even need either of these for the GET request, but we'll leave them here for now, just to show where they are.
[1:02] We want to change this from the default export to a named export, so export async function GET, and then we can get rid of the request-response because the getServerSession doesn't need them anymore.
[1:15] Now we need to return our response. Let's get rid of these because we don't need anything off of the request. We can get rid of our arrow function. Now let's just say NextResponse. Instead of having the .status().send() notation, we can just give it the .json(). We can remove this and say Error. We'll just say, Unauthorized, say status 401.
[1:47] Now we need to make sure we change this to next/server and import them. Then we need to make sure we return this and say NextResponse, say JSON, just return the customers, and then we can give it a status 200. Now we can save this.
[2:13] Let's come back to our application. We see now that we're using our new route handler. It's going to give us an error here in a second. This is because, where we are calling our endpoint in this React Query function, we need to just change this to Customers, because that's the new route handler name we gave it. Now if we save this and we can refresh, we are still getting our customers.