How to deploy NextJS with NGINX?

Question

So I know how to deploy a React app on a server.

• npm run build
• create a server block and point the root to my react app folder build (root /var/www/xfolder/build;)
• systemctl restart nginx
• run my node server (nohup node server &&) and its done.

I feel kind of dumb for not understanding this with NextJS. I run npm run build

I'm expecting something like a build folder. I've tried setting the server block root to /var/www/xfolder/.next but the page still gives 403 forbidden. And do I need to run npm run start? I'm confuse on how to properly deploy the app. I'm using Ubuntu, NginX (1gb droplet) in DigitalOcean.

Answer 1

I managed to make it work. The problem is on my Nginx server block. I just add this block

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;
    }

then run

npm start

Answer 2

I prefer to pm2 in order to start nextJs service and Nginx for publishing it

pm2 cmd:

pm2 start yarn --name nextjs --interpreter bash -- start
pm2 show nextjs

You can push that config into /etc/nginx/conf.d/your-file.config /etc/nginx/nginx.config

server {
    listen 80; # you can use 443 and letsencrypt to get SSL for free
    server_name dicom-interactive.com; # domain name
    access_log /var/log/dicom-interactive/access.log; # mkdir dir first
    error_log /var/log/dicom-interactive/error.log error;

    # for public asset into _next directory
    location _next/ {
        alias /srv/udemii-fe/.next/;
        expires 30d;
        access_log on;
    }

    location / {
        # reverse proxy for next server
        proxy_pass http://localhost:8000; # your nextJs service and port
        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;

        # we need to remove this 404 handling
        # because next's _next folder and own handling
        # try_files $uri $uri/ =404;
    }
}