Let's Encrypt, encrypt nextjs

HTTPS is very important in website construction and can improve SEO rankings. For a long time, this blog website could only be accessed through HTTP due to the lack of a TLS certificate. The browser always popped up an insecure prompt, which looked very ugly. Recently, after the Chrome browser was updated, secure DNS was turned on by default, which caused my website to be unable to be opened, but it could be accessed normally using other browsers.

After learning that Let's Encrypt made TLS certificates available for free, I decided to add it to my website - something I had to do sooner or later.

TLS encryption process

Let’s use the analogy of a bank and customer scenario. In this metaphor, the bank is the server and the customer is the client. When customers want to conduct transactions with a bank, they first need to confirm whether the bank is a formal institution and not a scammer who takes money and runs away. In real life, the establishment of a bank requires government authorization and approval. We can check whether the bank has formal establishment procedures from the government (similar to a digital certificate). If so, it means that the bank is safe.

When users deposit money to the bank, they do not want their deposit information to be monitored by others, and they must ensure that their financial information is not exposed. Encryption is required at this time. The bank and the customer agree on an encryption and decryption password, and the customer uses this password to tell the bank how much money to deposit. Even if the password is overheard by others, it is impossible to determine whether the deposit is one yuan or one hundred million, but the bank can obtain the true deposit amount through decryption.

Thinking about this process carefully, the question becomes how the customer agrees with the bank on a password that cannot be eavesdropped by others. First, the bank sends its authorization certificate (public key) to the user, and the user generates a temporary password (private key), encrypts the private key with the bank's public key, and then sends the encryption result to the bank. The bank decrypts it with its own private key and obtains the customer's private key. Note that the eavesdropper does not have the bank's private key and therefore cannot decrypt the customer's temporary private key.

Finally, the bank obtains the customer's temporary private key. Thereafter, every deposit made by the customer is sent to the bank encrypted, and the bank decrypts it using the private key.

Deploy TLS for nextjs

sudo apt install certbot

certbot certonly --standalone -d we1.top -d www.we1.top

After executing these two commands, the system will automatically install a free certificate for our website and set up a scheduled update function. This means that we only need to deploy once and enjoy free TLS service for a long time.

server {

      server_name we1.top www.we1.top;

      listen 443 ssl;

      ssl_certificate /etc/letsencrypt/live/we1.top/fullchain.pem;

      ssl_certificate_key /etc/letsencrypt/live/we1.top/privkey.pem;



      location/{

         proxy_pass http://127.0.0.1:3999;

         proxy_http_version 1.1;

         proxy_set_header X_FORWARDED_PROTO https;

         proxy_set_header X-Real-IP $remote_addr;

         proxy_set_header X-Forwarded-For $remote_addr;

         proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;

         proxy_set_header Host $host;

      }

  }

  

  

  server {

        listen 80 default_server;

        listen [::]:80 default_server;



        server_name we1.top www.we1.top;



        root /var/www/html;



        index index.html index.htm index.nginx-debian.html;



        location/{

                return 301 https://$server_name$request_uri;

        }

}

This configuration file sets up two server blocks. The first server block handles HTTPS requests, proxying them to the Next.js application running locally on port 3999. The second server block redirects all HTTP requests to HTTPS, ensuring all traffic is encrypted.

After completing these configurations, restart the Nginx server and our Next.js application can be accessed securely via HTTPS. Not only does this improve the security of your site, it may also improve search engine rankings and user experience.