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

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 open-source PaaS (Platform as a Service) solutions available, with some of the best being Coolify or Dokku. However, there's a new open-source PaaS that 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, GitLab, or any other Git hosting service.
  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 Scaleway, Hetzner, Vultr, or OVHCloud.

(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.

Droplet Image

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.

Droplet Size

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".

Dokploy Add Project

Your new project will now appear in your dashboard.

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

Enter your application name in the dialog box then click "Create".

Dokploy Create Application

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.

Dokploy Git Provider
  1. Private Repository: If your repository is private, you'll need to add an SSH key to your Gitlab account, so Dokploy can access your repository. You can do this by clicking on the padlock icon to generate an SSH key, 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.

  1. Enable Autodeploy: In your app dashboard, click on the "Autodeploy" button in the Deploy Settings section to enable this feature.
  2. Add Webhook: Navigate to the "Deployments" tab and copy the webhook URL. Add the webhook URL to your repository's webhook settings.
Gitlab Webhook

You can customize the webhook to only trigger on specific branch like main.

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.

Dokploy Add Domain

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! 🚀