[Step by Step] Deploy NextJS on Ubuntu Digital Ocean (2 NextJS Apps on one server)

In this video you'll learn how to host a NextJS app on an Ubuntu server from scratch. We'll use Digital Ocean, not the digital ocean apps platform. You don't only have to host NextJS on Vercel or Netlify! This is a wonderful option because with your own server you can host multiple NextJS apps on the same server. You can even host a MySQL database and even another backend service on the same server. While Vercel is a great option for NextJS because they created it, keep in mind Vercel is a hosting company where you can host not only NextJS but many other technologies. NextJS itself is open source and only needs a server running Node JS. You can copy the full syntax from the video from the Gists below:
CONNECT ON MY DISCORD:
/ discord
NGINX config file Gist: gist.github.com/oelbaga/50196...
Terminal Commands: (I also placed all the terminal commands I ran in a Gist as well)
gist.github.com/oelbaga/50196...
Here is a rundown of all the steps:
Step 1: Setup and Install packages on server: NGINX, NPM, NodeJS, PM2
Step 2: Setup NextJS boiler plate
Step 3: Create NGINX Config file.
Step 4: Launch app on server
0:00 Intro
1:05 Demo: 2 NextJs apps running on Ubuntu
1:40 Create Ubuntu Droplet
2:30 Point domain names to Server
3:10 Connect to Server
3:48 Update Server with latest Packages
4:00 Check A record propagation
4:30 Install Nginx & Certbot
4:50 Allow Firewall
5:30 Install NPM
5:45 Install PM2
6:30 Install NVM & NodeJS
7:10 Make NextJS Boiler Plate App on Server
8:20 Make NGINX config file
11:34 Launch Site with PM2
12:00 Add SSL to domain name
12:30 Done: Final Next JS App working
13:15 ---- Second NextJS app ----
14:30 Make second NGINX config file with new ports
15:45 Update Next JS port on second site.
17:00 Two NextJS apps demo
#nextjs #ubuntu #digitalocean #vercel #react

[@ThysRoes]

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!

[@alvinolavarrieta]

This has to be the best straightforward guide I have ever seen! Thanks.

[@Cainitech]

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

[@olegvegan]

What a clean guide. Thank you, dude

[@toshitsingh7270]

Exactly what I was looking for!! Appreciate the hard work

[@henokurufa6171]

No words to how much I am grateful for your video. keep up the great work

[@kwadoskii]

Just stumbled upon your channel and I am loving it. Great contents

[@sentinel_bear]

Perfect course. You helped me so much, thank you.

[@NasorullahKhan-lx2eo]

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.

[@coininstant6908]

Best NGINX NEXTJS HTTPS video ever, exctly as advertised, everything you need, works like a charm indeed! Thanks for taking the time to share.

[@matthewbell5282]

Really awesome tutorial. Concise and to the point! Thank you - I’ll be using digital ocean to do this!

[@abdu1wahid105]

I just did! Great stuff Omar, I'm loving ubuntu now, thankyou!

[@JonBrookes]

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

[@rizwanssyed]

Thanks for this awesome video showing the simple process to start. You earned a subscriber here. 👍

[@Dysfunctional704]

Thanks, you've helped me a lot with my internship! Very useful since most KZbinrs would just opt for Vercel or Netlify when deploying.

[@abdullahilgaz]

Great course! Thank you for your help. Also thank you for your fun :)

[@cempakajanuari5983]

Wow... this is what I am looking for. You are great my bro... thanks and thanks a lot.

[@DonchenkoNadia]

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 :)

[@manno9149]

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!

[@nicolas_vl]

This is GOLD! Thanks man!

[@icyrealm7]

Amazing tutorial!

[@sandeshjadhav2188]

This is really awesome tutorial, thank you so much sir for this tutorial.

[@okerik8099]

Thank you Omar, it works!

[@FarhanAhmed1360]

Great Tutorial man. Gold Bless you

