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

35,472
2
Published 2022-07-03
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.gg/5zsdrxH8m8

NGINX config file Gist: gist.github.com/oelbaga/5019647715e68815c602ff05cf…

Terminal Commands: (I also placed all the terminal commands I ran in a Gist as well)
gist.github.com/oelbaga/5019647715e68815c602ff05cf…

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

All Comments (21)
  • @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!
  • 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
  • Really awesome tutorial. Concise and to the point! Thank you - I’ll be using digital ocean to do this!
  • @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.
  • 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.
  • @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
  • @kwadoskii
    Just stumbled upon your channel and I am loving it. Great contents
  • No words to how much I am grateful for your video. keep up the great work
  • @Dysfunctional704
    Thanks, you've helped me a lot with my internship! Very useful since most Youtubers would just opt for Vercel or Netlify when deploying.
  • 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 :)
  • @abdullahilgaz
    Great course! Thank you for your help. Also thank you for your fun :)
  • @doepaflex
    That is exactly what I was looking for! Thank you so much ... Appreciate it! Keep up the good work!
  • @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!
  • @rizwanssyed
    Thanks for this awesome video showing the simple process to start. You earned a subscriber here. 👍
  • 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 🥰🙏
  • Wow... this is what I am looking for. You are great my bro... thanks and thanks a lot.