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@: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!

Feb 15, 2025 - 16:04

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@: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!