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, reverse-proxy, ssl

1. Install nginx and letsencrypt

$ sudo apt-get update
$ sudo apt-get install nginx letsencrypt

Also enable nginx in ufw

# after installing nginx!
$ sudo ufw allow 'Nginx Full'

2. Edit our default nginx site file

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

Content

# *q is our domain
server {
  listen 80 default_server;
  listen [::]:80 default_server;

  root /var/www/html;
  index index.html index.htm index.nginx-debian.html;

  server_name q*;

  location / {
    try_files $uri $uri/ =404;
  }
  
  # for letsencrypt
  location ~ /.well-known {
    allow all;
  }
}

Restart nginx

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

3. Setup letsencrypt

# *q is our domain
$ sudo letsencrypt certonly -a webroot --webroot-path=/var/www/html -d *q -d www.q*

Generate Strong DH Group

$ sudo openssl dhparam -out /etc/ssl/certs/dhparam.pem 2048

Create nginx config file with Strong Encryption Settings

$ sudo vim /etc/nginx/snippets/ssl-params.conf

Content

ssl_protocols TLSv1 TLSv1.1 TLSv1.2;
ssl_prefer_server_ciphers on;
ssl_ciphers "EECDH+AESGCM:EDH+AESGCM:AES256+EECDH:AES256+EDH";
ssl_ecdh_curve secp384r1;
ssl_session_cache shared:SSL:10m;
ssl_session_tickets off;
ssl_stapling on;
ssl_stapling_verify on;

resolver 8.8.8.8 8.8.4.4 valid=300s;
resolver_timeout 5s;

add_header Strict-Transport-Security "max-age=63072000; includeSubdomains";
add_header X-Frame-Options DENY;
add_header X-Content-Type-Options nosniff;

ssl_dhparam /etc/ssl/certs/dhparam.pem;

Edit our nginx file

# *q is our domain

# redirect http to https
server {
  listen 80 default_server;
  listen [::]:80 default_server;
  server_name *q www.*q;
  return 301 https://$server_name$request_uri;
}

server {
  # listen on *:443 -> ssl; instead of *:80
  listen 443 ssl http2 default_server;
  listen [::]:443 ssl http2 default_server;

  server_name q*;
  
  ssl_certificate /etc/letsencrypt/live/example.com/fullchain.pem;
  ssl_certificate_key /etc/letsencrypt/live/example.com/privkey.pem;
  include snippets/ssl-params.conf;

  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_cache_bypass $http_upgrade;
  
    # we need to remove this 404 handling
    # because next's _next folder and own handling
    # try_files $uri $uri/ =404;
  }
  
  location ~ /.well-known {
    allow all;
  }
}

Restart nginx again

$ sudo service nginx restart

4. Setup next.js app

$ yarn build # build our app for production (npm build script: next build)
$ yarn global add pm2 # install pm2 to keep next app alive forever*

# run start/stop
$ pm2 start npm --name "next" -- start # start next app (npm start script: next start)
$ pm2 stop next # for stopping app

We are done

Now you have next.js app up and running on nginx reverse proxy with ssl!

Thank you very much for this :)

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!