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

🌟 Exclusive Hosting Deal from Hostinger 🌟
Ready to launch your own website? Use my affiliate link to get an exclusive discount on Hostinger's reliable and high-performance hosting plans: www.hostg.xyz/...
Hostinger offers:
Easy-to-use control panel
24/7 customer support
30-day money-back guarantee
And more!
Don't miss out on this amazing offer. Click the link above to get started today! 🚀
---
In this video, I show how I successfully deploy a Next.js project on GitHub Pages using GitHub Actions, providing a simple and automated method for deployment.
=====================
Chapters:
=====================
00:00:02 - Introduction and overview of deploying a Next.js project on GitHub Pages using GitHub Actions
00:01:21 - Installing the project and creating a new GitHub repository
00:03:51 - Adding necessary configurations and making changes to the project
00:05:00 - Committing changes and setting up GitHub Actions for deployment
00:07:03 - Monitoring the build process and deployment on GitHub Pages
00:09:22 - Final check and viewing the deployed Next.js application on GitHub Pages
#NextJS #GitHubPages #GitHubActions
=====================
Related Videos:
=====================
🚀 How to deploy Next.js app to Firebase?: • How to deploy Next js ...
💻 How to use SWR in Next.js 14 APP directory?: • How to use SWR in Next...
🎨 How to use react-bootstrap in Next.js 14?: • How to use react-boots...
🔧 How to use FontAwesome in Next.js 14 with app directory?: • How to use FontAwesome...
📸 Introduction to Next.js Image Component: • Introduction to Next j...
🔒 Integrating Zod into Your Next.js 14 App for Client-Side and Server-Side Validation: • Integrating Zod into Y...
📦 How to fetch data from API in Next.js 14 +?: • How to fetch data from...
🔗 How to change font in Next.js 14 + ?: • How to change font in ...
⚙️ How to create backend in Next.js 14 +?: • How to create backend ...
🛠 How to use Mongoose with Next.js 14 +?: • How to use Mongoose wi...
🌐 How to deploy react app on GitHub pages in 5 minutes: • How to deploy react ap...
🚀 Just Made KZbin Transcripts Downloader of all videos for a channel with Next.js | DEMO: • Just Made KZbin Tran...
🎬 Step-by-Step Guide to Upload Your Website to GitHub Pages for Free: • Step-by-Step Guide to ...
📂 How to upload Next.js on GitHub and Vercel?: • How to upload Next js ...
🔗 Playlist: Next.js 14+: • Next.js 14+
🔐 How to Add a Stylish Progress Bar to Your Next.js Website?: • How to Add a Stylish P...
🔷 How to install and use tailwind css in Next.js App?: • How to install and use...
🔔 How to connect domain with hosting in digitalocean: • How to connect domain ...
🎥 Playlist: Hosting: • Hosting
🖼 How to use icons in Next.js 14?: • How to use icons in Ne...
🧱 How to create Modal in Next.js?: • How to create Modal in...
=====================
To read written versions of AyyazTech tutorials, please visit AyyazTech.com

[@thebocksters2756]

What is this harry poter music on background...

[@ddogevandergraph1863]

Thank you, sir. Plain and simple.

[@AyyazTech]

Thank you for your kind words! I'm glad you found the video helpful. 😊 If you're interested in more content, you might like these related videos: - How to use SWR in Next js 14 APP directory? kzbin.info/www/bejne/amq5f2qAg9J-bbc - How to use FontAwesome in Next js 14 with app directory? kzbin.info/www/bejne/pZy9moCHordqb9k - Introduction to Next js Image Component kzbin.info/www/bejne/fqHIknt5jtKjmbs For more detailed guides, check out these articles on my blog: - How to call a function from another component in Angular 17 www.ayyaztech.com/blog/how-to-call-a-function-from-another-component-in-angular-17 - How to force push to GitHub: A Step-by-Step Guide www.ayyaztech.com/blog/how-to-force-push-to-github-a-step-by-step-guide - Creating your first chatbot with Langchain and OpenAI: A Step-by-Step Tutorial www.ayyaztech.com/blog/creating-your-first-chatbot-with-langchain-and-openai-a-step-by-step-tutorial Don't forget to like, share, and subscribe for more tech tutorials and tips! Click the bell icon to get notified of new videos. 🔔 If you have any specific topics you want me to cover, let me know!

[@saqibkhatib-y7e]

super helpful and to the point! thanks much!

[@Arcane_Dragon878]

Amazing video man! Still works in sept 2024

[@egle-dancer]

Thank you very much! 💗

[@AyyazTech]

You're welcome 😊

[@sanjeev3799]

Thank you very much 😀

[@AyyazTech]

You're welcome 😊

[@viniciusnascimento6503]

