How To Deploy Next JS App to DigitalOcean

How To Deploy Next JS App to DigitalOcean

In this guide, we'll walk through every step of deploying a Next.js app to DigitalOcean, including setup, configuration, and optimization for production. Whether you're deploying through a Droplet, App Platform, or Docker container, this tutorial will help you deploy confidently.

Deploying a Next.js application to production is a key step in bringing your project to life. While developing locally is essential for testing and iteration, deployment ensures that real users can access and interact with your app online. Among the many hosting providers available, DigitalOcean is a developer-favorite for its performance, cost-efficiency, and simplicity. It provides flexible cloud infrastructure for deploying web applications with full control.

Why Choose DigitalOcean for Next.js Deployment?

DigitalOcean is a reliable and developer-friendly platform that provides cloud-based virtual servers (Droplets) and managed services. When deploying a Next.js app, you get:

• Affordable pricing with predictable billing.
• Complete control over your server environment.
• High performance with SSD-based storage and global data centers.
• Scalability for growing projects.
• One-click applications for Node.js, Docker, and Nginx setup.

Whether you are running a small website or a production-scale SaaS application, DigitalOcean can handle both easily.

Prerequisites

Before we begin, make sure you have the following ready:

• A Next.js application (built locally and tested)
• A DigitalOcean account
• Basic understanding of Node.js and Linux commands
• A GitHub repository (optional but recommended)
• Domain name (optional for custom URLs)

If you don't already have a Next.js app, you can create one with:

npx create-next-app my-next-app
cd my-next-app
npm run dev

Once it's working locally, you're ready to deploy!

Option 1: Deploying Next.js on DigitalOcean App Platform

DigitalOcean App Platform is the simplest way to deploy modern web apps. It automatically handles the setup, scaling, HTTPS certificates, and CI/CD.

Step 1: Push Your Code to GitHub

Push your Next.js project to a Git repository, such as GitHub, GitLab, or Bitbucket.

Step 2: Create a New App on DigitalOcean

1. Log in to DigitalOcean.
2. Go to the App Platform section.
3. Click Create App.
4. Connect your GitHub account and select your repository.
5. Choose the main branch (e.g., main or master).

Step 3: Configure Build and Run Commands

When prompted, configure the following settings:

• Environment: Node.js
• Build Command: npm install && npm run build
• Run Command: npm start
• Output Directory: .next

App Platform automatically detects your Next.js configuration, installs dependencies, and sets up your environment.

Step 4: Add Environment Variables

If your app relies on APIs or secret keys, you'll need to add environment variables under App Settings → Environment Variables.

For example:

NEXT_PUBLIC_API_URL=https://api.yourapp.com
NODE_ENV=production

Step 5: Deploy the App

Click Deploy App, and DigitalOcean will automatically build and deploy your app. Once complete, you'll receive a live production URL like:

https://yourapp.digitaloceanspaces.app

You can later map this to your custom domain.

Step 6: Set Up Custom Domain (Optional)

If you own a domain, go to your domain registrar (like Namecheap or GoDaddy) and create a CNAME record pointing to your DigitalOcean app URL. DigitalOcean automatically provisions an SSL certificate for HTTPS.

Benefits of App Platform

• Zero server configuration
• Automatic scaling and HTTPS
• Built-in CI/CD
• Low maintenance

If you prefer a managed experience, App Platform is the best choice.

Option 2: Deploying Next.js to DigitalOcean Droplet

For developers who prefer more control, Droplets offer a virtual private server (VPS) where you can deploy your app manually.

Step 1: Create a Droplet

1. Log in to your DigitalOcean account.
2. Go to Droplets → Create Droplet.
3. Choose Ubuntu 22.04 as your OS image.
4. Select your plan (the $6/month Basic plan works well for most apps).
5. Add your SSH key or create a password.
6. Click Create Droplet.

You'll receive an IP address for your new server.

Step 2: Connect to Your Droplet

Use SSH to connect from your terminal:

ssh root@your_droplet_ip

Step 3: Install Node.js and npm

Install Node.js (LTS version recommended):

curl -fsSL https://deb.nodesource.com/setup_18.x | sudo -E bash -
sudo apt-get install -y nodejs

