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.

What means 'Edit our nginx file'? what file?

@kidow What means 'Edit our nginx file'? what file?

nginx web server configuration file.

On linux based systems usually found at:

/etc/nginx/sites-available/some_name.conf

and may have a symbolic link at (or you can place your config file here as well):

 /etc/nginx/sites-enabled/some_name.conf

Great job, you save me hours of work!!!

Just to improve some details, example.com has to be updated for *q

ssl_certificate /etc/letsencrypt/live/*q/fullchain.pem;
ssl_certificate_key /etc/letsencrypt/live/*q/privkey.pem;

thanks man!

It also works for me thanks for the gist.. One thing more which should be the primary thing that we have to open port 443 (https).for the server

It also works for me thanks for the gist.. One thing more which should be the primary thing that we have to open port 443 (https).for the server

Well, the sudo ufw allow 'Nginx Full' does that.

Hi, thanks for the help, I can visualize my Web now, but, I can't get the images and styles to load, the 404 error in / img returns to my console. Any suggestions?

Thank you!

where i should put my next.js app?

where i should put my next.js app?

Hello, that does not matter.
You can put the app anywhere you like. Afterwards, if you start it with pm2, Nginx will proxy that app based on the port and local ip.

But maybe /usr/src/app, maybe /var/www/app or even in home folder like ~/app.

Hello, i put my project in home ~/disaada.github.io (is it okk to use this folder name? because its cloned from github) but when pm2 already online and i access it using my domain, its just loading for long time and failed to load the page and said "This site can’t be reached". What sould i do?

Yes, the name of the folder is alright as I mentioned before.
If the site can't be reached I would try to change Nginx configuration to a default state with your domain in place and test if it is working correctly with static files (eg. index.html).

If that works then I would also check if Nginx can reach the port of the app that runs in pm2.

My bad. I forgot to add https security group at my cloud server. And now it works! I'm sorry. Big much thank you!

No problem, glad you got it resolved.

Hi there, could anyone help with renewing the let's encrypt certificate, please?

sudo letsencrypt certonly -a webroot --webroot-path=/var/www/html -d mydomain.com -d www.mydomain.com

IMPORTANT NOTES:
 - The following errors were reported by the server:

   Domain: mydomain.com 
   Type:   unauthorized
   Detail: Invalid response from
   https://mydomain.com/.well-known/acme-challenge/kJKsq-0rKw_v9nf3oVLlg7l4xOiRy7nZcBkQyouVxt0
   [51.89.192.19]: "<html>\r\n<head><title>404 Not
   Found</title></head>\r\n<body bgcolor=\"white\">\r\n<center><h1>404
   Not Found</h1></center>\r\n<hr><center>"

Thank you for this ! Really helpful and clear, A+ grade SSL certs !

By doing this do you lose the performance optimizations of Next.js?
I got this from the official doc:

Before deciding to use a custom server please keep in mind that it should only be used when the integrated router of Next.js can't meet your app requirements. A custom server will remove important performance optimizations, like serverless functions and Automatic Static Optimization.

By doing this do you lose the performance optimizations of Next.js?
I got this from the official doc:

Before deciding to use a custom server please keep in mind that it should only be used when the integrated router of Next.js can't meet your app requirements. A custom server will remove important performance optimizations, like serverless functions and Automatic Static Optimization.

Hello, no that is not the case, we are not using custom server in this guide.

@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.

@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!