How to Deploy your Next.js Apps on Linux server using Nginx and PM2

Tutorial on how to deploy your Next.js application to a Linux server using Nginx and PM2

Nowadays, many people use web or mobile applications for their daily activities. This makes the demand for web and mobile application development very high. There are many frameworks for web development, one of the most famous is Next.js. Then how do we deploy a web application using the Next.js framework? In this tutorial we will discuss how to deploy our Next.js web application on a Linux server.

Create your first project

The first step we need to do is create a new project. Make sure you have node with the latest version. If you are not sure you can use the following command to check the version of node on your system.

node -v

If the command provides information on your node version then you already have node on your system, otherwise you will have to install node first.

Once you’ve confirmed that you have nodes on your system, you can immediately create a new project using the following command.

npx create-next-app@latest

the above command will generate a new and fresh next.js project. You will be asked to enter the name of the application you created. Enter the name of the application as you like and keep in mind that the name of the application cannot use uppercase letters. After the process of creating a new project is complete, the arrangement of the project folders and files will look like the image below.

Install Dependencies

The next step is that we have to install the dependencies used in our project. After we install our dependencies there will be a folder named “node_modules” in our project. But usually when we create a new project, all the basic dependencies will be installed immediately. For the command we use is as follows.

npm install

Until now we should be able to run our Next application in development mode. The command used is as follows.

npm run dev

By default, our application can be accessed via localhost with port number 3000. But the deployment process is not finished yet because we need to deploy our application in production mode.

Build and Start our App in Production Mode

To start our app in production mode, we need to build the project first. Use the following command to build the project.

npm run build

After the project build process has been completed successfully, the next step is to run the following command to start our application in production mode.

npm run start

Congratulations, your Next application has been successfully deployed in production mode and can be accessed via localhost with port number 3000. Has our deployment process finished here? NOT YET. We still have to set our application to run in the background and also set up a reverse proxy so that our application can be accessed using the domain name we want.

Setting PM2

So to run our Next application in the background, we need to use PM2. First of all we have to install PM2 on our system. Use the following command to install PM2.

npm install -g pm2

After PM2 is installed on our system, we can run our Next application in the background using PM2 with the following command.

pm2 start "npm run start" --name "[YourAppName]"

Okay now your application is running in the background. Next we will set Nginx to reverse proxy with the application that we have deployed.

Setting NGINX

I assume you have Nginx installed on your system. The final step is that we need to configure our Nginx configuration file. Usually the file is in the directory with the address “/etc/nginx/conf.d”. Here we will create a new configuration file for our application. Let’s create a new file using the Nano text editor. Run the following command.

sudo nano [domainName].conf

Enter the following script as the configuration of our Nginx in the editor.

server {
        listen       80;
        listen       [::]:80;
        server_name  testnextdeploy.com www.testnextdeploy.com;
location / {
                # reverse proxy for next server
                proxy_pass http://localhost:3000;
                proxy_http_version 1.1;
                proxy_set_header Upgrade $http_upgrade;
                proxy_set_header Connection 'upgrade';
                proxy_set_header Host $host;
                proxy_cache_bypass $http_upgrade;
        }
}

After that save your script and restart Nginx with the following command.

sudo nginx -t
sudo systemctl restart nginx

Your application should be accessible via a browser as shown below.

Conclusion

The deployment process is not too difficult because we are helped by the presence of PM2 and Nginx, where PM2 functions as an application that can run a service in the background and Nginx functions as a reverse proxy so that our application can be recognized and accessed from outside. However, please note that the Nginx configuration above is a configuration for the http service where it is not so safe, but you can configure the https service so that your application is more secure. Thank you for reading this article, I hope this article is useful and Happy Deploying…!!! :)