very nice man thanks

[@calvincrane]

Thank you, but I'd not use the music in future. That's just my taste though or have it softer.

[@AyyazTech]

Thanks for the feedback about the music! You make a great point - and you're not alone. Many viewers mentioned the same thing in the comments. I've decided to keep future videos music-free to focus on the content. If I ever use background music, I'll definitely keep it super light. Really appreciate you helping me improve! 🙏

[@ayesha11261]

This was really helpful. Thanks 👍

[@AlanCorcos-me5tn]

nice video and music, thx

[@samuelmovies1289]

nice video, helpfull

[@AyyazTech]

Thank you! I'm glad you found the video helpful. 😊 Don't forget to subscribe to the channel, give the video a like, share it, and click the bell icon to get notified about new content. You might also find these videos useful for further learning: Learn How to Create a REST API Using Next.js 14's New App Directory Structure kzbin.info/www/bejne/p2qXeHyBgdKDeKs Integrating Zod into Your Next.js 14 App for Client-Side and Server-Side Validation kzbin.info/www/bejne/b4amoImDa7abpLc How to Deploy Next.js App to Firebase? kzbin.info/www/bejne/sInNYplqe82kn8U Also, check out these related blog articles: How to Use OpenAI API with Python 3 www.ayyaztech.com/blog/how-to-use-openai-api-with-python-3 Creating Your First Chatbot with LangChain and OpenAI: A Step-by-Step Tutorial www.ayyaztech.com/blog/creating-your-first-chatbot-with-langchain-and-openai-a-step-by-step-tutorial Thanks for your support! 🚀

[@rezhabahari]

thanks! it works

[@AyyazTech]

You're welcome! I'm glad it worked for you! 😊 If you're looking for more related content, you might find these videos helpful: - How to create a DigitalOcean Droplet for Your Laravel Application? kzbin.info/www/bejne/jXrOnJZofsZ2gJI - Mastering GitHub Downloads: Files, Directories, and Repositories kzbin.info/www/bejne/Z4vRhqOlibyjkMk - How to Compare Two Branches in GitHub - A Step-by-Step Guide kzbin.info/www/bejne/mZm3q39ujq-Bl9k Additionally, here are some relevant articles from my blog: - How to Force Push to GitHub: A Step-by-Step Guide www.ayyaztech.com/blog/how-to-force-push-to-github-a-step-by-step-guide - How to Fork a Repository on GitHub: A Step-by-Step Guide www.ayyaztech.com/blog/how-to-fork-a-repository-on-github-a-step-by-step-guide Don't forget to like, share, and subscribe for more tutorials! 👍🔔

[@Lindsay1713]

build is broke once adding pages: Run npx --no-install next build unhandledRejection ReferenceError: Headers is not defined

[@AyyazTech]

This specific error, Headers is not defined, typically occurs when using server-side features or APIs that are not available in the build environment of static site generators like Next.js when deploying to platforms like GitHub Pages. GitHub Pages is intended for static sites and might not support certain server-side Node.js features used by Next.js. To resolve this issue, you might need to: Modify Your Code: Ensure that any server-side code or Node.js-specific APIs are either removed or properly guarded so that they don't execute during the build process. Check Environment Compatibility: Verify that all features and APIs used in your Next.js project are compatible with the static site generation and the deployment environment of GitHub Pages. Local Debugging: Try building your project locally using npx next build to see if the issue is reproducible. This can help you isolate the problem. Server-Side Rendering (SSR) Alternatives: If your application relies heavily on SSR or Node.js APIs, consider deploying it to a platform that supports SSR, like Vercel or Netlify, instead of GitHub Pages. Remember, the solution depends on the specific use of server-side features in your Next.js project. For more tech tutorials and tips, consider subscribing to AyyazTech on KZbin. If you have further questions or need more assistance, feel free to leave a comment under the video.

[@robertojordan3407]

Nice video! Thanks!!!

[@thejhoxx4336]

Nice video, short and well explained

[@AyyazTech]

Glad it was helpful! Please don't forget to subscribe to my youtube channel and click on bell icon to get notified for upcoming videos. Also please like and share this video.

[@raphaelamericano4115]

Awesome! Help me a lot! thanks

[@AyyazTech]

Thank you so much for taking the time to watch my video and for leaving such a positive comment! I'm really glad to hear that it helped you a lot. Your feedback means the world to me. If you found value in my content, please don't forget to hit the like button, subscribe, and turn on notifications. It really helps the channel grow! Looking forward to seeing you in the comments of other videos on my channel. I hope you continue to find them useful. 😊 Best wishes,

[@cambsdigital]

Very good, reduce the background music as a suggestion. The content was very good decent speed too. TY

[@kacperkepinski4990]

