How To Deploy Nextjs 14 Websites/App In Cpanel | upload next js in cpanel | host nextjs 14 in cpanel

hello everyone this is IM Khan from moft so today I'm going to show you guys how to upload your next js14 websites in cpanel and normally we like to use vsel but in Vel there is for uh more more than 100 MB files are not going to be uploaded in there uh for freely so so for that uh we will need uh we will need um paid uh subscription so whatever for production based softwares uh the C panel is very much uh very much worthy for use so I am not going waste more time of you guys so let's just jump into it and I will show you guys how to upload your next dayss 14 websites in cpan so let's jump into it okay so in here uh you guys can see uh I have uh I have come uh in my next website so I'll go there and I will click CMD and in the contol panel I will create uh create a NJ website so the command is NP PS create next app and I will name it as next upload okay so next upload or next website next web upload let's say okay so I will just uh install the website so we will will use TT no then no no Source data yes router yes then allies allly yes okay yes okay I just it in enter so it's uploading so let's wait for it okay so in here we can see that it's uploaded uh it's it's it's downloaded actually totally so I'll go to the file and for going to the file I click CD and my uh app name is next uh web upload okay so I'll just go in here and I will show you guys mpm run Dave so after clicking it uh we can see okay the website is uh coming and it's taking a little time okay so we can see this is this is the website we can see and we will host it in live server okay so for this uh I will just cross it and I will go to that uh that website which is next we upload okay so first of all what we have to do we will just have to open it in our V code editor and after uh after doing so after coming in our vs code editor we have to uh make three changes first of all we have to make a server.js file server.js uh let's see okay the spending mistake sjs file in sjs file we need some uh we need some codes uh I will share the codes with you uh in my video description uh but from my another project I'm taking this so I will just copy this codes and we come up here and just paste and in in nextjs Doc you uh in in next j.org website you also can find this server.js by uh by just pasting um by just writing their writing their writing the server.js or something like that okay anyways I will share the course with you guys in description so if you if you if you get that from nj.org website then you have to uh make a changes in this line uh for const Port this will be process. env. Port uh and there will be 3,000 okay so I will save the code then I will have to make changes in my next uh next UHC config.js file and I also have to make a change in our package.json in place of start we need to we need to replace this uh we need to replace this code so what we have to write there uh that is okay so that is that is this so we will take uh start uh nodecore EnV equal production node server.js so this server.js actually is indicating indicating this this server.js file actually so I will come up here and I will place it there and in nextore config uh we just need to make a change in here uh we just have to write output and then export okay so we have to write it uh and all done then we have to just uh we just have to uh delete this next folder in nexj for 14 website you can see there is aext folder from the very beginning when you run npm run Dev or npm run build then we will have have this nextext folder but I will delete this folder because there will be cash issues if I don't delete this folder without uh when when I going to run something in terminal which will be npm run build so if you if you going to build or if you want to deploy your website your nexts website then you have to first delete this next folder so going there uh going there I have to first delet it okay I have deleted it so I will come to my terminal and okay I'm showing you uh in in bigger screen okay let's just cross it terminal new terminal then I will write here npm run npm run Dev this common then after clicking in it this will be deployed and we can see here will be another next file and here there will be a out folder uh next folder actually and there will be the out folder and we'll need that out folder for uploading for deploying it in our uh C panel so we can see this is taking loads so let's uh let's go to our okay let's wait for the uh for it okay okay sorry sorry I just I just run npm run Dave it will be NM run B sorry for that it permanently I'll come over here why this is occurring because it's it's there in my terminal so I have to delete it then have to come to our terminal and we have to run npm run build npm run build okay so when we click it there will be aext folder and there will be a out folder and that out folder will be used for uploading it in uh in C panel actually so you can see it's taking some time to uh to let itself finished there are generating five static Pages it will be a static website but if you uh connect apis those will be work smoothly no problems so it's taking some more time so we can see the next folder has appeared here and also the out folder appeared here we basically need this folder okay so our main things are our main works are done so I will come up here and we can see there is out folder so I will just go there and go to the folder I will zip it and we can see there is index.html file which is needed for uploading it in uh uh in C panel so I'll name it as next web upload same name okay okay so I have come to my C panel then after coming to my C panel I will create a subdomain so let's go to domains and after going to domains let's create a domain [Music] then let's name it as next tutorial uh or next T tutorial let's name it as next tutorial then then my domain so I will create it I'll just copy for for letter use so submit our subdomain is creating okay so we can see our sub is created so next tutorial this is and I'll go to the file manager and in here I will upload that out folder uh from here actually so what I will do I just upload this out folder in here so it's just boom and I will just extract the folder okay we'll also delete this because we don't need this folder we don't need this file actually for future use so that's all so this is how we have to upload the nextjs websites uh the nextjs latest version of njs website which is njs version 14.04 so how to upload this NEX version 14 in c i I just have uh showed to you guys so let's just run the website so if we come to this uh this subdomain if click then you can see boom so this is what the main website this is what the website we were seeing in our uh in our local server so if I come up here and if I see npm run or just npm start when we just uh compet the build then we can uh we can click npm Start and our uh then our um local server should start but I can run also run Dev okay so after running npm run da uh in there while I run npm start there were some problems for the out folder but whatever we can uh we can use npm run da for showing it locally so let's see if I click it control and click then in here uh it's checking time to let itself reload okay so this is in our uh in our local server which is Local Host uh Local Host 3000 and this is the live server which is next tutorial. html. XYZ so we can see this is the process how to upload uh nextjs websites in uh in server in cpanel so there are mainly three things I'm going to wrap up the things again so first of all coming in here we have to delete the next folder then we have to create a server.js file and in this server.js file we need to write this codes I will showare you the codes in my description box and then we have to go to the next uh config.js file and there is a there is something we need to we need to just uh we need to just write that is output export then again in our package.json file we have to indicate that the server.js file uh the main thing the main folder is going to use the server.js file and uh we need to write in this place uh nodecore EnV production node server.js so after that we have to run npm run Dev npm run build which what I should say which is npm run build and after doing so there will be aex file uh next folder created and out folder created then what we have to do we just have to go to our main folder then uh to the out folder then we have to go to the out folder and after going there all the things we have we have to zip them and after zipping them we need to come to our C panel then we have to create a subdomain or the specific domain where we have to upload our websites then we have to go to the file manager of that domain that of that specific subdomain or specific domain then we have to go to upload then in here we will come up and we will just ring and drop the file and then we will extract the file and boom and our next day website is uploaded so that's all thank you thank you very much for seeing the entire video I think uh it was hope it was helpful for you guys so please keep subscribing and please uh seeing the videos and if you like the videos uh let me know and if you don't like the videos please uh give me a comment that why you don't like the video so thank you very much once again from eofs

Channel: EKSofts

Views: 4,242

Keywords: #NextJS, #WebDevelopment, #cPanel, #NextJS14, #DeploymentTutorial, #WebHosting, #NodeJS, #JavaScript, #ProgrammingTutorial, #WebsiteDeployment, #FrontEndDevelopment, #ServerSideRendering, #DeveloperTips, #CodingGuide, #TechTutorial, #NodeEnvironment, #ProductionDeployment, #ProgrammingTips, #WebDevGuide, #CodingJourney

Id: GEAA4duLQcs

Length: 13min 3sec (783 seconds)

Published: Sun Jan 07 2024