Verify installation:

node -v
npm -v

Step 4: Clone Your Next.js App

Clone your GitHub repository into the Droplet:

git clone https://github.com/yourusername/your-repo.git
cd your-repo

Step 5: Install Dependencies and Build

Install your app's dependencies and build the production bundle:

npm install
npm run build

Step 6: Start the App

You can start the app manually with:

npm start

However, to keep your app running even after you close your SSH session, install PM2, a process manager for Node.js:

sudo npm install -g pm2
pm2 start npm --name "nextjs-app" -- start
pm2 startup
pm2 save

PM2 will ensure your app automatically restarts if the server reboots.

Step 7: Configure Nginx as a Reverse Proxy

To make your app accessible via a domain and serve traffic over port 80/443, install and configure Nginx.

Install Nginx:

sudo apt install nginx -y

Open the configuration file:

sudo nano /etc/nginx/sites-available/nextjs

Add the following configuration (replace placeholders):

server {
    listen 80;
    server_name yourdomain.com www.yourdomain.com;

    location / {
        proxy_pass http://localhost:3000;
        proxy_http_version 1.1;
        proxy_set_header Upgrade $http_upgrade;
        proxy_set_header Connection 'upgrade';
        proxy_set_header Host $host;
        proxy_cache_bypass $http_upgrade;
    }
}

Enable configuration and restart Nginx:

sudo ln -s /etc/nginx/sites-available/nextjs /etc/nginx/sites-enabled/
sudo systemctl restart nginx

Now your app should be accessible at your domain.

Step 8: Secure Your Site with SSL (HTTPS)

Install Certbot to enable HTTPS:

sudo apt install certbot python3-certbot-nginx -y
sudo certbot --nginx -d yourdomain.com -d www.yourdomain.com

Certbot will automatically configure SSL for your site.

Step 9: Automate Deployment (Optional)

If you want to automate deployments, consider using GitHub Actions or DigitalOcean Deploy Hooks to trigger builds whenever new code is pushed to your main branch.

Option 3: Deploying with Docker on DigitalOcean

If you prefer containerized environments, you can deploy your Next.js app using Docker.

Step 1: Create a Dockerfile

In your Next.js project root, create a file named Dockerfile:

FROM node:18-alpine
WORKDIR /app
COPY package*.json ./
RUN npm install
COPY . .
RUN npm run build
EXPOSE 3000
CMD ["npm", "start"]

Step 2: Build and Run the Docker Image Locally

docker build -t nextjs-app .
docker run -p 3000:3000 nextjs-app

Step 3: Deploy Docker Image to DigitalOcean

You can either:

• Push your Docker image to Docker Hub and use it in a DigitalOcean Droplet, or
• Use DigitalOcean App Platform with a Dockerfile-based deployment.

App Platform automatically detects Docker configurations and deploys them without manual setup.

Best Practices for Next.js Deployment

1. Use Environment Variables -- Never hardcode API keys; use .env files or App Platform variables.
2. Enable Caching and Compression -- Use Nginx or CDN for static assets.
3. Set NODE_ENV=production -- Ensures optimal performance.
4. Monitor Performance -- Use services like Datadog, Sentry, or New Relic.
5. Automate Backups and Scaling -- For Droplets, set up snapshots and load balancers.

Troubleshooting Common Issues

1. App Not Starting

Check logs using:

pm2 logs

Ensure ports 80 and 443 are open.

2. Build Errors

Ensure all dependencies are correctly installed and the correct Node.js version is used.

3. Domain Not Working

Recheck your DNS A or CNAME records and Nginx configuration.

Conclusion

Deploying a Next.js app to DigitalOcean gives you flexibility, control, and scalability---whether you choose the App Platform for managed hosting or Droplets for full control. By following the steps in this guide, you can confidently launch your app and maintain it efficiently.

If you're looking for professional help to build, deploy, or scale your web applications, consider hiring AAMAX --- a full-service digital marketing company offering MERN Stack Development, Web Development, Digital Marketing, and SEO Services. Their expert developers can help you design and deploy world-class applications that perform at scale.

With the right setup and ongoing optimization, your Next.js app on DigitalOcean can deliver fast, secure, and reliable experiences for users worldwide.