How to Deploy Next.js 13 App With API Routes To Production (Vercel)

video we'll see how to deploy a Nexus application with API routes to production so I have this application which is I have created in Nexus 13 crash course so you can get the recording of that by registering in this crash course so let me show you the demo of this so initially when we load that page right now I don't have any tasks so we get this message no task form I can click on add tasks and let me read newspaper we can select the date click on add task task is added and now we are automatically redirected to list page which is the dashboard page now I can add one more task write ebook let me select the date and it's completed so you can see it's added now I can view this information so I can click on The View icon and it will load the details of that I can view another one and it loads that detail now I can click on the edit icon so let's say here read newspaper so I am done with reading so I will make it updated update task you can see it's updated and you can see this it's completed now I can also delete this so if I cancel it's not deleted and if I click on OK it will be deleted you can see it's deleted so so this is the application that we'll be deploying to version so this is the code that I have this is the entire code of that application one thing I have done is I have installed next.js version 13.5 which is just released yesterday so it has some performance improvements you can see it's 22 percent faster so on low local machine also development machine it's lot faster so you can get that so I will include link of this course in the description so you can get that source code of this entire application so let me show you one more thing so in dot tnv I have added the mongodb at last database connection URL so we are storing all of this information in the mongodb database so let me show you the apis section slash API if I search for slash API you can see this is the server side application page.jsic it has metadata so it's a server component and here I have mentioned all entire URL of this application but if you see the client component so this is the client component so there is no use client here included that does not mean it's not a client comfort so this task model I have included inside task list component and this task list is the client component so automatically task model also becomes a client component so if you see for client component for making a pay call I have not included that entire URL HTTP localhost colon 3000 because this is running on the client side so your application is already running so you don't need entire URL while the disk well if the component is client-side comfort so let me go back to slash API so this is also server component this is also client component so even though it's pay.jsx does not mean that it survey the server Comfort by default its service component but when you include use client it's a client cover here also you can see there is no app entire URL here pay.jset this is the server component so I have included this entire year so you need to make sure if the component is server component you need to provide the entire URL of that particular API otherwise it will not work because this code will be running on server so you always need to specify your entire URL so when you are running the component on the server side you need to mention this entire URL not just slash API otherwise it will not work because on server side there is no URL domain available so just by saying slash API will not work it will give you an error so now this is all localhost hard recorded So when you deploy to production it will not work because this is localhost so we need to specify URL which will be dynamic so for that we can close this and inside dot elv I will create a new environment variable so I can say next public base API URL so this will be localhost so whatever URL we have this so if you are developing on local machine this will be the URL and this will be the dynamic value which we will provide when we deploy your application so this is now good thing now we can access this so instead of hard coding this we can use template lateral syntax dollar of so now this is environment variable so we need to use process.env dot name of that variable so every time we need to use this entire string so what we can do so instead of replacing everywhere process dot EnV process.env we can create a constant for that so inside utils I have context.js this should be constants.js and here I can include that here we have already base API URL so here you can use process dot pnv dot that environment variable name make sure it starts with next underscore public underscore this is important so when you start any variable name with next underscore public underscore it will be available on the client side also so by default when you don't include that this is only available on server side but when you include this starts with this then it will be available on client side also so we can use this on client side as well as server side so it's available at both places so now here we are already using this now everywhere we want to refer this we can use this base API URL so here I can just say base API URL and we can import this you can see it's imported from contacts similarly let me copy this so we don't have to write it again so here this is a client side you actually so you don't actually need to use that entire report so this slash API will work even when you Deploy on production because this code client-side code will be running when your application is already running in the browser so you don't need but just to keep every API call in consistent way I will include it here also so everywhere you will see the URL in the same format now let me add it here also we need to convert it into template literal this is changed here also we need to use so if you cheat you need to remember one thing that the URL does not end with Slash make sure it's not ending with Slash because wherever we are using that we are already adding slash here so after the URL we are already adding slash so make sure you don't add otherwise it will be double slice and it will not work now we are done with this let me check task list here also we need this and we can import it so this is also imported at the top so now we are done with the changes and we can deploy to production so what we can do let me commit these changes so all these are done I can say git commit and environment variables and I can push it to GitHub now we can go to our cell so this repository I have already pushed to GitHub so if I go to GitHub Dot so you can see I have already pushed it this is a private so you can see now it's changed the environment variable so all the changes that we have done are done right now so we can go to varsal you can log into your account if you are not logged in with GitHub then you can click on add new project and you need to specify the repository name so I will use that you can see it's created 52 minutes ago so it will show you the created time not the updated time so you can click on import now here environment variable we can copy from dot EnV file make this speaker we can just copy the entire first line you don't need to copy name and value separately and here you can directly press it so it will copy the name and values now we don't need this so what will happen so let me so one thing you need to remember is that this code whenever you are using this is only for local machine and not on the server side so when you deploy to production you will not be having this variable so if you see at page dot j6 so let me show you here again so inside the app folder SRC app we have this page.jsx so this is the component that gets loaded so and this is the server side component so here you are directly using that variable and initially we are not setting that variable so while deploying we will not be setting that variable so it will be empty and if it's empty then the this API call Will Fail so your build will fail and it will not be successful So to avoid that what you can do is you first need to check so while calling this get task method we can check if this base URL does not exist then just return nothing because if you don't do this and you directly call this base API URL will be Bill does not again base API URL does not exist so build will fail if you try to add this variable like this then also it will fail because this is localhost and you are the the API call will not be successful so one thing you can do this is very important so this is the page that gets loaded when the application is loaded because this is the page.jsx from the app directory so if it does not find that URL it will return null and it will not give you any error so it's very important to add this condition otherwise your build will fail so now let me add these changes and I will commit this we can say added condition and I can push again now I can go back to this project and here mongodb URL is already there so let me go back and we can deploy again because we have just pushed some changes so let me refresh this we can see there is no project this was the original old one so we can again start from scratch new project and we can specify this repository name 56 minutes ago import environment variable now again I can copy the first line only and paste it here it will automatically copy the values now I will not be setting this variable why because it will be empty so when it's empty where is that so when it's empty you will return null and you will not execute that and later once the application is deployed we'll set that variable by updating the environment value so that is very important otherwise your build will fail so I will directly click on deploy button and we can wait until this is deployed so you can export this building section and you can see if there is any error so I will pause this video and we will get back to it once the build is successful as you can see the build is successful so we can click on continue to dashboard and we need to change that add that environment variable so if you see this is the actual hosted domain URL so this will not work right now because we have we don't have that URL we can copy this URL and this will be our base URL we can click on this settings here environment variables and here we need to add that environment variable so this will be the value make sure you remove this forward slash because we'll be adding that in the code and the name of the variable will be this next public base API URL you can click on Save now this environment variable is added now we need to again redeploy this application so go to deployments and you can click on these three dots and click on redeploy and just press the RE reply button now it will again redeploy your application so I will be back once this deployment is done you can see deployment is completed now so we can go back to this same URL so we can just refresh this same URL you can see now it works it correctly loads the data so I can delete this so now we don't have any tasks so we can add first task you can select any date 13 completed add task it's headed successfully I can add another task second task okay so we also have validation for this so let me show you so when I click on add task you see these validations that is also there you it's done using react hook form second task as you can see there is still validation I need to select this so this is not there is no validation for computer because this can be either selected or not selected while Mark is completed add task now you can see it's so so this is a lot faster on the production and on local also because we have installed this next.js 13.5 so if you want to install this you can just say npm install next at latest so it will install the latest version of next.js so you can find out what's the latest by just searching for npm next and here you can see the latest version 13.5.1 so now you can see the application is working I can try view functionality this is also working click on edit first task updated I will make it not complete update it and it's done I can remove this and it's done so that's how you can deploy your next JS application with API route so if you see in this application inside SRC app I have API outside it so this is the add API route for post API route this is the delete API route this is edit and this is gate API so we have these various API routes so when you have these API routes you need to remember slash API so wherever you are using this base API URL if it's a client component you don't need this initial URL you can just say slash API and it will work so the URL is correct but if it says server API server component you need to mention that complete path but to just keep it consistent with all the apis URLs we have added this in all client component and server components so that's it about this video if you found this useful do like it and don't forget to subscribe to the channel

Channel: Coding Mastery

Views: 1,696

Keywords: react, next js, next js 13, deploy nextjs to vercel

Id: 77AukMrHu8I

Length: 18min 43sec (1123 seconds)

Published: Wed Sep 20 2023