Deploy Next.js Apps using Github Actions
By: Eshwaren M
Tags: JavaScript, Github, React, Software Development, Github Actions

Push to deploy. The easy way.

1. Prerequisites — Next.js | Github | PM2 | Node.js | Nginx | Linux

This guide assumes you already have a Next.js application in a private repository on Github. Here I have basic boilerplate Next.js application created using npx create-next-app

We assume you have a VPS instance running Ubuntu. You can get one from Digital Ocean. Make sure in your instance, you have:

Installed Node.js Installed and configured Nginx as a reverse proxy to the port your Next.js application will run on. Mine is localhost:3000 since this is the default. Installed PM2 to run our Next.js application, but we will do this later.

Also, do not clone your application from Github yet.

2. Configure Github Action workflow

Navigate to your repository on Github, and click on the “Actions” tab. Github will show some relevant workflows. Choose the Node.js workflow by clicking on “Set up this workflow”.

An editor window will appear for a .yml file.

Before: nodejs.yml

Let’s edit this file. I would like to skip the test, and would like to add a build script for our Next.js application. After the application is built, I would like to add a pm2 reload command so that our application will be updated with the new built version. I have also removed the other node-version in matrix . We also want to change runs-on to self-hosted . My final version looks like this:

After: nodejs.yml

Save this file and commit to your repository.

3. Setup Action Runner

Go to the Setting’s tab for your repository, and choose “Actions”. Click on “Add runner”

Now, you will see a list of commands you need to run on your VPS instance.

Run all this commands on your instance, and you can just choose all the defaults. At the last command which is ./run.sh you will see in the command line that we have started listening to your git pushes. Let’s exit this listener for now by doing Ctrl + C .

4. Start PM2

The next step is to start your PM2. When using Action Runner, the directory of your application will be placed in a specific folder. Notice we created a actions-runner directory from the commands above. In this directory, you will see a _work directory. Inside, you will see a directory with the name of your repository. cd into it and cd again into the only directory you see. Usually this directory is also named like your repository. Inside this directory, you will see your application source code. So, this is where we will start the application using PM2. We use this simple command that starts the application with the name next-js .

pm2 start npm --name "next-js" -- start

Let’s recap for a second. We have a reverse-proxy using Nginx that serves our application from localhost:3000 and we have started our application using PM2 and is running on localhost:3000 . So, this means our site is live.

5. Run Action Runner as a background service

Now, come back to our actions-runner folder. Here you will notice a ./svc.sh file. This file allows us to run the action runner in the background as a service. You need to run this file as sudo . First, let’s run the installation command :

sudo ./svc.sh install

Then run :

sudo ./svc.sh start

Now, your action runner is listening in the background for any pushes you make to your git repository. To check the status of this listener, you can use this command :

sudo ./svc.sh status

You will notice in the Github Repo > Settings > Actions tab, there is a runner running:

That’s it! Now, make any changes to your code, and push to the master branch, and see your code change in the server. No webhooks, or manual deployments. It just works! ✨

Please leave a comment if you wish to see a more detailed tutorial on how to setup the prerequisites. 🙏

Checkout my other Next.js articles on Medium :