Disclaimer: All content on this website is derived directly from my own expertise and experiences. No AI-generated text or automated content creation tools are used.
Hi guys 👋, I'm a developer specializing in Elastic Stack and Next.js. My blog shares practical tutorials and insights based on 3+ years of hands-on experience. Open to freelance opportunities — let's get in touch!
Comments
harley w.
Feb 29, 2024
this guide is so underrated, Google should rank it higher
btw can you add the remaining part to setup a domain, thanks
Leave a Comment
Success!
Receive Latest Updates 📬
Get every new post, special offers, and more via email. No fee required.
You are looking for a way to deploy your Next.js application on a DigitalOcean Droplet in 2024, but you don't know where to start. This guide is for you.
In this step-by-step guide, I will show you how to deploy a Next.js application on a DigitalOcean Droplet. The steps are put in order in the Table of Contents below so that you can keep track of your progress.
By the end of this guide, you will have a production-ready and publicly accessible Next.js application running on a DigitalOcean Droplet.
The very first step is to create a DigitalOcean Droplet. A Droplet is simply a virtual private server (VPS) that you can use to host your application.
If you don't have a DigitalOcean account yet, you can sign up for one using my DigitalOcean referral link to get a free $200 credit for 60 days. A credit card is required for verification, but you won't be charged anything now.
Once you created your account, you can go to the Droplet section on the left sidebar and click on the "Create Droplet" button.
Now, you will have to pick some configuration for your Droplet:
Choose Region: Select the region that is closest to the audience who visit your site. I will choose "New York" and the "NYC3" data center for this guide.
Figure: DigitalOcean Droplet: Choose Region
Choose an image: We will be using "Ubuntu" with version "22.04 (LTS) x64" in this guide.
Figure: DigitalOcean Droplet: Choose Image
Choose Size: A Regular CPU of $6/month is enough for our example. You can always upgrade later if your app needs scaling.
Figure: DigitalOcean Droplet: Choose Size
Choose Authentication Method: We will use a password first, then we will set up SSH keys later.
Figure: DigitalOcean Droplet: Choose Authentication Method
Hostname: Enter a name for your Droplet that you can remember. I will use nextjs for example.
Figure: DigitalOcean Droplet: Change Hostname
After you have selected all the options, click on the "Create Droplet" button at the bottom of the page and wait for the Droplet to be created.
When the Droplet is created, you will see a dashboard with the IP address of your Droplet like this:
Figure: DigitalOcean Droplet Dashboard with Droplet IP Address
Let's configure your new Droplet in the next section.
In this section, we will configure the Droplet by adding SSH keys and setting up the firewall.
First of all, you will need to access the Droplet using SSH with the root login. Follow the instructions below to do so:
Open a Terminal on your local machine and use the following command to SSH in as the root user (insert your Droplet's IP address in place of droplet_ip_address):
terminal
ssh root@droplet_ip_address
You will be asked to confirm the connection by typing "yes" and then providing the root password you created when you created the Droplet.
Figure: Accessing DigitalOcean Droplet with SSH
If a screen like this appears, you have successfully logged in to your Droplet:
The apt-get command will install Nginx along with any other required dependencies.
When the installation is complete, you can check the status of Nginx by typing:
terminal
sudo systemctl status nginx
You should see a message like this:
output
● nginx.service - A high performance web server and a reverse proxy server Loaded: loaded (/lib/systemd/system/nginx.service; enabled; vendor preset: enabled) Active: active (running) since Sun 2024-02-11 17:31:34 UTC; 1min 19s ago
This means that Nginx is running and ready to use.
Now, you can access your Droplet IP address in the browser and see the default Nginx landing page. Remember to use the http:// prefix before the IP address as we only allow HTTP traffic for now.
You will need Node.js and npm to run your Next.js application on the server. Please note that for Next.js 14, you will need Node.js version 18.17 or higher.
I can feel your excitement when reading this section. Your Next.js application will be accessible on the Internet in a short moment. Let's get started!
Add push all the files to the repository by typing:
terminal
git add .git commit -m "init"git push --set-upstream origin main
If you created the Next.js app by using the npx create-next-app@latest command, you can ignore the git add . and git commit -m "init" commands as the create-next-app command has already done that for you.
If you are asked to log in to your GitHub account, do so and then try the git push command again.
After the push is successful, you can go to your GitHub repository and see the source code there.
Figure: GitHub Repository with Pushed Code
Now that your Next.js application is on GitHub, we will move to the next step, which is to pull the code into the Droplet.
PM2 is a process manager for Node.js applications. It allows you to keep your application running forever, restart it if it crashes, and manage multiple applications at the same time.
In this section, we will install PM2 and run your Next.js application with it.
Follow the steps below to install and run your Next.js application with PM2:
Change the directory to your Next.js application folder and install the dependencies by typing the following command:
terminal
cd digitalocean-nextjsnpm installnpm run build
Install the PM2 package globally by using the following command:
terminal
npm install pm2 -g
Start your Next.js application with PM2 by typing the following command:
terminal
pm2 start npm --name "nextjs-app" -- start
The --name option is used to give a name to your application. You can replace nextjs-app with any name you want.
You can verify if your application is running by typing:
terminal
pm2 status
You should see a message like this:
output
┌────┬────────────────────┬──────────┬──────┬───────────┬──────────┬──────────┐│ id │ name │ mode │ ↺ │ status │ cpu │ memory │├────┼────────────────────┼──────────┼──────┼───────────┼──────────┼──────────┤│ 1 │ nextjs-app │ fork │ 259 │ online │ 100% │ 68.7mb │└────┴────────────────────┴──────────┴──────┴───────────┴──────────┴──────────┘
Keep PM2 running at startup when the server is rebooted using the following command:
terminal
pm2 startup systemd
Now, your Next.js application is running on the server, but it is not accessible from the Internet yet.
We will configure the Nginx server to serve your Next.js application in the next section.
In this section, we will configure Nginx to serve your Next.js application. We will set up a reverse proxy to forward the HTTP requests to your Next.js application.
Follow the steps below to configure Nginx:
Create a new Nginx configuration file for your Next.js application by typing the following command:
Again, remember to replace 167.99.48.57 with your Droplet IP address.
We can test the Nginx configuration by using the following command:
terminal
sudo nginx -t
If everything works, you will see a message like this:
output
nginx: the configuration file /etc/nginx/nginx.conf syntax is oknginx: configuration file /etc/nginx/nginx.conf test is successful
Now we can restart Nginx to make it read our new configuration, to do so, use the following command:
terminal
sudo systemctl restart nginx
Yay, you have made good progress. Your Next.js application is served at http://droplet_ip_address right now.
Accessing the URL via the browser, you will see the home page of your Next.js app like below.
Figure: Next.js Landing Page on Droplet IP Adress
As of now, we have made our Next.js app publicly available. To secure your site, we will need SSL/TLS encryption so that it will become https instead of http. I will keep updating this tutorial soon.
Comments
harley w.
Feb 29, 2024
this guide is so underrated, Google should rank it higher btw can you add the remaining part to setup a domain, thanks