[@brightglitch958]

Excelent tutorial! Thank you

[@user-es2on6th2g]

You helped me so much! Very grateful

[@JacobPrice-uj9si]

Great video! Thank you very much for the help.

[@stevemitto9942]

Awesome content... Right to the point

[@noeliaferrer72]

Thanks so much for this video, I really enjoy it and help me a lot!!

[@user-yu5ev9gm3f]

Well explained! exactly wha I need.

[@razorjhon2622]

Best video made for nextjs , if i can like this video thousands of time i will

[@doepaflex]

That is exactly what I was looking for! Thank you so much ... Appreciate it! Keep up the good work!

[@thedigitalceo]

Took me a while to get the perfect steps down. Enjoy!

[@doepaflex]

@@thedigitalceo Can you maybe show how to to the same with differnet urls - and not subdomains :) That would be awesome

[@doepaflex]

sry mb ... i just figured it out :D Its the same process ... thx a lot :)

[@thedigitalceo]

@@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. 😊

[@gustavonardino4919]

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 🥰🙏

[@abduljavad788]

This video is the only thing we need to deploy something something on vps 🔥

[@free_audiobooks]

I subscribed because of your next js deploy video . please upload more , some of us really struggles to deploy

[@thedigitalceo]

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.

[@free_audiobooks]

@@thedigitalceo Great part is that you simplified it for upcoming developers

[@umarchy]

Excellent video

[@tim.bogdanov]

helpful, thank you

[@kokleekio7124]

Amazing video!

[@saziknows3614]

Quality content at its finest

[@thedigitalceo]

Wow. Thank you.

[@mohdsajidshaikh4291]

Thanks a lot

[@AndrewSWE]

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

[@user-dp6di4kd4k]

You are rock! Thank's

[@evaltools]

I like it. Thanks.

[@jefrycayo4582]

thanks a million sr

[@3IMAD69]

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 ?

[@rhmtin]

This is what I'm looking for! btw, could you please continue this tutorial by auto deploying GitHub?

[@narek1771]

thank you bro

[@miteshkalal4396]

nice one

[@anowarulhassan5117]

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?

[@ThysRoes]

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.

[@mohdsajidshaikh4291]

Did it restart nextjs after system restart. Also api routes also working 😊

[@clipartinc]

✅ Thank you!

[@kubilaybzk]

Could you please continue this tutorial by auto deploying GitHub with docker?

[@maxjustmax521]

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

[@boi46]

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.

[@user-yd8hq6bw8d]

U r a god

[@AmitErandole]

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 👍

[@thedigitalceo]

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.

[@clipartinc]

@@thedigitalceo Yes, please do some connecting to mySQL databases! Everyone has forgotten about mySQL, but it's so powerful and free!

[@salmaindrianputri164]

WordPress as headless cms plus next js in one vps. Is it possible. Please make video about this. I love youuuu

[@gabrielmoraes4516]

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.

[@thedigitalceo]

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.

[@gabrielmoraes4516]

@@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.

[@leoemrys5751]

Sir How do you setup pm2 configuration file in nextjs package.json?

[@fedeabj]

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

[@Moanv]

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.

[@cardinaldreampark7341]

Please which hosting server supports both next js and Django together because my website comprises of both

[@adnanaslam9604]

how to setup all these in current project directory without creating new project?

[@samsHandle]

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?

[@samsHandle]

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!

[@thedigitalceo]

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

[@thedigitalceo]

@@samsHandle ah I see you just replied and found the issue. Ok great!

[@RohanGupta-tc5uz]

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

[@sannjayy]

You need to run - npm run build / on your project directory.

[@JCCreatorStudio]

after first time deployment, and i have updated the application, how to deploy the update?

[@amansagar4948]

I’m confused. Can we do all this stuff with docker as well? If yes then why this all needed ?

[@numananees4464]

If anyone facing issue of .includes undefined try running npm start -p 3000

[@striderhere]

