In this video I'll demonstrate how to deploy a Next.js application to GitHub pages. This will be applicable to Next apps that can be compiled to a static site. Dynamic routes that depend on on-the-go Server-Side Rendering (SSR) will not work fully with this deployment method.
The process will include setting up the Next.js app in export build mode. In this mode the app outputs static files after the build is complete. After that we will push the application source code to a GitHub repositoy and setup a GitHub actions workflow which will build the Next.js application and deploy it to GitHub pages.
Contents:
0:00 Introduction
0:10 Finding a Next.js Starter Template
2:01 Exporting the App to a Static Site
4:45 Create the GitHub Repository
5:56 Setup the GitHub Pages Deployment
10:55 Fix the Image Base Path
18:31 Conclusion
Next.js Templates:
vercel.com/templates/next.js
"Static Exports" Documentation:
nextjs.org/docs/app/building-...
"basePath" Documentation:
nextjs.org/docs/app/api-refer...
Social Media:
Email: nikola.n.lazarov@outlook.com
Twitter: / nikelaz
LinkedIn: / nikola-lazarov
#deploy #nextjs #githubpages
This is great, so easy to set this up and totally for free. Thanks for the tutorial
I loved your tutorial. Thank you. 🙏
Thank you! I'm glad you found it useful.
Thank you so much for this tutorial!
Thank you! Glad you liked it!
thankyou so much , it help me a lot , i am become fan of you
Thank you! I’m glad the video was helpful!
Very useful, thank you! The only issue I had was that NextJS currently requires Node >=18.17 in its latest version (14.0.3), but it was easily fixed by changing the node version in the .yml file.
Thanks for sharing!
thank you, i had problems at build
Thank you! I'm glad you found the video helpful!
File not found The site configured at this address does not contain the requested file. The build doesn't generate index.html how to deploy it in github then?
Thank you so much!
Thank you! I’m glad you found the video useful!
Hi NL, what do you think about the idea of Conversational AI taking over the current GUI systems?
Thank you for the interesting question! I'm not a UX specialist so this is just my personal opinion. I believe that Conversational AI alone, even in a very advanced state will not completely replace GUI systems. I think that, fundamentally, a system of interaction (or an interface) will replace another one if it can make human-computer interaction faster and more convenient. Conversational AI is certainly more efficient for numerous tasks. A good example is an information system like an online encyclopedia or a documentation. Conversational AI systems can retrieve the right information with a simple question, without the need for a user to explore structures in a GUI and skim content for the information he cares about. This is more convenient, faster and I would argue a more natural human-computer interaction. On the other hand, lets look at the area of professional software - in these tools, you want granular control over the product the software produces. Using a Conversational UI system for fine control of many parameters would be a nightmare, and much more inefficient than a GUI. So it's certainly a cool technology. I think it will be incorporated alongside most interfaces and replace many of them, but will not completely overtake GUI to some potential eventual extinction. I don't imagine that as even a remote possibility in a distant future. That's just my two cents. What are your thoughts on this?
@nltech2857 Yeah, I think this tech could definitely replace some GUI apps, but we're not totally sure how much or when exactly. It'll basically come down to whether companies are up for putting in the effort and cash to make it happen. 🤔
мы всё умрём от ИИ
Thank you very much! To resolve a problem with static HTML when deploying was really hard. You found a solution. How did you figure out all of this?
Glad it helped. I am a developer and I do all sorts of deployments day-to-day, so I am aware of most offering for CI/CD which are available, there's no specific source where I learned this.
link of the repo please??
спасибо !
Thank you!
FirebaseError: Firebase: Error (auth/invalid-api-key)
very useful, but don`t work comand `sevre .` after 'npm run build' 12:44
I'm running "serve" not "sevre". In addition this is a global Node package - www.npmjs.com/package/serve which is just a static file server. You have to install it with "npm install -g serve" first, or use it with npx "npx serve ." The dot indicated the current directory. You can specify any path in its place.