Deploying a Next.js Application with Dokku

Introduction

In this article, we will deploy a Next.js application using Dokku (https://dokku.com).

In a previous article, I explained how to deploy a Laravel application with Dokku, also presenting the basics of Dokku. If you are new to this tool, I recommend reading this article before continuing: Deploying a Laravel Application with Dokku, PostgreSQL and Redis.

Assuming you already have Dokku installed on your VPS, let's continue with the configurations.

1. What is Next.js

Next.js is a React framework for building modern web applications. It simplifies development by providing features like server-side rendering (SSR), static site generation (SSG), API routes, and automatic code splitting. It's widely used for building fast, SEO-friendly, and scalable applications.

The deployment process is rather simple.

2. Configuring the Next.js Application

A. Creating the Dokku Application

dokku apps:create myapp

B. Setting Environment Variables

Replace the values in the following command and execute it:

dokku config:set myapp \
    NEXT_PUBLIC_API_URL=myapi.com \
    NGINX_ROOT=.next

C. Assigning a Domain Name

dokku domains:add myapp myapp.com

3. Deployment Configuration

Based on your project structure, Dokku will recognize it as a Node.js application, use the appropriate buildpack, and execute your build script during the deployment phase.

A. Procfile

Create a Procfile to define the processes to be executed:

web: npm run prod

4. Configuring the Local Development Machine

A. Add Remote Repository

git remote add dokku dokku@<SERVER_IP>:myapp

B. Push the Application to Dokku

git push dokku main:main

5. Enabling SSL with Let’s Encrypt (optional)

Secure your application with a free SSL certificate

dokku letsencrypt:set myapp email you@example.com
dokku letsencrypt:enable myapp

Conclusion

With this guide, your Next.js application is successfully deployed using Dokku. Thank you for reading!