Deploy NextJS to Github Pages With CICD | Free NextJS Hosting on GitHub

hello and welcome back to the channel my name is Mahesh karya you're watching me on YouTube now and in this session I'm gonna take you through how to deploy your next year's application to GitHub GitHub pages so you don't need to deploy to Versa or any C2 or AWS thing you can directly deploy it to GitHub actions why GitHub actions to GitHub pages so yeah without wasting any time let's steep dive into it so I have my terminal open here and I'm gonna click quickly uh create a new folder over here I'm gonna name it uh next simply drag your folder on the top of your vs code open your terminal hit the command yarn create a next app base name of your app okay so hit enter I'm assuming that you have yarn available inside your system already otherwise you can use npx create next app command as well both are the same it will take a while to install the things till then I'm gonna click here and I'm gonna create a new uh GitHub repository from here and I'm gonna name it uh it's suppose next app deploy okay sounds good now I'm gonna create new repo over here and then we can set this thing in our local till then let's wait for this this is taking time because node version let me check my node version so and node hyphen V I'm using 19 so make sure to not you not use 19 version make sure to use 18 or lower than 19 because uh 18 is LTS now they have officially announced that 18 version you can use as a long term they will provide the long-term support though uh so I need to use an NVM use 18. okay now let me check my node version yeah it is 18. now I just need to hit command again and again it will take a while so yeah this is done already now I don't want to choose typescript for now you can choose it's all your choice no eslint for now and simply react react Dom and next three dependencies are needed in order to get start with it and here we go and in another terminal quickly side by side I'm going to go to app directory where I'll say get in it hit enter it will create a git uh folder inside that then I'll say git remote add origin okay so yeah this is done now yeah this is this is uh all we need to do now I just need to push this thing uh whatever we'll create over here and so yeah this is done already now let me run npm run Dave or yarn Dave okay let me try here and Dave you need to have sorry yarn Dave so yeah it's running already on localhost colon 3000 you can see this is really really fast so yeah now I just need to push this thing so I need to set Upstream master so I'll directly say git add git commit okay uh first comment first deploy git push before that we need to set up stream a main okay and uh git yeah this is it now I can directly go here I can refresh the page and if you go to the settings and if you see here inside pages there we have a GitHub actions that beta thing you just need to click here and here you can configure next.js so simply click on configure okay now here you can see you can check your branch over here okay it's all your choice and sorry for this message I just need to pay to GitHub I forgot to pay okay in December okay fine so now uh permissions you need to you can provide you you can configure it accordingly so I'm not gonna Deep dive into it so uh the thing is you can use it you can use your GitHub secrets in order to Let's suppose if you are connecting it with mongodb directly you can add your secrets over here and lots of bunch of stuff so start commit you click here okay and here we go so it's gonna create a next.js.yaml file inside your GitHub dot GitHub and workflow so it will automatically create that inside here okay now you can see this folder just got created now every time when I'll push the code it will automatically redeploy and this workflow will trigger automatically so if I go here if I see the details so next year's side build is in progress so everything is fine it you just need to wait it's it's setting the job check out things everything is done now installing dependency that react react Dom and your next the three dependencies just like you are doing in local system you can do this here okay so this is uh experimental one feature are not covered okay fine so it's fine it's in beta but in a while it's there they are going to publish this thing and of course it won't take much uh less than a month or so but the major thing is you need to check what is the concurrency rate how much they are providing and we can search for like uh how you can manage the millions of users if you are getting for your site so I hope this is for the smaller things so if I go here let me let me go back to settings okay let me go back to the pages and this this site okay if I click here it should work for me and let's let's wait for that so yo so yeah it's it's working it's working perfectly fine and now you can see you just don't need to buy any AWS I should gcp thing or you don't need to deploy it to yourself you just need to set up your GitHub properly this is it okay even though if you have a mongodb connection Firebase connection or any secured things you can store into uh the secrets if you are not familiar about the secrets uh you can store into the secrets okay and that this secrets that you can use over there so your credential will be stored as a secret so no need to worry about a commenting code okay so best of luck and so I hope guys you you like this video so thank you so much for uh all of you guys for being with me supporting me all the time it's been pleasure to be here please let me know inside comment box what you want from my side definitely I'll make it for you and don't forget to subscribe my channel if you haven't already and smash that like button and you can use this thanks Button as well uh so in order to contribute even the smaller amount is enough don't worry about the amount but just contribute something it would be appreciated so thank you so much see you soon in the next video

Channel: Mahesh Kariya

Views: 19,400

Keywords:

Id: nded252qxcA

Length: 7min 59sec (479 seconds)

Published: Sun Nov 27 2022