How to Deploy a Next.js App with Dokploy: A Step-by-Step Guide

Self-hosting your app on your own server can be a lot cheaper and a great alternative to Vercel, Heroku or Netlify. There are multiple self-hostable PaaS (Platform as a Service) solutions available, and a new one is gaining popularity: Dokploy. Dokploy provides a simple and intuitive interface to manage your projects, services, and deployments. If you like the UX/DX of Vercel, you will love Dokploy.

Deploying a Next.js application is a seamless process with Dokploy. Dokploy simplifies the deployment process by handling the build, infrastructure setup, and monitoring for you, so you can focus on developing your app. This guide will walk you through deploying your Next.js app on a VPS using Dokploy.

Prerequisites

Before we get started, ensure you have the following:

1. Next.js application ready to deploy. If you don't have one, you can create a new Next.js app by following the official Next.js documentation.
2. Git repository containing your Next.js application code. You can host your repository on GitHub or any other Git hosting service. For this guide, we'll use GitLab.
3. VPS (Virtual Private Server) or dedicated server with Ubuntu or Debian. For this guide, we'll use a VPS on DigitalOcean ($200 free credit here), but you can use any provider of your choice like OVHcloud, Hetzner, Vultr or Scaleway.

(Optional) Step 1: Create a Server

If you already have a server, you can skip this step.

Create a Droplet on DigitalOcean: Log in to your DigitalOcean account, and create a new droplet.

Select the Docker on Ubuntu image in the DigitalOcean marketplace. If your provider doesn't have a Docker image, choose Ubuntu or Debian as the operating system, Dokploy will automatically install Docker for you.

To ensure smooth performance, Dokploy documentation recommends at least 2 GB of RAM and 30 GB of storage for your server. We'll use the $12/month plan for this guide but you can choose the droplet size based on your requirements.

Don't forget to select or create an SSH key to securely access your droplet. For more detailed guidance about SSH Keys, see How to Add SSH Keys to Droplets.

Once you've configured your droplet, click on the "Create Droplet" button.

Step 2: Install Dokploy on Your Server

1. Access your Droplet: Once your droplet is created, access it via SSH.

   ssh root@your_droplet_ip

2. Install Dokploy: Run the following command to install Dokploy on your server. The script will automatically install Docker if you don't have it already.

   curl -sSL https://dokploy.com/install.sh | sh

Step 3: Setting Up Your Next.js Project

1. Create an Account: First, you need to create a Dokploy account. Visit your Dokploy dashboard at your-droplet-ip:3000. You'll be prompted to create an account.

2. Create a New Project: This project will contain your Next.js application and its associated settings. Click on the "Create Project" button and enter your project name in the dialog box, then click "Create".

Your new project will now appear in your dashboard.

3. Create a New Service: Navigate to your new project and click on the "Create Service" button. Select "Application" as the service type.

Enter your application name in the dialog box then click "Create". It is a good practice to create a separate app for each environment (production, staging, development). In this example, we will create the production app:

Your new app will now appear in your dashboard.

Step 3: Connecting Your Repository

1. Select your Provider: If your repository is hosted on GitHub, you'll need to configure Github in the Dokploy settings. For other providers like Gitlab, you can select "Git". For this guide, we'll use Gitlab.

2. Setup your Repository: Fill in your Repository URL and the Branch you want to deploy. In this guide, we created the production app, so we'll use the main branch.

3. Private Repository: If your repository is private, you'll need to add an SSH key to your Dokploy account, so Dokploy can access your repository. If you don't have an SSH key, you can generate a new one in your Dokploy settings, then add it to your Gitlab user settings.

🎉 You can now click on "Deploy" to deploy your Next.js app!

Step 4: Autodeploy

Dokploy can automatically deploy your app whenever you push changes to your repository. This feature is called Autodeploy and is enabled by default.

Navigate to the "Deployments" tab and copy the webhook URL. Add the webhook URL to your repository's webhook settings.

You can customize the webhook to only trigger on specific branch, in this example we use main, as we are deploying the production app.

Step 5: Add a Domain

To access your Next.js app, you'll need to add a domain to your Dokploy project. You have two options: you can either use a generated domain provided by Dokploy or add your own domain.

Navigate to the "Domains" section in your application settings and click on the "Add Domain" button to add your custom domain, or click on the "Generate Domain" button to use a generated domain.

If you choose to add your own domain, you'll need to update your DNS settings to point to the Dokploy server IP address. This typically involves adding an A record with your domain registrar.

Don't forget to add an SSL certificate to secure your website, Dokploy automatically provisions free SSL certificates via Let's Encrypt.

Conclusion

Deploying a Next.js application with Dokploy on your own server is straightforward and efficient. With its comprehensive set of tools and features, you can manage your projects with ease, ensuring robust performance and security. Now that your Next.js app is live, you can focus on what matters most – building great features and delivering value to your users.

Happy deploying! 🚀