In this article we will see how to deploy a NextJs app on your own linux server with the help of Nginx and pm2.

What is NextJS?

NextJS is a full-stack web development framework based on React library. You can use NextJS to develop Single Page Applications, Static Site Generation, Server Side Rendering.

• Single Page Applications means your app will work on the main route (homescreen) only. Any other routes actually will be rendered at the home route. For example, when you visit /about page in a SPA your url will not change and your about page will be render on the home route.

• SSG (Static Site Generations) is another feature of NextJS which let's you build Static Apps like landing pages or blog websites. All the routes and html files will be rendered when we build SSG app and users will get each file as per request. This is the method that we show how to deploy on this article.

• SSR (Server Side Rendering) means rendering every page on every request on the server. This suits for dynamic apps like e-commerce websites. Because they need to update data oftenly.

What is NginX?

Nginx is a web server to serve your web apps. You can use Nginx to setup your projects on your server and serve multiple websites on the same server. You achive this to pairing domains and project folders at nginx configuration files.

What is PM2?

PM2 is a process manager for NodeJS. It makes easier to run nodejs applications, monitor them and restart on every boot automatically.

How to Deploy NextJS SSG App?

1. Clone your repository on the server

You need to copy your project to your server. Generally you put it under the /var/www/ directory on the server.

Here is a part of my package.json file:

"scripts": {
"dev": "next dev",
"build": "next build",
"start": "next start -p 3001",
"export": "next export",
},
"dependencies": {
"eslint": "8.33.0",
"eslint-config-next": "^13.4.3",
"gray-matter": "^4.0.3",
"markdown-to-jsx": "^7.2.0",
"next": "^13.4.3",
"next-themes": "^0.2.1",
"react": "^18.2.0",
"react-dom": "^18.2.0",
"react-modal-video": "^2.0.0",
"react-share": "^4.4.1"
}

Notice that I add a port 3001 parameter to my start script because I already have another website using port 3000 on my server.

Here is my next.config.js file:

/** @type {import('next').NextConfig} */
const nextConfig = {
  experimental: {
    appDir: true,
  },
};

module.exports = nextConfig;

2. Build your project

We need to build our project to generate static files for our application. We will use this command to build: npm run build

This command will create .next/ folder in our project directory.

3. Start the server with PM2

Now we can start the server to serve our app. We will use pm2 to do that for reasons that i exlained already. Here is the command:

pm2 start npm --name project_name -- start

This command means pm2 will run npm start command and give a name our project as project_name so we can find this project among others easily.

You can also run this command to save your project in pm2 settings so pm2 remembers your project and runs it on every restart of your server:

pm2 save

4. Set up Nginx configuration

Go to /etc/nginx/sites-available/ directory and create a file and open it. You can give a name to file anything you want, commonly same as your project name. You don't put any extensions to your file name like .txt or anything.

Paste the following codes to your file:

server{
    root /var/www/project_name;
    index index.html index.nginx-debian.html;

    server_name example.com www.example.com;

    location /_next/static/ {
        alias /var/www/project_name/.next/static/;
    }

    location / {
        proxy_pass http://11.111.111.11:3001;
        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;
    }
}

Change the project_name with your real project name. Change the example.com with your real domain. Change the 11.111.111.11:3001 with your server ip address and the port number which you gave in your package.json.

Save the file.

Now you need the link the file to the directory called /etc/nginx/sites-enabled/

sites-available means every project you created in your server. sites-enabled means projects which actualy nginx serve. So only the projects inside of sites-enabled folder will be serve by nginx.

Here is the command to link your file in sites-available/your_file/ to /sites-enabled/your_file/

ln -s /etc/nginx/sites-available/your_file /etc/nginx/sites-enabled/your_file

I used absolute routes so you can run the command in any folder.

Now we set up everything let's restart nginx with the following command:

systemctl restart nginx

5. Check and debug

You can visit your domain check if it's working.

You can run this command to check pm2 is running your app or not:

pm2 status

Conclusion

In this article we learned how to deploy a NextJS SSG app using nginx and pm2. I hope this helps.