what about variables?

[@AyyazTech]

Great question about using variables in the deployment process! In the context of deploying a Next.js project on GitHub Pages with GitHub Actions, you can add environment variables directly in your GitHub repository settings. Navigate to the 'Secrets' section under settings to add these variables. They are essential for managing sensitive data like API keys or for setting up different configurations during the build process. If you have more specific queries on implementing these variables in your Next.js project, feel free to ask! Don't forget to subscribe to AyyazTech for more tech insights and tutorials. Click the bell icon to get notified about our upcoming videos. Thanks for watching and for your engaging question! 🔔🌐👍

[@konstantinreut2577]

Unfortunately, Static HTML export with Next.js can't be completed. I did everything like on the video, but it failed. Does anybody know how to fix it? Thanks in advance.

[@AyyazTech]

Hi there! Sorry to hear you're facing issues with the Static HTML export using Next.js. A common hiccup might be in the configuration steps or the path settings. Double-check these areas, and make sure you've committed all changes before deployment. If the problem persists, could you share any error messages you're seeing? This will help in pinpointing the exact issue. Also, don't forget to subscribe to the AyyazTech channel for more helpful tutorials, and hit the bell icon to stay updated. If you have any suggestions for future videos or topics you'd like to see covered, let us know in the comments! 🌟🔔

[@Vampion]

same err is your solved?

[@stanleylew1688]

yeah I'm getting the same error

[@Vampion]

i found the solution now mine works@@stanleylew1688

[@JonnyNW]

Also getting the same error. Did everything in the video with a blank app. Doesn't seem to work anymore.

[@narayandhungel1117]

Can I host private repo on github🤔

[@AyyazTech]

Absolutely! You can host a private repository on GitHub. However, when it comes to hosting a Next.js app on GitHub Pages, it's important to remember that GitHub Pages serves content publicly. This means that while your repository can be private, the content you deploy to GitHub Pages will be publicly visible on the web. If your goal is to keep both the source code and the deployed content private, you might want to consider other hosting services that support private hosting. Services like Vercel, Netlify, or even a private server could be suitable alternatives. For more tips and tutorials on web development, don't forget to subscribe and hit the bell icon for notifications. Feel free to share our content with others who might find it helpful! 🚀👩‍💻🔔

[@Alexxanderrx]

Thank you!

[@AyyazTech]

You are welcome. I am glad that this video was helpful for you.

[@GABRIELDOBT]

thank you !

[@omnilothar]

this is CSR only right?

[@AyyazTech]

Yes, the method I demonstrated is geared towards client-side rendering (CSR). If you have a specific use case where server-side rendering (SSR) or static site generation (SSG) is needed, let me know! I'd be happy to cover that in a future video.

[@Testa123]

For the relative path, shouldn’t it be “../../public/

[@AyyazTech]

Good catch! In most Next.js projects, the public folder is configured to serve static assets, which means you can usually reference them directly like /image.png. However, if you're using relative paths for some reason, then yes, you would need to properly traverse the directories as you mentioned. I'll keep that in mind for future tutorials. Thank you for bringing it up!

[@narayandhungel1117]

Failed to parse src "../public/headshot.png" on `next/image`, if using relative image it must start with a leading slash "/" or be an absolute URL ( or ) @@AyyazTech I have got this error while using relative path, is there any solution ?

[@nemonobody1535]

Great video. Thanks for sharing

[@AyyazTech]

Thank you for watching and for the positive feedback! I'm delighted to hear that you enjoyed the video. Don't forget to subscribe and hit the bell icon so you won't miss out on future content. Your support means a lot!

[@pratikbhandari9429]

Getting error like Static HTML export with Next.js

[@AndreEzequiel]

Thanks for the content, it helped me!

[@AyyazTech]

Glad to hear it!

[@diegohuarsaya1530]

thanks for the video :)

[@AyyazTech]

You are welcome. I am glad that this video was helpful for you.

[@сергейтот-с5ф]

Best video!

[@AyyazTech]

Thanks

[@liebespaar93]

thx U

[@AyyazTech]

Thanks! Glad you liked it. Stay tuned for more cool content on AyyazTech. Don't forget to subscribe and hit the bell icon for the latest updates! 🔔👍📹

[@OrlandoCV0107]

Gracias!!!

[@AyyazTech]

De nada. No olvide suscribirse a mi canal de KZbin y hacer clic en el ícono de campana para recibir notificaciones sobre más videos próximos. También dale me gusta y comparte este vídeo :)

[@fatmacn724]

music amazinggg

[@AyyazTech]

Thanks

[@MikixIT]

This music make me scared.

[@ISMAIL-wy7ef]

Thank you very much! 💗

[@AyyazTech]

Welcome!