Deploying a Next.js App on DigitalOcean: A Beginner's Guide

Hello again, and welcome back! After setting up this website locally, I wanted to improve my deployment workflows. One of the first challenges I faced was deploying a Next.js app on DigitalOcean. It's a straightforward process, but it can be intimidating if you're new to server management. Or you might feel overwhelmed the first time doing it.

When I first considered deploying my Next.js app, I was both excited and a bit nervous. DigitalOcean sounded like a great choice, but the process felt daunting at first. However, I quickly realized that breaking it down into manageable steps made the entire experience both rewarding and educational.

In this post, I'll walk you through the basics: creating and configuring a droplet, setting up your project and a few tips for securing your deployment once it's live. Let's dive in!

Step 1: Creating and Configuring the Droplet

The very first step is setting up a droplet (DigitalOcean's term for a virtual private server).

DigitalOcean provides developers with a simple yet powerful platform to deploy apps without getting overwhelmed by overly complex cloud solutions. It's affordable, developer-friendly, and a great place to start hosting small projects.

A droplet is essentially a virtual machine running on the cloud. Think of it as your personal server that you can configure and use to host your apps, just like a physical computer but entirely online.

Here's how you can do it:

1. Create a Droplet:

• Log in to your DigitalOcean account.

• Click on your project and then Create Droplet.

• Choose a droplet image. I recommend starting with Ubuntu (20.04 or 22.04 LTS)

• Select a plan based on your needs (the basic $5/month plan works well for small apps).

  For instance, the $5/month plan works great for personal projects or smaller-scale apps with moderate traffic. However, if you expect heavy traffic or need additional resources, you can always scale up as your app grows.

• Add your SSH key for secure access.

2. Basic configuration:

• Once your droplet is live, SSH into it using the command:

1ssh root@<YOUR_DROPLET_IP>

• Update the system:

1sudo apt update && sudo apt upgrade -y

• Install essential tools like git and curl:

1sudo apt install git curl

3. Install Node.js with nvm:

   We will be using nvm to manage Node.js versions easily.

   Using nvm not only simplifies managing Node.js versions but also ensures compatibility between your development and production environments. It's a tool I've come to rely on for keeping things consistent and avoiding version-related headaches.

• Install nvm:

  At this point, I wanted to ensure my droplet had the same Node.js version I used during development. This prevents version mismatches and unexpected issues when running the app in production.

1curl -o- https://raw.githubusercontent.com/nvm-sh/nvm/v0.40.1/install.sh | bash
2
3source ~/.bashrc

• Install Node.js (replace 22 with the version you need):

1nvm install 22
2nvm use 22

• Verify node and npm installation:

1node -v # v22.x.x
2npm -v # 10.x.x

Step 2: Creating SSH Keys for GitHub

Next, you'll need to create an SSH keypair to clone your project securely. This allows github to verify your identity without needing to enter your credentials every time.

SSH keys are a secure and convenient way to authenticate your server with GitHub. They eliminate the need to repeatedly enter your username and password, streamlining the deployment process while keeping your credentials safe.

1. Generate the SSH key:

• Run the following command:

1ssh-keygen -t ed25519 -C "your_email@example.com"

2. Add the Key to GitHub:

• Copy the public key to your clipboard:

1cat ~/.ssh/id_ed25519.pub

• Go to your GitHub repository settings, then Deploy keys, and add the new key.

  If you don't intend to make changes directly from the droplet, (which is a good practice) you leave the write access unchecked.

1. Test the Connection:

• Verify that your droplet can connect to GitHub:

1ssh -T git@github.com
2
3# Hi <YOUR_GITHUB_USERNAME>/<YOUR_GITHUB_REPOSITORY>! You've successfully authenticated, but GitHub does not provide shell access.

Step 3: Cloning the Project and Installing Dependencies

Now that your droplet is configured and connected to GitHub, it's time to deploy your project. This involves cloning the repository, installing the necessary dependencies, and finally, running the app. Here's how I approached it:

1. Clone the repository:

• Navigate to a directory on your droplet where you'd like to store your project.
• Clone the repository using SSH.

1git clone git@github.com:<YOUR_USERNAME>/<YOUR_PROJECT>.git

2. Install Dependencies:

1cd <YOUR_PROJECT>
2npm install

3. Start the App:

1npm run build
2npm start

Congratulations! You've successfully deployed your Next.js app on DigitalOcean. But there's more you can (and should) do to secure your deployment.

What's Next?

Deploying your app is just the beginning. Maintaining a live application requires regular updates, monitoring, and continuous improvements. Whether it's automating deployments with GitHub Actions or implementing robust security measures, these next steps are crucial for keeping your app reliable and safe for your users.

In the upcoming posts, I'll guide you through these essential practices, sharing lessons I've learned from working on production environments. Stay tuned for actionable tips and real-world examples that will make your deployments smoother and your app more secure.

Serving Your App with Nginx

To serve your app to the world, you'll need a web server like Nginx. We'll cover setting up Nginx, configuring a reverse proxy and serving your Next.js app in an upcoming post.

Keeping Your Project Updated

Regular updates aren't just about adding new features—they're also critical for patching vulnerabilities and improving performance. Using GitHub Actions can automate these updates, ensuring your app stays secure and efficient with minimal manual effort.

Managing deployments involves more than just the initial setup. Regular updates are crucial to ensure security and stability. In future posts, we'll explore GitHub Actions to automate updates and deployments.

Revisiting Security

Once your app is live, monitoring logs and securing your droplet becomes a priority. We'll cover fail2ban, firewalls, nginx access logs and other security measures in upcoming posts.

Final Thoughts

This deployment journey has taught me more than just the technical steps—it's about problem-solving, learning from challenges, and constantly seeking better ways to improve workflows. Each step is an opportunity to grow, and I hope this guide inspires you to take on similar challenges with confidence.

Deploying a Next.js app on DigitalOcean is an exciting milestone for any developer. It's a hands-on process that teaches you how to manage servers, deploy code and optimize for production environments.

Remember, every step is an opportunity to learn—wether it's configuring a droplet, troubleshooting dependencies or refining your deployment process. Keep exploring, and you'll soon master the art of deploying web applications.

Thank you for joining me on this technical adventure! If this guide helped you or sparked questions, let me know in any of my socials. I'm excited to hear about your tech journey and help (or learn) along the way.

Stay tuned for the upcoming posts, where we'll dive deeper into automating updates with GitHub Actions and securing your droplet. Until then, happy coding!

Remember that you can find me as J1Loop on github. Or you can contact me on LinkedIn.