Deploy Next.js 13 with Nginx on Ubuntu Server: HTTP/2, Gzip, Static Cache Guide

Next.js is a popular JavaScript framework for building server-side rendered (SSR) React applications. Nginx is a high-performance web server that can also be used as a reverse proxy. This combination owithf Next.js provides a scalable and secure solution for deploying web applications. In this tutorial, we will show you how to deploy a Next.js 13 application behind Nginx on an Ubuntu server.

Before we begin, make sure that you have the following prerequisites:

• An Ubuntu server with a non-root user with sudo privileges
• Nginx installed on your server
• Node.js and npm installed on your server
• A Next.js application ready to be deployed

Create a Systemd service for your application

Create a Systemd service to manage the application. This service will be used to start and stop the application.Create a new file in the /etc/systemd/system directory with the following content:

sudo nano /etc/systemd/system/nextjs.service

[Unit]
Description=Next.js

[Service]
ExecStart=/usr/bin/npm start
WorkingDirectory=/var/www/your-next-js-app
Restart=always
User=www-data

[Install]
WantedBy=multi-user.target

Replace /var/www/your-next-js-app with the path to your Next.js application.

Start the Next.js Systemd service using the following command: sudo systemctl start nextjs

Configure Nginx as a reverse proxy

Create a new Nginx server block to serve as a reverse proxy for your application.

Create a new file in the /etc/nginx/sites-available directory with the following content:

server {
    listen 80;
    server_name example.com;

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

    listen 443 ssl http2;
    server_name example.com;

    ssl_certificate /path/to/cert.pem;
    ssl_certificate_key /path/to/cert.key;

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

    location /static/ {
        expires 1d;
        add_header Cache-Control "public, max-age=31536000, immutable";
    }

    gzip on;
    gzip_types text/plain text/css application/json application/javascript text/xml application/xml application/xml+rss text/javascript;
}

The location /static/ block is used to serve static files from the /static directory in your Next.js application with a 1-day cache expiration and the Cache-Control header set to public, max-age=31536000, immutable, indicating that the files can be cached by the browser and intermediate proxies for up to 1 year.

Activate gzip compression for the Nginx server and determine the file types to compress using the gzip_types directive.

As before, replace your domain name and /path/to/cert.pem and /path/to/cert.key with the path to your SSL certificate and key, respectively.Save the file, create a symbolic link to it in the /etc/nginx/sites-enabled directory, test the Nginx configuration, and reload Nginx to apply the changes, just as before.

Now, your Next.js 13 application is served behind Nginx with HTTP/2, gzip compression, and static file caching.