How to run a NextJS website on NGINX

This artcle explains how to configure your Nginx server to run a dynymic NextHS application.

Setup bare repo

First you need to get the sourcecode of your NextJS application on the server. This can be accomplished in many ways. For this article I assume you want to have a bare repo, so you can push your code from your local environment to a remote from where the code gets pulled into a directory. To do that, setup a direcory called ‘${project-name}.git’:

1

mkdir /usr/share/nginx/repositories/${project-name}.git

In this directory, create a bare repo with the following command:

1

git init –bare

Now you’ll find some files and folders in your bare repo. Go to the hook directory and create a file named ‘post-receive’ and add the following code:

1
2
3
4
5

#!/bin/sh
git 
  --work-tree=/usr/share/nginx/html/${project-name} 
  --git-dir=/usr/share/nginx/repositories/${project-name}.git 
  checkout -f development

On line one, we define that this is a bash script. On the next three, we define where our code from the git repo will live. On the fouth line, we define where our bare repo is located. On the last line, we checkout every time a new push to this bare repo is made to the development branch.

You can test everything works by adding a remote in your local environment like so:

1

git remote add nginx ssh://user@host/usr/share/nginx/repositories/${project-name}.git

This will create a new remote named nginx. Now push the code to this remote and you should be able to find the sourcecode in the directory ‘/usr/share/nginx/html/${project-name}’

Setup Nginx config file

In the config file you can configure where the server should point at. Configure your configureation file in ‘/etc/nginx/sites-available/default’ as follows:

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27

server {

        server_name ${domain-name}.com www.{domain-name}.com;
        root /usr/share/nginx/html/${project-name}/out;

        # Add index.php to the list if you are using PHP
        index index.html index.htm index.nginx-debian.html;

        # server_name _;

        location / {
            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;
        }

    listen 443 ssl; 
    ssl_certificate /etc/letsencrypt/live/www.playground-area.com/fullchain.pem; 
    ssl_certificate_key /etc/letsencrypt/live/www.playground-area.com/privkey.pem; 
    include /etc/letsencrypt/options-ssl-nginx.conf; 
    ssl_dhparam /etc/letsencrypt/ssl-dhparams.pem; 


}

This will tell the server which domain is used, and in the location block it will tell the server to listen to port 3000. The last part is only for the SSL encryption and can be ignored.

After you made this change, make sure to restart the Nginx server with the following command:

1

sudo systemctl reload nginx

Start your server

Now go to your directory where your NextJS application lives in - in our case to ‘/usr/share/nginx/html/${project-name}’ then you need to build and then run your application. To this with the two following commands:

1
2

npm run build
npm run start

Now you should be able to go visit your domain and find your running application.