Next.js 13 API Route Handlers Tutorial | Next.js 13.2

if you're using next js13 after February 23rd 2023 and you create a next app you may notice that something is missing before February 23rd If you created a new next 13 app over here there would have been a Pages directory with an API folder inside of it that's because when next js13 first came out there was not a system for handling your API routes within the new app directory you still had to handle your API routing within the Pages directory but nexjs just came out with next.js 13.2 with version 13.2 and onward your API is now officially can be kept within the new app directory you'll notice whenever you create a new next 13 app now there is an API directory within the app directory that's because there's now now something new with next 13 called route handlers it makes it way easier to handle your apis within next.js there are now these built-in functions called route handlers that can be used to handle get requests head requests post requests put requests delete request patch requests and your options and if you do leave the options blank next.js will automatically Implement options for you and only allow post types that match the name of your Handler function so let's go ahead and show you how this works using the example pre-built into the new next 13 app directory just so you can see this a little bit better within the API directory I'm going to create a new directory called goodbye I'm going to move that into the root of the API now you can see a little bit better so the way apis work within the new app directory you have an API folder in and then within the API folder is where you would create your routing and this new route Handler system will only work in the app directory so it's very important if you want to use route handlers that you use the new app directory with next 13. within whatever API route you want to create you need to create a folder called route and if you're using typescript you would say route TS if you're using JavaScript you would say route.js but I'm using typescript so I'm going to say route.ts and I'm going to go ahead and come here to the hello route I'm just going to copy this and paste it into my goodbye route and I'll just change this to say goodbye next JS and now let's explain how this is working so it's very simple we've created a hello git request and a good buy get request I'll put all these links in the description below but you use directories to create your routes so for example I'm going to start the this project up and if you want to get to this hello route this hello git route all you have to do is go slash API slash hello let's see what happens so I'll go to slash API slash hello and as you can see it Returns the hello next JS and now let's try to go to goodbye so you would go slash API slash goodbye and there's our goodbye next JS and you can even have nested routes So within here I'm gonna say goodbye maybe I'll say hello again and within there I'll go ahead and create a route.ts file I'll copy one of the routes over here I'll say hello again and now if I want to go and I'll actually drag this directory to the hello directory now if I want to get to this route and actually since this is a route I'll change the name to to say hello Dash again now if I want to get to that route I would say API AI slash hello slash hello hello again now it returns that get response and as you can see the way this is working is you pick whichever route Handler you're wanting to use whether that's a get request post request put request delete request whatever you can run your function tasks up here whenever you're ready to return a response there's something built into the handlers called response and the way to return something is you just say return new response and then within your braces is where you return a response now say you want to return a Json object maybe you don't want to return a string you want to return a Json object to do that there's something called response dot Json and within your response you can turn this into an object and I'll create a key called response with the hello again next.js now you'll notice if you're using typescript this will return an error error that's because according to the documentation although response.json is valid native typescript types currently shows an error so you can use something called nextresponse.json for typed responses instead so let's go ahead and try that out so I'm going to change this to say nextresponse.json and for next response to work you have to actually import it so I'm going to import the object next response from next slash server and whenever you're using next response you can take out this new and that should work let's go ahead and go back to our hello again route and see if that worked and it did it returned a Json object with response hello again next JS and one of the things I love about this new route Handler system is it's so much easier to handle your routes and you don't have to worry about configuring your options within the route handlers if you don't want to like I said before next we'll just default to automatically say so for this route since we only have a get request it will only allow a get request and say we also put in this route maybe a post request and for the response I'll say this is a post request the options will automatically default to only allow get requests and post requests within this route so you don't even have to worry about that now the last thing I wanted to show you is how to pass in parameters so say for example in the URL you want to maybe pass in an ID of 27 or something like that or maybe a string of hello or something like that um well you can do that with Dynamic routing within the new API route Handler system the way you would do that is say you want to make this hello again a dynamic route one where you can pass in a parameter the way you would do that is within this hello again folder you can create another folder in this folder put what looks like an array and you can name this route whatever you want maybe ID and then put your route.ts file inside of the ID array and now let's come back here and try without a parameter and see what happens so now that I've done that if I go to this hello again URL it says the page is not found the reason is it's now looking for an ID parameter it won't work unless you pass in an ID so let's try passing in an ID slash 27 and now the page works again the get request works again now the way you can see this ID parameter is inside of your get request put a comma and then an object where your props go there's a prop called params This is how you see your parameters you don't have to worry about the error message it just is in any error message in typescript but if you want to see that you can just say you can console log we'll just look at this together params and now let's refresh the page and as you can see it returns an object with a key ID with the value of 27 as a string now say you wanted to pass in more than one ID maybe you wanted many IDs well you can do that by renaming your ID array put three dots dot dot dot in front of the ID and now you can pass in as many IDs as you want so you could still just pass in one and we'll see what happens it returns an object with an ID and the value of the ID is the ID since we're making this mini IDs let's change the word ID to IDs to make it plural and we'll try to pass in another one let's say 36 and as you can see it now returns an object with IDs full of an array of IDs and like I said you don't have to to just pass in a number you can pass in a word as well and maybe you would want to make this more generic instead of saying IDs you could say params or pars for parameter and then maybe I'm going to say params.pars and now let's return that again and now it just returns this array full of strings different parameters and then from that point on the way you could access these is so probably a simpler way would be saying something like const hars which is short for parameters equals params dot pars and then from that point on you could access these by Sync pars uh you could access the zero index so one index a two index and let's refresh the page again and there you go that's how you access each of the individual parameter values and those are the basics on how to get started with route handlers I'll put these links in the description below if you want to learn more about route handlers you can go to the documentation in the description below I'll have the detailed documentation down there I'll also have a quick reference to the various route Handler methods that are supported and I may come out with a more detailed video soon where I'll show you things like how to create Dynamic route handlers so that you can send things like parameters with your get requests and things like that this video is meant to be a very basic introduction to Route handlers if you'd like me to make a more detailed route handlers video please let me know in the comments below and click the like button don't forget to click subscribe hit the Bell icon if you'd like to be notified of more next 13 updates in the future thanks for watching and I'll see you next time

Channel: Native Notify

Views: 23,516

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

Id: J4pdHM-oG-s

Length: 10min 48sec (648 seconds)

Published: Mon Feb 27 2023