Next.js 13 API Route Handlers FULL CRUD

I recently had the wonderful experience of bashing my head against the keyboard repeatedly over and over and over again because again the new next js13 API route handlers were not working as I expected them to work I thought everything was working then I got to production and I learned that all of my put and post requests were broken I got tons of cores errors I probably spent five days no joke just trying to figure out how to get API route handlers to work it was a lot of trial and error because there was no documentation on the subject in this video I'm going to show you how to set up your API route handlers in a way that works that's right they will actually work I know you don't think it's possible but it is after watching this video your API route handlers will actually work in both development and production I'll even show you how to use Json objects and post bodies and I will be showing full crud examples I'll show you an example git Handler put Handler host Handler and delete Handler the first thing you'll want to do to follow along is to go to nextchat.ai this is a service I built it works just like chat gbt but it has more features like conversation folders and prompt libraries the reason I point this out is because I created a prompt in the global prompt libraries that you guys can have access to you can use that prompt in your next chat conversation to make sure that you're setting up your API routes properly another cool thing about next chat it keeps your data safe next chat does not keep a record of your conversation or prompt data so you can feel safe using company code client code things like that in your conversations and you can feel safe knowing that next chat will not keep a copy of those conversations if you'd like to learn more about next chat a video should pop up on the screen if you haven't created an account yet you can click the sign up button it's free to sign up there's no credit card required once you're logged in you'll notice in the top right corner there's something called Global prompt Library this is where we're going to go to get the next js13 API route Handler prompt just click that button just so you guys know for all my future tutorial videos I'll be creating prompts that will go in This Global prompt Library you'll be able to just come here click copy to copy a prompt to follow along with the video I have found a chat GPT service makes it a lot easier to learn something I don't know if you scroll down there's a next js13 API route handlers prompt I'm going to copy that come back to my conversations over here I'm going to create a new prompt I'm going to call this prompt next.js13 API route handlers and I'm just going to copy the prompt here click save this is a new conversation one of the cool things about this is you can just say forward slash and go to whatever prompt you want I'm going to go to the AP API route handlers prompt I'm going to click shift return a couple times and now I'm ready to start asking it questions so we'll just go one by one I'll say first how do API route handlers work so it'll first give you a summary of how API route handlers work it'll say you'll need to create an API folder within the new app directory to create an endpoint you'll create a folder within the API folder whatever you name that folder is going to be the name of the endpoint and within that folder you create a route.js or TS file this next part which we're going to go over is super important this is the part that's not in the documentation and without it your put requests and your post requests won't work you need a middleware file at the root of your project or your endpoints just won't work in production without course errors if it's a public API that you want people outside of the website to be able to access yes so I'll one by one go through all of this first since middleware is so important and it's not in the documentation I'm gonna ask how can I create a middleware DOT TS file so it explains you need to go to the root level of your next JS project so here is an example next 13 project the root of the project would be here so it should not go inside of the app directory it should go in the root of the project so I'm going to go ahead and create that middleware.ts then it gives you an example middleware file that will work so I'm just going to click copy code come over here paste it there and I'll just show you what's going on so one of the first things you have to set is your allow origin whatever you set within here is going to apply to all of your API endpoints if you have public API routes meaning maybe this is a SAS product maybe you want your customers to be able to access those endpoints if that's the case case the value here can be star which just means anywhere but if you only had particular websites that you wanted to have access to your website to your endpoints you can update this let's go ahead and see how to update that I'll say I want to update this I only want to allow origin www.yourdomain.com so what you're saying is you only want to allow API requests from your specific domain name to be able to access your endpoints I'll also add or yourdomain.com in case there's not a www it'll then give you updated code that you can use and now what it's doing is it'll check to see if yourdomain.com or www.yourdomain.com is equal to origin wherever the origin is if that's true allow from that origin if it's not true put an empty string and this will cause an error so if someone from a different different domain tried to access your endpoints it would not work but I want to allow it from any Source the second part is where you define what kind of endpoints are you using in your API route handlers for the example today I'm using a get request post request put request delete request it's also important to always say comma options at the end of it this is because things like put requests and post requests before sending a put request or a post request a lot of times it will first send an options request before sending a post or a put request and it just does this in the background without you realizing it so if you don't put options here again it could break your endpoints then you would say what kind of content in your allow headers the max age and while your server is running these console logs will let you know what kind of method and URL is being used to access your endpoints and down here you can configure which paths within your website you want to have this middleware function triggered and I'm saying I only want whenever someone's trying to access API slash whatever then go ahead and Trigger this middleware function so this is very important I recently was working with a client I thought all my endpoints were finished and working because they all worked in development with Postman but I was shocked to find when I went into production I got a lot of cores errors in my API endpoints did not work this was how I fixed it by creating a middleware function all right so now let's ask I want to create a get endpoint create an example get endpoint for me with the folder named user so it starts telling you the steps you need to take the first step is create a folder named user within your API directory so if you're creating a nexjs project after next JS version 13.2 you'll notice there's automatically an API folder in your app directory within there that's where you would create your folder call it users step two is it says within the user folder create something called route.ts so I'm going to create route.ts all right and then it gives you some example code I'm going to copy that code put that in the route and this is a good example get request something I'll point out here in the original documentation it used to just use a response object and you would say something like new response whenever you're returning but you'll notice you get this typescript error when trying to return Json I completely switched to next response and I've also noticed recently in the beta documentation next.js has also switched to next response in all of their examples and I think it's probably because of the whole typescript error thing and a lot of times you want to return Json and so this is how you would return Json in a get request now say you want to return a status code with your response like maybe a 200 status code or something like like that you can come back to nextchat.ai and ask it that how would I add a status code to the next response it gives you an example you can use the second parameter like this so I'm going to go ahead and copy that paste that there I'm just going to write in the number 200 to represent that this was a successful response let's go on to a put request create a put request in the same users directory it now creates an example put request for you I'm going to copy part of this response you can put this put request in the same route so say you want to be able to access this endpoint with the same slash users but now it's a put request you can just come down here and put it underneath your get request it mentions parameters but I don't want parameters for my put request so I'm going to delete that I just want to be able to send a request body and this is how you get the values of your request body in a put or a post request it looks like this you can deconstruct whatever your send ending in the body and you can just say await request dot Json so you'll want to make sure this is an async function and then it will return the responses you're looking for and I'm going to go ahead and take out ID for both of these functions the way this is working is it's running an update user function and it's putting this update user function down here and you can create the code here that you want to update your user and then it Returns the updated user function in this next response.json so this is an example of how a put request could work since I updated the code a little bit I'm going to copy this file to give the chat bot some context I'm going to say this is my user's endpoint toad I'm going to say add a post request to the end point and now as you can see It'll completely update the code for you it has the get request in there the put request that we created earlier and now it has a post request which works just like a put request you get the value use of the body the same way and you return the value in a Json object the same way and then it puts the update user create user functions at the bottom of the screen and it tells you how to access your endpoint it's through API slash user and it gives you an example of how to do that I'm going to go ahead and just tell it now add a delete endpoint to the file make sure to add a status code in all of the responses and now it rewrites the code for you and it also adds in an example delete request and you'll notice it added in the status responses to the end of the objects and that is officially as of April 27 2023 how you can use API route handlers in development and production without any errors that's right your API route handlers will actually work if you follow all the steps mentioned in this video again if you'd like to follow along you you can go to nextchat.ai so it's dot a i instead of.com you can go to nextchat.ai to log in Click This Global prompt library in the top right corner that will take you to this page you can copy the API route Handler prompt from that point on you can start a conversation with nextchat.ai and it will help you understand how API route handlers work and like I said for all my future tutorial videos I'll be creating prompts that go in this next chat.ai prompt library to make it easier for you to follow along so you'll want to make sure to sign up for nextchat.ai to gain access to all of these prompts and a lot more prompts will be coming in the future like the video if you'd like to see more content like this don't forget to subscribe and hit the Bell icon thanks for watching and I'll see you next

Channel: Native Notify

Views: 20,690

Keywords: next, next.js, next.js 13, next 13, next js 13, api, route handlers, full crud, crud

Id: yRJd_tlHu9I

Length: 12min 48sec (768 seconds)

Published: Tue May 02 2023