One tip! Please refrain from saying that things are 'just basic'. Anyone trying to get started with next js is already on a steep learning curve. Nothing is basic!
This video might be the most exact match for what I need, and the ultimate step-by-step tutorial. Thank you very much for the time you invested and congrats: you now have a new fan
Instead of going over all the topics and telling what is what and overwhelming the viewers, you gave simple examples without telling the complexity. Thanks for making it happen.
Many thanks for taking the time to post this content. It is really good to see this kind of material on 'hosting your own' - its not ( that ) difficult to do this sort of thing and particularly when deploying a few things together like node, nginx, nextjs and friends and you are so right, we are cheap scates, we have to be - hosting services like vercel, railway, heroku etc, even firebase all have their place and use cases but when doing this for everything, costs add up. So why not save yourself a bumch of money for small ventures or try outs and employ a small droplet in Digital Ocean or a Linode VM. Even AWS and Azure have small, budget VMS. Theres hetzner, which can be even less. There are loads of options out there. With your video on this and the skills there in, there are many, many options 🙂 thanks again
AMAZING video! Thank you so much! For me I had to run npm run build and only after that pm2 start ... works well. before npm run build the pm2 has throwing an error that BUILD_ID directory is not found
@@doepaflex yes exactly! It’s the same process. I used a subdomain because I didn’t have another domain to use and wanted to demo. But it’s the same. 😊
Hey!!!!! Thank you so much for your work! It really was much easier to get then from digital ocean instruction. Thank you so much! So happy to see my App working :)
This is really an amazing video. It was very to the point so simply following along was all that was necessary to get the desired result. Also it was really great that you included all the commands you ran in this video on github. I could simply copy and paste them all. Keep up the good work!
Thanks for the different approach. All the help files out there are the same, and none are suitable for my situation. I want to be 100pct independent from any monthly service except the server hosting.
This tutorial is great, but don't ignore the sites-enabled file, use symlink instead. Otherwise, Certbot won't be able to redirect users from HTTP to HTTPS.
Thank you for the incredible video! I have a question: I’m currently using a droplet to host WordPress and would like to host a Next.js application on the same droplet. I followed your steps, but are there any additional considerations I should consider when hosting Next.js and WordPress on the same server?
Hi, I really enjoyed the video, however your video only shows, running a nextjs project on ubuntu when you clone the source code files from git and run the project on the server. my project build files are getting dropped through the Azure Devops release agent as I do not intend to keep the source code files on the server. Please let me know how to deploy I am stuck, your method works when I get the source code files. this is for anyone in the comments too.
Hey this is cool ❤️ Can you expand on this and show us how to add postgresql and redis to this same setup and then wire up whole thing up? Also this covers just installation. Knowing to write a simple deploy script that pulls from main branch on git push would be great 👍
Thank you! I didn’t want to make the video too long but I can definitely expand more. You can add continuous deployment integration between Git and an Ubuntu server. And you can add a database system to Ubuntu as well. I use MySQL but I’m certain same principles apply. I’ll consider all this on upcoming videos.
anyone having problems with their site tagged as not secure in apple devices? it appears that way when i use my ipad or macbook pro... everywhere else it's secure...
Thank you for this excellent video course; the video's quality and instructions were outstanding. I'm having a slight issue; I am getting a 502 Bad Gateway Error with nginx/1.22.0 (Ubuntu). If you could guide me in the right direction, that would be amazing. Thank You
There is one thing that is not clear to me about Next.js, if I do follow your tutorial and just upload a Next.js App to a server from scratch, will the APIs in my application be "Serverless" like in Vercel deployments? I expect not, but I am not sure about this. By the way, THANK YOU for this tutorial, it's very useful!
NextJS wouldn’t be described as serverless regardless of where it’s hosted since it’s just a software framework. It’s where you host itself that would be described as serverless. So Vercel hosting would be serverless since they serve as a middle network between you and the server if I’m not mistaken. And you’re welcome! I’m glad you enjoyed it
Very good explaination! Thank you! When i follow your tutorial the starter script run fine. but when I tried to installed a nextjs from a third party but i get a bad gateway. I contacted the guy which made the app he said i should set serversideprops. How does that work?
Awesome. Thank you. GetServerSideProps wouldn’t have any affect on this tutorial. But you can look into that feature right on nextjs online docs. Fyi getServerSideProps is actually going to be deprecated eventually though for fetch in the next 13 app directory when it becomes stable
Is there any specific task we have to perform if we launch multiple site to one server and want to connect MySQL database. Because my database connection is not working some how Getting error connect ECONNREFUSED::1:3306 what could be wrong?
Connecting to a database is not really in the scope of this tutorial. A lot can be the issue connecting to a server on a digital ocean droplet. Make sure to follow a strict tutorial on setting up and connecting to a MySQL database on a droplet. Also what you can do to check is use MySQL workbench to test your connection and db first to be sure you have the right connection setting s
Awesome video! Thanks for sharing it! If you're using next + wordpress as a headless cms, would the same steps apply? I want to set up my own vps but had a bit of trouble following the instructions.
Yeah because you can even host a Wordpress site on the same Ubuntu server! Setting up a Wordpress site on this server isn’t covered in this video though.
@@thedigitalceo Cool! Going to follow the same process to set up mine then. Have you used Hostinger before? I wanted to use digital ocean, but their options/services are a bit intimidating for someone with limited backend knowledge like myself.
Thank you for this beautiful tutorial. Meanwhile, I followed all steps, the default NGINX page displayed, but the moment I deleted the default, I started getting "Bad Gateway" error. Any idea what could have caused this? Thank you.
Awesome video - keeping it succinct but with enough explanation! I'm having an issue where the Next app loads, but without the CSS. I followed all steps to the dot so not sure what the issue could be. Would you have any pointers please?
I believe I’ve seen that before. That’s tricky because I don’t recall where the issue was. I would try to delete the directory and re-clone. Double check the path in nginx config file. Worst case I would destroy the droplet and try it over. I’ve done that several times when I couldn’t retrace where I went wrong. My discord link is link now up to date also if you want to join there as well
Hi! I have a question. I've been working with react and nextjs for the past year, and I wanted to start deploying some of my projects. I do understand that when building the project you serve static files and that fetch functions are, out of the box, not available. Am I right? Will this method of deploying fix that, and allow me to keep my useEffects and stuff that perfom api/fetch requests? Is this something like running "npm run dev" that lets me those requests? Im a 100% noob at hosting and deploying. Thanks
Exactly what i was looking for!! Thank you so much man but one doubt My next.js project contains some environment variables and i tried adding .env.local file and then rebuilding and restarting the nginx server but it isn't working can you please suggest me the solution updated:: I did worked i just forget to restart the pm2
Hello Thank you very much for this tutorial. Is it necessary to enable ssl to deploy nextjs? I have done all the steps but I have a 403 error when accessing the files in the _next/static path. Is there a way to fix this?
what about git? is there any of your tutrial about it? so we can easily edit the codes from local pc, than we do pul on the server some kind like that.
Same idea but instead of setting up a new next js app, git clone your app right in terminal in the same spot. But remember you need to grant the repo permissions so create an ssh key on the droplet and the add that public key to the deploy keys settings for the repo on github
@@thedigitalceo got it! Great video btw! I’m wondering if its also possible to create a github actions runner that rebuilds on pushes to main. Maybe a video idea for the future?
Hey, this is amazing and thank you for posting this video. Likewise, I would love to get little help from you, Everything was going well and I cloned my GitHub repo with a next js project into the var/www directory, installed npm and the project was online with pm2 as well. followed you thoroughly for every process and SSL was also active however, in the end, I get a 502 Bad Gateway Nginx/1.18.0 (Ubuntu) error. What might be missing?
Thank you. That’s hard to debug because the error is so generic but I believe it must be related somewhere in the nginx file. Somehow it’s not pointing to the right directory where the NextJS site lives on the site. Also make sure you removed the default nginx files. Also make sure you didn’t miss the step where I changed nginx code config to only use the sites-available folder and ignored sites-enabled
i got this same error because i forgot to install my next.js packages make sure to install npm packages then run ( npm i to install ) npm run build if your're terminal get killed follow this setup and run again 1, sudo fallocate -l 1G /swapfile 2, sudo chmod 600 /swapfile 3, sudo mkswap /swapfile 4, sudo swapon /swapfile 5, sudo swapon --show 6, sudo cp /etc/fstab /etc/fstab.bak 7, echo '/swapfile none swap sw 0 0' | sudo tee -a /etc/fstab 8, sudo sysctl vm.swappiness=10 9, echo 'vm.swappiness=10' | sudo tee -a /etc/sysctl.conf 10, sudo sysctl vm.vfs_cache_pressure=50 11, echo 'vm.vfs_cache_pressure=50' | sudo tee -a /etc/sysctl.conf then npm i and npm run build ( make sure crct path var/www/your domain or app folder name
Excellent tutorial! i just have one question. I have a headless woocommerce project in nextjs. the woo site is hosted in siteground but the front-end in vercel. Is it worth switching to digital ocean? I'm afraid of hidden costs using vercel. The site i have has over 20,000+ products and is quite big generally.
@@thedigitalceo on siteground very expensive cloud hosting like $160/mo (200GB SSD, 11GB RAM, 5 core CPU)+ cloudflare plus $11.95 . that's because the site is like 60GB overall with db and traditional woocommerce. i'm doing it headless now (still in test mode) so im thinking what would be best. vercel has quite a lot of limitations in image optimizations etc. on vercel im still on free plan but im considering either to upgrade there or move to DO. what's best in your opinion?
@@thedigitalceo both. already paying high fees for backend, so i wouldn't want to use very expensive platform for front-end and definitely scalability is a concern. The current traditional woo site is having 70-80k users daily on average. It will scale for sure because there's high traffic expectation. So i want to still use vercel goodies like image optimizations etc but not pay them $9 per 1000 images. the site has 20,000+products. I'm a little bit stuck tbh. initially i thought vercel would do it but i see there's a lot of hidden costs. and last concern, vercel does lots of things by default, hopefully DO won't be problematic
@@alexkey9372 but right now it’s already hosted on vercel hobby? And it’s not breaking? And when you say woo site you mean the backend API, the headless content? What language and database is the backend using. Is it using the headless Wordpress content you mean? (So it’s not directly accessible but just the json is) And that is $160 a month?
You would just create the file in the terminal after logging into the server with terminal bash commands. Cd into the route “nano .env.local” creates the file puts you in edit mode and then type out the variables and save the file with ctrl o.
i did , but it doesn't work , i don't know if it's about the .env this time , i think digitalocean doesn't support serverless functions such as getServerSideprops and getInitialprops ?
@@sahnounmohamed5871 it should support those. Test everything locally piece by piece to make sure you know where the real problem actually is. FYI you may need to restart pm2 or server if adding new environment variables
I'm so cheap I have to carry a can of 3 in one oil to keep my ass from squeaking when I walk. So how about showing us how to do this with a REAL server? Ubuntu on a server and my laptop.
Sorry if you have gotten my comment multiple times. It keeps getting deleted for some reason. If you can see it on your end and post a response, greatly appreciate it
@@thedigitalceo Can you store a database on the server with this setup and still pay $7? Or is it an additional fee of $15 for storing your database with them?
@@sbdev5853 if you install the database on this same server it should all be one cost - the cost of the server only. I use MySQL which is open source. You can install MySQL on this Ubuntu server like any other database system and use that as the database for any backend service at no additional cost. But if you opt to using Digital Oceans separate “managed database” service and put the database over there and then pull from there that I believe is an additional $15 a month.
@@thedigitalceo That's where I was confused with the managed database service. I thought the only way to add a database with Digital Ocean is to use that service. This makes sense now. Please add a video with adding a MySQL database to this setup. Thanks for the clarification.
i got bad gateway 502 error because i forgot to install my next.js packages make sure to install npm packages then run ( npm i to install ) npm run build if your're terminal get killed follow this setup and run again 1, sudo fallocate -l 1G /swapfile 2, sudo chmod 600 /swapfile 3, sudo mkswap /swapfile 4, sudo swapon /swapfile 5, sudo swapon --show 6, sudo cp /etc/fstab /etc/fstab.bak 7, echo '/swapfile none swap sw 0 0' | sudo tee -a /etc/fstab 8, sudo sysctl vm.swappiness=10 9, echo 'vm.swappiness=10' | sudo tee -a /etc/sysctl.conf 10, sudo sysctl vm.vfs_cache_pressure=50 11, echo 'vm.vfs_cache_pressure=50' | sudo tee -a /etc/sysctl.conf then npm i and npm run build ( make sure crct path var/www/your domain or app folder name
im still getting a 502, i reran all the install commands, double checked everything, when I run pm2 start, my server hangs at 100% CPU usage. any ideas?
One tip! Please refrain from saying that things are 'just basic'. Anyone trying to get started with next js is already on a steep learning curve. Nothing is basic!
This video might be the most exact match for what I need, and the ultimate step-by-step tutorial. Thank you very much for the time you invested and congrats: you now have a new fan
Instead of going over all the topics and telling what is what and overwhelming the viewers, you gave simple examples without telling the complexity. Thanks for making it happen.
Many thanks for taking the time to post this content.
It is really good to see this kind of material on 'hosting your own' - its not ( that ) difficult to do this sort of thing and particularly when deploying a few things together like node, nginx, nextjs and friends and you are so right, we are cheap scates, we have to be - hosting services like vercel, railway, heroku etc, even firebase all have their place and use cases but when doing this for everything, costs add up.
So why not save yourself a bumch of money for small ventures or try outs and employ a small droplet in Digital Ocean or a Linode VM. Even AWS and Azure have small, budget VMS. Theres hetzner, which can be even less. There are loads of options out there.
With your video on this and the skills there in, there are many, many options 🙂
thanks again
What a clean guide. Thank you, dude
Double like! This was clear, concise, and it worked.
Best NGINX NEXTJS HTTPS video ever, exctly as advertised, everything you need, works like a charm indeed! Thanks for taking the time to share.
This has to be the best straightforward guide I have ever seen! Thanks.
Really awesome tutorial. Concise and to the point! Thank you - I’ll be using digital ocean to do this!
I just did! Great stuff Omar, I'm loving ubuntu now, thankyou!
AMAZING video! Thank you so much!
For me I had to run npm run build and only after that pm2 start ... works well.
before npm run build the pm2 has throwing an error that BUILD_ID directory is not found
Best video made for nextjs , if i can like this video thousands of time i will
Thanks, you've helped me a lot with my internship! Very useful since most CZcamsrs would just opt for Vercel or Netlify when deploying.
That is exactly what I was looking for! Thank you so much ... Appreciate it! Keep up the good work!
Took me a while to get the perfect steps down. Enjoy!
@@thedigitalceo Can you maybe show how to to the same with differnet urls - and not subdomains :) That would be awesome
sry mb ... i just figured it out :D Its the same process ... thx a lot :)
@@doepaflex yes exactly! It’s the same process. I used a subdomain because I didn’t have another domain to use and wanted to demo. But it’s the same. 😊
Hello from Brasil!
I have to say, thanks a lot! This simple and fun vídeo teached me exactly what i needed. Seems like you read my mind hahaha
🥰🙏
Hey!!!!! Thank you so much for your work! It really was much easier to get then from digital ocean instruction. Thank you so much! So happy to see my App working :)
I subscribed because of your next js deploy video . please upload more , some of us really struggles to deploy
Deployment is tough! I suppose it’s one of the reasons places like Vercel and Netlify are really winning. Which I love but we do need options.
@@thedigitalceo Great part is that you simplified it for upcoming developers
This is really an amazing video. It was very to the point so simply following along was all that was necessary to get the desired result. Also it was really great that you included all the commands you ran in this video on github. I could simply copy and paste them all. Keep up the good work!
Great course! Thank you for your help.
Also thank you for your fun :)
Perfect course.
You helped me so much, thank you.
Wow... this is what I am looking for. You are great my bro... thanks and thanks a lot.
Exactly what I was looking for!! Appreciate the hard work
that sound you did is not ASMR it made me almost wanna puke ... thank you for the best video on youtube explaining exactly what I needed
No words to how much I am grateful for your video. keep up the great work
Just stumbled upon your channel and I am loving it. Great contents
This is really awesome tutorial, thank you so much sir for this tutorial.
Thanks for the different approach. All the help files out there are the same, and none are suitable for my situation. I want to be 100pct independent from any monthly service except the server hosting.
This tutorial is great, but don't ignore the sites-enabled file, use symlink instead. Otherwise, Certbot won't be able to redirect users from HTTP to HTTPS.
Thanks for this awesome video showing the simple process to start. You earned a subscriber here. 👍
This video is the
only thing we need to deploy something something on vps 🔥
Thanks so much for this video, I really enjoy it and help me a lot!!
WordPress as headless cms plus next js in one vps. Is it possible. Please make video about this. I love youuuu
Thank you for the incredible video! I have a question:
I’m currently using a droplet to host WordPress and would like to host a Next.js application on the same droplet. I followed your steps, but are there any additional considerations I should consider when hosting Next.js and WordPress on the same server?
Great video! Thank you very much for the help.
You helped me so much! Very grateful
Thank you Omar, it works!
Hey bro can u make a video on how can i can setup email server at the same vps where you deployed these two demo project?
thank you , i followed everything and its working fine , can you make a video about how to link github actions to make auto deploy avalaible ?
Hi, I really enjoyed the video, however your video only shows, running a nextjs project on ubuntu when you clone the source code files from git and run the project on the server. my project build files are getting dropped through the Azure Devops release agent as I do not intend to keep the source code files on the server. Please let me know how to deploy I am stuck, your method works when I get the source code files. this is for anyone in the comments too.
Well explained! exactly wha I need.
This is what I'm looking for! btw, could you please continue this tutorial by auto deploying GitHub?
Hey this is cool ❤️
Can you expand on this and show us how to add postgresql and redis to this same setup and then wire up whole thing up?
Also this covers just installation. Knowing to write a simple deploy script that pulls from main branch on git push would be great 👍
Thank you! I didn’t want to make the video too long but I can definitely expand more. You can add continuous deployment integration between Git and an Ubuntu server. And you can add a database system to Ubuntu as well. I use MySQL but I’m certain same principles apply. I’ll consider all this on upcoming videos.
@@thedigitalceo Yes, please do some connecting to mySQL databases! Everyone has forgotten about mySQL, but it's so powerful and free!
Quality content at its finest
Wow. Thank you.
anyone having problems with their site tagged as not secure in apple devices? it appears that way when i use my ipad or macbook pro... everywhere else it's secure...
Great Tutorial man. Gold Bless you
how to setup all these in current project directory without creating new project?
I’m confused. Can we do all this stuff with docker as well? If yes then why this all needed ?
This is GOLD! Thanks man!
If I already have cyberpanel installed on my VPS, is it possible to host a nextjs website on the same Ubuntu?
my CPU usages jumps to 100% when I run pm2, and get a 502 gateway, any ideas why?
Amazing video!
Thank you for this excellent video course; the video's quality and instructions were outstanding.
I'm having a slight issue; I am getting a 502 Bad Gateway Error with nginx/1.22.0 (Ubuntu). If you could guide me in the right direction, that would be amazing.
Thank You
You need to run - npm run build / on your project directory.
after first time deployment, and i have updated the application, how to deploy the update?
I have an old computer can we do the same there? I installed ubuntu server and i need some help with it.
Excelent tutorial! Thank you
There is one thing that is not clear to me about Next.js, if I do follow your tutorial and just upload a Next.js App to a server from scratch, will the APIs in my application be "Serverless" like in Vercel deployments? I expect not, but I am not sure about this.
By the way, THANK YOU for this tutorial, it's very useful!
NextJS wouldn’t be described as serverless regardless of where it’s hosted since it’s just a software framework. It’s where you host itself that would be described as serverless. So Vercel hosting would be serverless since they serve as a middle network between you and the server if I’m not mistaken. And you’re welcome! I’m glad you enjoyed it
@@thedigitalceo Oh, Thank you so much for this clarification, now the concept is clearer! 🙂
You got a new subscriber! Have a good day!
how get that terminal to write everything? can you show us?
Awesome content... Right to the point
Could you please continue this tutorial by auto deploying GitHub with docker?
Excellent video
Did it restart nextjs after system restart.
Also api routes also working 😊
Very good explaination! Thank you! When i follow your tutorial the starter script run fine. but when I tried to installed a nextjs from a third party but i get a bad gateway. I contacted the guy which made the app he said i should set serversideprops. How does that work?
Awesome. Thank you. GetServerSideProps wouldn’t have any affect on this tutorial. But you can look into that feature right on nextjs online docs. Fyi getServerSideProps is actually going to be deprecated eventually though for fetch in the next 13 app directory when it becomes stable
Is there any specific task we have to perform if we launch multiple site to one server and want to connect MySQL database. Because my database connection is not working some how
Getting error connect ECONNREFUSED::1:3306
what could be wrong?
Connecting to a database is not really in the scope of this tutorial. A lot can be the issue connecting to a server on a digital ocean droplet. Make sure to follow a strict tutorial on setting up and connecting to a MySQL database on a droplet. Also what you can do to check is use MySQL workbench to test your connection and db first to be sure you have the right connection setting s
Awesome video! Thanks for sharing it! If you're using next + wordpress as a headless cms, would the same steps apply?
I want to set up my own vps but had a bit of trouble following the instructions.
Yeah because you can even host a Wordpress site on the same Ubuntu server! Setting up a Wordpress site on this server isn’t covered in this video though.
@@thedigitalceo Cool! Going to follow the same process to set up mine then. Have you used Hostinger before? I wanted to use digital ocean, but their options/services are a bit intimidating for someone with limited backend knowledge like myself.
Please which hosting server supports both next js and Django together because my website comprises of both
I'm trying to reproduce this in 2024, but i cant install or build the next app in the droplet due to a low memory, how can I fix this?
It was just thi. export NODE_OPTIONS=--max_old_space_size=1024
Thank you for this beautiful tutorial.
Meanwhile, I followed all steps, the default NGINX page displayed, but the moment I deleted the default, I started getting "Bad Gateway" error.
Any idea what could have caused this?
Thank you.
I terminated the AWS instance and launched a new one.
Everything seems fine now.
Thank you.
If anyone facing issue of .includes undefined try running npm start -p 3000
I don't see the changes even thought i run `npm run build`. I'm makeing the changes from ftp client. Any help on this?
Awesome video - keeping it succinct but with enough explanation!
I'm having an issue where the Next app loads, but without the CSS. I followed all steps to the dot so not sure what the issue could be. Would you have any pointers please?
My bad. In the sites-available config I listed the domain name instead of the next project folder name. It works as expected now. Thanks again!
I believe I’ve seen that before. That’s tricky because I don’t recall where the issue was. I would try to delete the directory and re-clone. Double check the path in nginx config file. Worst case I would destroy the droplet and try it over. I’ve done that several times when I couldn’t retrace where I went wrong. My discord link is link now up to date also if you want to join there as well
@@samsHandle ah I see you just replied and found the issue. Ok great!
Sir
How do you setup pm2 configuration file in nextjs package.json?
nice one
Amazing tutorial!
Api routes, dynamic routes and server-sided features from nextjs will still work once I deploy it the way you showed in the video?
They should
@@thedigitalceo Awesome, great tutorial. Love that you also made a gist for this, thank you so much
how to update nextjs to existing
Hi! I have a question. I've been working with react and nextjs for the past year, and I wanted to start deploying some of my projects.
I do understand that when building the project you serve static files and that fetch functions are, out of the box, not available. Am I right?
Will this method of deploying fix that, and allow me to keep my useEffects and stuff that perfom api/fetch requests? Is this something like running "npm run dev" that lets me those requests?
Im a 100% noob at hosting and deploying.
Thanks
helpful, thank you
I like it. Thanks.
Exactly what i was looking for!! Thank you so much man
but one doubt
My next.js project contains some environment variables and i tried adding .env.local file and then rebuilding and restarting the nginx server but it isn't working can you please suggest me the solution
updated::
I did worked i just forget to restart the pm2
Yes exactly. In this tutorial pm2 is really the service that starts the node apps
I have a 502 Bad Gateway :(
why is the subdomain not secure
Hello
Thank you very much for this tutorial. Is it necessary to enable ssl to deploy nextjs? I have done all the steps but I have a 403 error when accessing the files in the _next/static path. Is there a way to fix this?
Yes you need to do the SSL step
thanks a million sr
what about git? is there any of your tutrial about it? so we can easily edit the codes from local pc, than we do pul on the server some kind like that.
I don’t have a tutorial on that. Perhaps I will do one in the future
you can use something called jenkins
You are rock! Thank's
Thanks a lot
why don't you tell us where we have to move the .next folder? Who tf creates a project on the production Server???
How can we backup & Restore Nextjs Website from Ubuntu Server?
What happened to your server. If you enabled backups on your digital ocean droplet. You can make a new droplet from one of the backups
U r a god
how to do it from existing open source repo's? Just git pull from the repo?
Same idea but instead of setting up a new next js app, git clone your app right in terminal in the same spot. But remember you need to grant the repo permissions so create an ssh key on the droplet and the add that public key to the deploy keys settings for the repo on github
@@thedigitalceo got it! Great video btw! I’m wondering if its also possible to create a github actions runner that rebuilds on pushes to main. Maybe a video idea for the future?
i am using cloudflare domain not working
Hey, this is amazing and thank you for posting this video.
Likewise, I would love to get little help from you, Everything was going well and I cloned my GitHub repo with a next js project into the var/www directory, installed npm and the project was online with pm2 as well. followed you thoroughly for every process and SSL was also active however, in the end, I get a 502 Bad Gateway Nginx/1.18.0 (Ubuntu) error. What might be missing?
Thank you. That’s hard to debug because the error is so generic but I believe it must be related somewhere in the nginx file. Somehow it’s not pointing to the right directory where the NextJS site lives on the site. Also make sure you removed the default nginx files. Also make sure you didn’t miss the step where I changed nginx code config to only use the sites-available folder and ignored sites-enabled
502 may also arise if your upstream server is not running. May be nginx was trying connect localhost:3000 but nothing was running there on port 3000
Hi Marcus, I am having this same issue with bad gateway 502, how did you solve it?
i got this same error because i forgot to install my next.js packages make sure to install npm packages then run ( npm i to install ) npm run build
if your're terminal get killed follow this setup and run again
1, sudo fallocate -l 1G /swapfile
2, sudo chmod 600 /swapfile
3, sudo mkswap /swapfile
4, sudo swapon /swapfile
5, sudo swapon --show
6, sudo cp /etc/fstab /etc/fstab.bak
7, echo '/swapfile none swap sw 0 0' | sudo tee -a /etc/fstab
8, sudo sysctl vm.swappiness=10
9, echo 'vm.swappiness=10' | sudo tee -a /etc/sysctl.conf
10, sudo sysctl vm.vfs_cache_pressure=50
11, echo 'vm.vfs_cache_pressure=50' | sudo tee -a /etc/sysctl.conf
then npm i and npm run build ( make sure crct path var/www/your domain or app folder name
Excellent tutorial! i just have one question. I have a headless woocommerce project in nextjs. the woo site is hosted in siteground but the front-end in vercel. Is it worth switching to digital ocean? I'm afraid of hidden costs using vercel. The site i have has over 20,000+ products and is quite big generally.
What plans and costs are you using on site ground and vercel?
@@thedigitalceo on siteground very expensive cloud hosting like $160/mo (200GB SSD, 11GB RAM, 5 core CPU)+ cloudflare plus $11.95 . that's because the site is like 60GB overall with db and traditional woocommerce. i'm doing it headless now (still in test mode) so im thinking what would be best. vercel has quite a lot of limitations in image optimizations etc. on vercel im still on free plan but im considering either to upgrade there or move to DO. what's best in your opinion?
@@alexkey9372 got you but what is your main concern right now in general. Is it cost? Is it scale? Etc. this way you’ll know which route to take
@@thedigitalceo both. already paying high fees for backend, so i wouldn't want to use very expensive platform for front-end and definitely scalability is a concern. The current traditional woo site is having 70-80k users daily on average. It will scale for sure because there's high traffic expectation. So i want to still use vercel goodies like image optimizations etc but not pay them $9 per 1000 images. the site has 20,000+products. I'm a little bit stuck tbh. initially i thought vercel would do it but i see there's a lot of hidden costs. and last concern, vercel does lots of things by default, hopefully DO won't be problematic
@@alexkey9372 but right now it’s already hosted on vercel hobby? And it’s not breaking? And when you say woo site you mean the backend API, the headless content? What language and database is the backend using. Is it using the headless Wordpress content you mean? (So it’s not directly accessible but just the json is) And that is $160 a month?
✅ Thank you!
Hi, can you share me the NGINX config file Gist for Reactjs application?
The config file and commands I used are in gists in the description
@@thedigitalceo yes it works with NextJs but with pure ReactJs getting bad gateway error
@@ginthozan ah that one I’m not sure because this tutorial is
definitely more Next related.
@@thedigitalceo OK thanks, I will try to find a solution
but how can we set environment variables ?
You would just create the file in the terminal after logging into the server with terminal bash commands. Cd into the route “nano .env.local” creates the file puts you in edit mode and then type out the variables and save the file with ctrl o.
i did , but it doesn't work , i don't know if it's about the .env this time , i think digitalocean doesn't support serverless functions such as getServerSideprops and getInitialprops ?
@@sahnounmohamed5871 it should support those. Test everything locally piece by piece to make sure you know where the real problem actually is. FYI you may need to restart pm2 or server if adding new environment variables
Very good tutorial
but is this secure ?
I'm so cheap I have to carry a can of 3 in one oil to keep my ass from squeaking when I walk. So how about showing us how to do this with a REAL server? Ubuntu on a server and my laptop.
Is Next is the only thing you know?
Coding videos on this channel are mostly about web development in react/nextjs/css and what I care about the most.
Sorry if you have gotten my comment multiple times. It keeps getting deleted for some reason. If you can see it on your end and post a response, greatly appreciate it
Hi I only see this comment above. What was the question
@@thedigitalceo Can you store a database on the server with this setup and still pay $7? Or is it an additional fee of $15 for storing your database with them?
@@sbdev5853 if you install the database on this same server it should all be one cost - the cost of the server only. I use MySQL which is open source. You can install MySQL on this Ubuntu server like any other database system and use that as the database for any backend service at no additional cost. But if you opt to using Digital Oceans separate “managed database” service and put the database over there and then pull from there that I believe is an additional $15 a month.
@@thedigitalceo That's where I was confused with the managed database service. I thought the only way to add a database with Digital Ocean is to use that service. This makes sense now. Please add a video with adding a MySQL database to this setup. Thanks for the clarification.
i got bad gateway 502 error because i forgot to install my next.js packages make sure to install npm packages then run ( npm i to install ) npm run build
if your're terminal get killed follow this setup and run again
1, sudo fallocate -l 1G /swapfile
2, sudo chmod 600 /swapfile
3, sudo mkswap /swapfile
4, sudo swapon /swapfile
5, sudo swapon --show
6, sudo cp /etc/fstab /etc/fstab.bak
7, echo '/swapfile none swap sw 0 0' | sudo tee -a /etc/fstab
8, sudo sysctl vm.swappiness=10
9, echo 'vm.swappiness=10' | sudo tee -a /etc/sysctl.conf
10, sudo sysctl vm.vfs_cache_pressure=50
11, echo 'vm.vfs_cache_pressure=50' | sudo tee -a /etc/sysctl.conf
then npm i and npm run build ( make sure crct path var/www/your domain or app folder name
im still getting a 502, i reran all the install commands, double checked everything, when I run pm2 start, my server hangs at 100% CPU usage. any ideas?