How to setup next.js app on nginx with letsencrypt

next_nginx.md

How to setup Next.js app on Nginx with letsencrypt

Next.js, Nginx with Reverse proxy, SSL certificate

• UPDATE (07/20/2021):
  • This process got simplified over the years of this gist being out
  • Older version of this gist (without certbot): https://gist.github.com/kocisov/2a9567eb51b83dfef48efce02ef3ab06/33fdd88872a0801bdde58fccce430fa48737ae10
  • I would also now recommend deploying to Vercel if you don't need custom server support

1. Install Nginx, Node and certbot

In your server console/terminal

cd ~ # go to the current user's home directory
curl -sL https://deb.nodesource.com/setup_14.x -o nodesource_setup.sh
sudo bash nodesource_setup.sh

sudo apt update
sudo apt install nginx nodejs certbot python3-certbot-nginx

Also enable Nginx in ufw

sudo ufw allow 'OpenSSH' # needed for SSH connections
sudo ufw allow 'Nginx Full' # after installing Nginx!
sudo ufw enable

2. Setup letsencrypt with certbot

• You will need to point your domain to your server's IP with DNS Record (with A record, ...)

Edit our default Nginx site file

sudo vim /etc/nginx/sites-available/default

Content

You can keep everything other than server_name (domain) unchanged now

• example.com should be changed to the domain you are setting up the app on

server {
  # ...

  server_name example.com www.example.com;

  # ...
}

Restart nginx

sudo nginx -t # check syntax errors
sudo systemctl restart nginx

Run certbot command

sudo certbot --nginx -d example.com -d www.example.com
# certbot will guide you through setting up the certificate and different options of redirecting, ...

4. Setup Reverse proxy

Edit our Nginx file again

# ...

server {
  # ...

  server_name example.com www.example.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_set_header X-Real-IP $remote_addr;
    proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
    proxy_set_header X-Forwarded-Proto $scheme;
    proxy_set_header X-Forwarded-Host $host;
    proxy_set_header X-Forwarded-Port $server_port;

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

  # ...
}

Restart Nginx again

sudo nginx -t # check syntax errors
sudo systemctl restart nginx

4. Setup Next.js app

# assuming you have a GitHub repository for the app
git pull https://github.com/user/repo.git
cd repo
npm install # install app dependencies (or yarn install)
npm run build # build our app for production (or yarn build)

npm install -g pm2 # install pm2 for running our app detached

# run start/stop
pm2 start npm --name "next" -- start # start next app
pm2 stop next # for stopping app

We are done

Congratulations!

Now you have the Next.js app up and running on Nginx Reverse proxy with SSL on your https://domain.

@kocisov, Could you please explain why we need to do 2. Edit our default nginx site file step? Seems like a duplicate from step 3 nginx file, as same configuration is present there.

Hello, we do the second step because we need to tell Nginx that we want to serve on our domain before running letsencrypt.
This configuration file is also quite different in 3rd step because it's after generating certificates and we also set up proxy pass there.

Thank you! 🙏

Really useful. Thank you

Thanks you man

My suggestion is to replace http://localhost:3000 with http://127.0.0.1:3000.

It may cause an error.

connect() failed (111: Connection refused) while connecting to upstream,

it's working on safari. but not on chrome. please help

This worked for me thank you 🙏

Other than needing to use a newer version of node this concluded my hours of troubleshooting. Thank you!

Thanks! Just what i needed :-)

Worked great!, there are a lot of guides on the internet that doesn't work but this one does!