If I already have cyberpanel installed on my VPS, is it possible to host a nextjs website on the same Ubuntu?

[@Its-InderjeetSinghGill]

I have an old computer can we do the same there? I installed ubuntu server and i need some help with it.

[@ilirbajrami2902]

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?

[@Grolliiitjk]

how get that terminal to write everything? can you show us?

[@tim.bogdanov]

my CPU usages jumps to 100% when I run pm2, and get a 502 gateway, any ideas why?

[@palle1765]

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?

[@thedigitalceo]

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

[@excalibur2417]

Api routes, dynamic routes and server-sided features from nextjs will still work once I deploy it the way you showed in the video?

[@thedigitalceo]

They should

[@excalibur2417]

@@thedigitalceo Awesome, great tutorial. Love that you also made a gist for this, thank you so much

[@landotamayo3149]

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...

[@borntodestroy6892]

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?

[@thedigitalceo]

Yes you need to do the SSL step

[@vidhanshuborade5977]

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

[@thedigitalceo]

Yes exactly. In this tutorial pm2 is really the service that starts the node apps

[@MrAlao675]

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.

[@MrAlao675]

I terminated the AWS instance and launched a new one. Everything seems fine now. Thank you.

[@marcusshane6880]

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?

[@thedigitalceo]

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

[@ranuvijay1]

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

[@techspace_solutions]

Hi Marcus, I am having this same issue with bad gateway 502, how did you solve it?

[@rekhilaliaspaulose9171]

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

[@minheinhtet9800]

how to update nextjs to existing

[@beterworld]

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.

[@thedigitalceo]

I don’t have a tutorial on that. Perhaps I will do one in the future

[@sergsergesrgergseg]

you can use something called jenkins

[@gulabpatel7477]

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?

[@thedigitalceo]

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

[@alsherifkhalaf7385]

Very good tutorial but is this secure ?

[@alexkey9372]

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]

What plans and costs are you using on site ground and vercel?

[@alexkey9372]

​@@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]

@@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

[@alexkey9372]

@@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

[@thedigitalceo]

@@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?

[@baruchmanigrasso5493]

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!

[@thedigitalceo]

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

[@baruchmanigrasso5493]

@@thedigitalceo Oh, Thank you so much for this clarification, now the concept is clearer! 🙂 You got a new subscriber! Have a good day!

[@qckq]

i am using cloudflare domain not working

[@remapple5368]

why is the subdomain not secure

[@greenpvpservers4847]

I have a 502 Bad Gateway :(

[@StringSwoosh]

how to do it from existing open source repo's? Just git pull from the repo?

[@thedigitalceo]

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

[@StringSwoosh]

@@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?

[@m.hammadhassan]

How can we backup & Restore Nextjs Website from Ubuntu Server?

[@thedigitalceo]

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

[@ginthozan]

Hi, can you share me the NGINX config file Gist for Reactjs application?

[@thedigitalceo]

The config file and commands I used are in gists in the description

[@ginthozan]

@@thedigitalceo yes it works with NextJs but with pure ReactJs getting bad gateway error

[@thedigitalceo]

@@ginthozan ah that one I’m not sure because this tutorial is definitely more Next related.

[@ginthozan]

@@thedigitalceo OK thanks, I will try to find a solution

[@sahnounmohamed5871]

but how can we set environment variables ?

[@thedigitalceo]

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.

[@sahnounmohamed5871]

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 ?

[@thedigitalceo]

@@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

[@LarsRyeJeppesen]

Is Next is the only thing you know?

[@thedigitalceo]

Coding videos on this channel are mostly about web development in react/nextjs/css and what I care about the most.

[@vernevens1598]

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.

[@sbdev5853]

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]

Hi I only see this comment above. What was the question

[@sbdev5853]

@@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?

[@thedigitalceo]

@@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.

[@sbdev5853]

@@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.

[@rekhilaliaspaulose9171]

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

[@tim.bogdanov]

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?