Next.js 13 API Routes Tutorial

I'm about to explain how to use API routing in next js13 but quickly before I do that I have to deal with the question did next js13 break API routing if you're used to using next js12 you may have heard that you should put your apis within the Pages directory this is their official documentation it's very simple you just do something like this Pages slash API slash user.js then if you go to your website slash API slash user if you were to put this inside of that file it would return this Json object on the screen but with next.js13 they're moving away from pages to this app directory if you watch my recent 15-minute crash course on next js13 I accidentally told you to delete the Pages directory found in next js13 the reason why I told you to delete the Pages directory is because I thought you didn't need it anymore with next js13 I thought that everything within the Pages directory would now be within the app directory using the new routing system I found this to be true with routing nested routing even Global State Management like context API which I recently made a video about but when looking to develop a real nexjs project I came up on the point where I needed to create some API endpoints and So within the app directory I tried to create an API and I tried to create an index.js like I normally would but to my surprise I realized that it did not work if I try to go to API it just says this page is not found the reason is if you go to the app directory beta documentation on the next JS website you'll notice they say API routes should still be defined in the pages slash API AI directory and not moved to the app directory so I was wrong when I said you should delete the Pages directory in next 13. if you're using next 13 and you're planning on using apis you actually still need the Pages directory so if you're like me and you've created a next 13 app and you've already deleted the Pages directory for this next part you'll need to go ahead and recreate your Pages directory in the root of your next JS project because you'll need to be keeping all of your apis within the Pages directory and then it'll start working again so just to show you how this works I'm going to take this API directory with the index.js file in it I'm going to drag it to the Pages directory and now if you refresh the page if you'll shut down your server if you already have it open start it back say npm run Dev now if you go back to your project and Go slash API you you'll notice the API works it returned the name John Doe so again just to reiterate if you're using next js13 and you've started migrating everything to the app directory make sure you still keep your apis within the Pages directory don't delete the Pages directory you need pages to set up your API calls and now I'm going to go briefly through exactly how to create apis using next.js13 so to get started it's pretty simple in your Pages directory just go ahead and create an API directory create an index.js file within that file you'll want to create a function name it Handler and what you just saw here is a simple git request the rest is for response you want to say response status 200 means it's a good request and we're wanting to return a Json object and you can put whatever you want in here I'll just say page name and I'll say home page I'll go ahead and delete this down here now if you go just to slash API that will be returned you can also have nested routes within here so say you want to have an API slash dashboard page dashboard API all you have to do is within the API folder create another folder call it dashboard within the dashboard folder create another index file index.js you could copy this Handler function paste it in there I'm just going to change this to say dashboard page API and now if you go to localhost slash API dashboard it returns that API and you can go down further from there I'll say dashboard 2 for a second dashboard page within there I'll say index.js I'll copy this Handler again paste it there say dashboard to page and let's go slash dashboard two and as you can see it returned the correct page name if you're used to using something like Express to create restful apis you're probably wondering how to handle get requests post requests put requests delete requests things like that well the way you can see the request type is through this Rec property you can deconstruct something called method from that from the rec then if you console log this method it'll tell you the post type so I'll just show you uh what the response is so if I come here and refresh the page it shows you that the method is a get request and so one of the ways you can handle this is you can say switch you can use this built-in function switch say method and then you can use something called case to check what the value of method is you can say if the value of method is get basically case get then put a semicolon sort of like this is the property key and now you're going to create a value which is is going to be the response so I'll put a note here that says get data and for this I'll go ahead and return with this res dot status function our dashboard to page API and then right after that what you want to do is say break so that it finishes the function now say maybe you also want within here to have a put request or maybe a post request available well you can just say cased post this checks to see if it's a post request and under there I'll put post data and then here you can post your data to your database using whichever database you're using mongodb postgres whatever like you normally would in a node.js environment and once you're done with that you can rest dot status 200 again to show that it was successful if it was successful and you could return a Json object whatever you want I'll just say response Post Post 6 successful and safe maybe that's all you want for this API a get request a post request remember to say break under that whenever you're done with your API post request you always want to make sure you have a default value here and you can put a colon here and for your default you want to make sure to say res dot set header what this does is this first value here you want to say allow but a comma create an array then within here you want to say what kind of methods are allowed what kind of requests are allowed so for this there's a get request and a post request so I'm going to put git and also post and so now this will check is this a get request or a post request because those are the only ones allowed and then under that you say what you want to return if this is not a get request or post request you can say status 405 this signifies that it's an error and you can say dot in and you could put back ticks say something like method and then you could put dollar sign curly braces and just say method here so then say this was a put request or a d or a delete request it'll say method delete request or put request not allowed and then if someone ever tries to put something or get something to this specific endpoint it won't allow it it'll return this error saying not allowed and this is a way you can handle your API endpoints without using Express or something like that you can just use what's built into next JS the last thing I wanted to show you about API routing is how to add in parameters in the URL the way to do this is there's something called query within the rec parameter so you can also deconstruct query and with this console log here I'll just say comma query so we can see what is inside of the query if you want to pass in parameters with your API calls such as maybe with a post request the way you do that is where you say index.js rename that to have braces around the name index within here you can name it whatever you want so for example I'll just change this to ID say I want to add an ID to my API post request something like that then I would put ID in what looks like an array and now if I do that I'll have to add a parameter or this API call won't work anymore so let me show you what I mean if I go back to my slash dashboard to say enter it'll say this page could not be found the reason is I have not yet passed in this ID parameter the way to pass in this ID parameter is in the URL just say slash and you can put whatever you want I'll just say 27. this is is how you would pass in the parameter you would go slash whatever the value is then at that point it would start working again and if you come down here to our console log it'll show that there's an ID of 27. now what if you want to add more than one ID or more than one parameter well you can do that too uh first I just want to show you you can't do this by itself so I'll just say uh Slash 33 it won't work if you add in a second parameter just this way to add in a second parameter instead of saying an array with ID inside of it put in a dot dot dot in front of it sort of like a spread operator and now this can take in as many parameters as you want separated by the slash as you can see if you refresh the page now when it says ID it's an array with ID of 27 and 33 it's no longer just a single string value it's now an array with two values and then say I want another number 42. it'll just keep going on and on and I could change this uh maybe instead of saying ID I could say params for parameters and then I refresh the page come back here it'll say params so from that point on I could use the params so I could say maybe uh params zeros it's zero indexed refresh the page that'll give me that value of 27 I could say query params one weary params two and now if I refresh this page I can have access to each individual value which I could then use inside of a post request if this is a post request or a put request delete request and so that's how you can receive parameters with your API calls it's pretty simple if you just want one parameter put it within an array instead of saying index.js or t yes put it with an array and then if you want more than one parameter put a dot dot dot in front of whatever you want to call it and that is how API routing Works in next js13 it's the same way that it worked in next js12 so next as13 did not break API routing it's just you need to keep your apis within the Pages directory so if you've already deleted your Pages directory again you'll want to create it again so that you can put your apis inside of it everything else can go in the app directory but you'll want to keep your apis within the Pages directory at least for now it looks like the next JS team is working on how to add apis to the app directory based on their documentation so in the near future you may be able to put your apis within the app directory but as of right now you still need to keep your apis within the Pages directory like subscribe and hit the Bell icon if you'd like to see more videos like this thanks for watching and I'll see you next time

Channel: Native Notify

Views: 37,126

Keywords: nextjs 13, next.js, 13, api, routes, set up, next, javascript, js

Id: varePWkGi8Y

Length: 12min 58sec (778 seconds)

Published: Tue Jan 24 2023