How to host next js app on GitHub pages using GitHub Actions | CI/CD

in this video I will show you that how you can deploy your next GS project on GitHub Pages by using GitHub actions so this is really simple straightforward and quick method so let's begin first of all you have to install your next GS project from scratch if you don't have it already so I don't have this project so I will create it from scratch for that type npx create next app press enter and after that select your options and add the name of your project this typescript yes yes lentil yes tell me CSS yes Source directory yes app router yes so also this and this will take some time to install the project meanwhile we will go ahead and we will create our new GitHub repository if you haven't already then just leave it if you don't have it then you have to create it from scratch so just follow this [Music] and create the Repository and copy this command we will add our GitHub remote origin in our project the project has been installed so go to your project directory that is CD in my Dash app 3 and open this project in your editor I will use vs code [Music] now here open your terminal and in the terminal paste the command that you just have copied add your origin after that you have to add make some changes minor changes you have to add a configuration here if you are using App router so as we have selected app router while installing this application so you must have to add this configuration otherwise your build will fail in GitHub build process so after that if you are using absolute paths in your project anywhere make sure to replace them with the relative power so for example in the image tag I am using absolute path like this so instead of that you have to put dot slash so that it could be relative path similarly I'm using it somewhere else as well here so just put dot again [Music] so after that that's it I will just commit my changes and push them to the GitHub [Music] okay after it is done just go back to your repository reload it to see the new files and changes and now click on the setting button and in the setting click on the pages from there select the source from The Source drop down click on the GitHub actions here you will notice that it has automatically detected the next JS framework so just click on the configure button and it will give you a ready-made next gsml file for the GitHub action so normally you don't have to make any change in this ml file but it you have you have opportunity to edit this file if you want to customize it so for me I don't have to make any change I I will just use it as it is just click on the commit changes and commit it [Music] after that is done go to the actions and here you will see that it has started to deploy your changes [Music] so if you click on the build you can monitor the build process so it has installed the dependencies it is now building the next JS application so after a build process is done it will export the static HTML and it will upload the artifact and after it is done successfully it will show you green tick icon build is done now it is deploying your website to GitHub pages so it is fully automated you don't have to come here and monitor it every time it will be deployed automatically whenever you commit and push your changes it will automatically take those changes and it will build and deploy for you automatically so as you can see that it has been deployed you can click on the setting button and go back to the pages and there you will find the live public URL that you can use to view your website click on this button and you can see that your reverse your next GS application is live and running successfully so in this way you don't need any other server like AWS or your Google cloud or things like that you can just apply your project on GitHub pages and in case if you want to add some uh variables you can just go to the setting you can click on the secrets and you can add your variables these variables would be available during the build process you can use them to make implementation in your build process I hope that this video is useful for you please don't forget to subscribe to my YouTube channel and click on the Bell icon if you want to get notified for all of my upcoming videos and also please like and share this video thanks for watching see you next time

Channel: AyyazTech

Views: 8,777

Keywords: nextjs, nextjs 13, next js tutorial, next js 13, next js, next 13, next js 13 tutorial, hosting, deploy nextjs, next.js deploy, next js typescript, nextjs tutorial, next.js 13, github pages, github, cicd, ci/cd, github actions, github tutorial, static site hosting, ci cd, ci cd github, github workflows, how to use github pages, github ci, github hosting, github actions tutorial, github actions ci/cd, github pages tutorial, continuous deployment, github action

Id: WoL3xbkAfOU

Length: 6min 12sec (372 seconds)

Published: Sat May 13 2023