Deploy a Next.js App to GitHub Pages

welcome in this video I'll demonstrate how to deploy an xjs application built as a static site to GitHub Pages we will need an xjs application to deploy first to obtain one I will go to NEX js. org and use the templates Link in the top navigation this takes me to ver.com templates here we have useful starter templates for nextjs I will use the blog one as you can see there are multiple blog templates I'll use this one book starter kit there are a few details about this template which I can see here on the personel template page it's a statically generated block generated from markdown files this is important GitHub Pages supports static sites so the end Target that we buil through next needs to be a static site which this is I can open a demo here to see the actual template and it's a simple blog app with a few images and a detail page we only have three block posts to use it I will go down to the how to use section and we can use it directly with create next app using the example option specifying block starter this is the name of the project so I'll copy this directly and go to my terminal I'll paste it and only change my project title which for me will be nextjs walk deployment create next tab completed now I'll CD into the nextjs block deployment directory and I'll open it with Visual Studio code I will close the terminal and we have our nextjs project files the first thing I'll do is run the project with npm run def to make sure all dependencies are working and the project actually compiles and I see that everything is compiling correctly I see all the block post there images and assets and if I open the detail page in one of the posts it's also ready rendering correctly the next step for deployment is to generate a static site to do that I'll go to the next J documentation and search for static generation and static exports the the article name is actually static exports and here we see an explanation on how to configure next through the next config JS file for static exports we just need to set output to export in this specific case we don't actually have a next config JS file so I'll create one nextjs will automatically pick it up if it's in the project root directory I'll copy this example here and change it to two spaces format it a bit now we need output export for sure in order to set the output mode to static files and we have additional options from which I will use the dist deer option as you can see here we get an explanation that the output directory by default is out and this option changes it to this or any other user specified directory name I actually like the this directory it's more frequently used for JavaScript and nodejs project as the output directory than Al so I'll use that now if I run mpm run build I should get my static site but in this case we're actually expecting one more error we'll wait for the build to fail and I'll show you what the error is at this stage the next build attempted to generate the static pages but it failed because image optimization using the default wer is not compatible with the export mode so we don't get the image optimization with default wer when exporting a static site and we need to set images unoptimized to true we can do that in the next config JS file and set that option now if I run mpm run run build again this time my build should succeed and I should get my static site the build succeeded now I'll run MPX surf in the this directory to check on my actual static site if I open it first I can validate that I get my index HTML file a 404 HTML file and other assets JavaScript files and routes as well as images if I open my surf static file server my blog is actually rendering correctly and I can open posts it's working very quickly because it's a static pre-rendered static site the next step is to deploy it to GitHub Pages I'll stop the static file server and I will go to GitHub here I'll create a new repository this is my personal GitHub profile I'll call the repository nextjs blog deployment I will keep it public and not add anything else now if I run git status in my project I do have a git repository here because create next apps set. up and the this directory is new as well as next config JS I need my next config JS file I don't need a this directory we will build the NJ project with GI actions after I push so I need to include the this directory in my G ignore if I check git status now I have modified get ignore and my this directory is not here so I can make a commit with my two modified files and now to push I need to add the remote to this GitHub repository using git remote add and I will push to the main branch if I refresh GitHub now I get all my files in the entire project in GitHub the next step is to set up GitHub pages and and the deployment workflow I need to go to the repository settings under code and automation we have the pages section here we have an explanation about GitHub Pages more information linking to the documentation and under buil-in deployment we have Source by default it's deploy from a branch we want to deploy using GitHub actions and GitHub actually detected that this is an xgs application and it recommends a GitHub action template to configure it which we can actually use if I press configure it suggests creating a commit to create a directory under GitHub work fs and then a yl file called njs you can change the name of the file to anything and this is the workf GitHub Pages suggests I will actually commit it Asis and check it out in my visual studio code I want to commit directly to the main branch and we can directly commit changes now if I pull from my local repository I get this GitHub folder and my nextjs workflow all right now let's check out what this workflow in quotes it has a name which is currently the point xgs side the pages that's all right for me it's descriptive enough on is when this workflow runs by default this runs on push to the main branch this this might not be ideal on production in most cases you might want to actually run work for on pool requests or manually to have more control because this way any push to the main branch will mean a deployment but in this case for the tutorial I'll leave it exactly as it is workf this patch allows you to actually manually trigger the deployment workflow we have permissions and and these are the actual jobs build and deploy we have two jobs let's check out build first it runs on to latest and then we have an IFL condition which checks if we're using yarn or mpm we'll leave that as it's very nice if we ever decide to switch to yarn it will work out of the box here we have some options specifying the node version to6 this will work fine for now you might need to change it later if you update your project and this node version is not compatible anymore and then the actual workf is right here this is what we care about we install dependencies which we need we build and we run next export this is actually not necessary anymore next export was used previously to generate an export before we could do output export it's now deprecated so I actually need to to remove it if you don't remove it the workflow will run with a warning that next export is deprecated it shouldn't fail and last a p artifact setting path to out I actually need to change that because my path is this okay this is the change I made in build in deploy I actually don't need to change anything in deploy it will deploy the GitHub Pages the FES to GitHub pages so if I save now and check my get status I modified the workflow a bit so I'll make a commit and push to main if you remember from the triggers pushing to main should actually make this workflow run so let's check GitHub first I have my commit here and a job that is running indicated by this dot here next to the commit hash if I go to actions you can see my workflow actually running with the name of the commit here we have the Point xgs side two pages and the two jobs built and deploy if I open the job I can see more detail and works for each individual step everything up to install dependencies run and completed without errors we're now at build we'll wait for this to Finish the build job finished without any errors and we now get the deploy job starting after it the deploy job also completed without any errors and now our site should be deployed successfully if I go back to settings Pages you see your site is live at and here we see the actual path where we can find our site it's your username github.io that's work of the repository and the site is partially working as you can see the images are missing otherwise I can open individual routes and the content seems to be working correctly so the images are missing because if I check the source code they're expected to be at this route because they're in the public folder under my username github.io and directly under asset the reality is that GitHub Pages host my site at this domain but under the nextjs book deployment folder which is the name of the SW of my repository to do that we need to implement a little bit of extra logic here first we will go to the next config JS file and set the base path property and the base path property we want to set to nextjs book deployment but that is only in production if I run this up with mpm run def it's currently working correctly because I don't need that Dad and to keep that functionality here in my config file I'll check if the environment is production with a simple variable and I'll check process and environment variables not EMV this environment variable is set to development when you run the project with npm run Def and production when you're running npm run build this is very standard practice in most njs applications now with the Turner operator I can check if the environment is production in that case use this base pad otherwise set it to EMP string great now this if I build Wally during build the environment variable is production so I will get my base PAAD configuration and if I build now you will see that I've partially fixed the problem I will run again the server with Surf and open as expected the Styles and images are not loading and for most things like my anchor tag for example you can see that my base path is working I get my prefix which is n just book deployment and then the correct route but for my images I still don't get that prefix why is that because my images are generated if I open my pages folder this templates is still using the pages router which in this case is not very relevant even if you were using the app router the actual deployment process would still be the same here if I trace how my actual post are generated going to my index file now you can see all posts are taken from this function get all posts if I control click on it I've taken to the lip folder and I have an api. TS file where I have this logic get all post that uses this get post by SW method to retrieve a post from the files in this directory these are markdown files which I can see now include this matter header which specifies the images URLs and they're statically specified so NEX doesn't handle that we need to implement special Logic for that and this function which retrieves them would be the perfect place to do so because as you can see we do certain transformation for all the fields and then return the item so here's my plan for this we have three images here with pth I include this string which will be base pth and replace it in all posts with the base pad if it's available but this won't happen automatically I will need to do this manually so I need to implement the logic for that I can Implement that now right here in the get P by work option here we do multiple transforms on each field and because as you can see some fields are in the root others are nested inside other Fields what I'll do to actually convert all of my replace URL string instances that's what I want to do I want to take all of these strings and replace them with my base URL from the next config JS file which I'll import right now so I need to replace this and all of its occurrences with config base URL base PAAD I'm sorry and this also needs to be Pat let me check if I specified Pat yeah I specified Pat everywhere so to replace that we have an array of objects here actually an object items which have nested items so I will convert that to string with Json string Define then I will change that by replacing all occurr es using a regular expression I will set my regular expression to look for this specific string I need to escape the doar signs and the curly braces as they're used in regular expressions and I'm using the gar to take all occurrences with I replace them with config base pad so now I convert the items to string then I replace all instance of basad with my basad configured variable my string and then I need to set items to Json pars item string Json pars will convert this string back to an object and I need to convert items to variable not a constant and now I can return items this logic should replace base pad with all right I also left a comment here now if I build I can test my logic and we do get an error we have leftand assignment right here in the next config JS file okay this is a syntactic error this should be comparison right here let's build again now my side built correctly so I will open it by using surf first and open the this folder let's check the image parts now in the inspector so my image cover image is correctly being prefixed if I open my individual routes which I need I need to modify the euro in this case to check them my alter image is also prefixed correctly that's great and let's check OG okay the OG image is also prefixed correctly so my logic is working fine and now I need to add these changes and commit add a specific commit message and push to main this push should now trigger a deployment in my actions workflow and it did we'll wait for that to complete and check if the issue with the assets loing is fixed the build and deployment process passed correctly and in my deploy workflow I actually get the link to my deploy block and now the images on the index page are working correctly and loading and my old images are working as well if I open the detail page here all images are also loading as expected don't forget to subscribe to get notified when the next video in the series is released take care

Channel: NL Tech

Views: 3,092

Keywords: nextjs, node.js, node, js, javascript, ecmascript, es2015, es6, github, git, pages, hosting, deploying, aws, azure, vercel, static site, SSR, SSG, domain, custom domain, custom, workflow, yml, how to, how-to, tutorial, guide, walkthrough, complete

Id: mJuz45RXeXY

Length: 18min 52sec (1132 seconds)

Published: Sun Aug 27 2023