By Xiujun Ma in FreeBSD —

How to Deploy a Next.js Application with Nginx on FreeBSD

How to Deploy a Next.js Application with Nginx on FreeBSD

Next.js, a popular React framework for building server-rendered applications, offers robust features like static generation, server-side rendering, and API routes. FreeBSD, known for its stability and performance, paired with Nginx as a reverse proxy, is a great environment for hosting Next.js applications.

In this blog post, we’ll walk you through the steps to deploy a Next.js application with Nginx on FreeBSD.

Prerequisites

Before we dive in, ensure the following prerequisites are met:

  1. A FreeBSD server with root or sudo access.
  2. Basic understanding of FreeBSD commands.
  3. Nginx installed on your FreeBSD server.
  4. Node.js (v16 or later) and npm installed.

Step 1: Install Node.js and Create Your Next.js Application

Install Node.js and npm

Install Node.js and npm using the FreeBSD package manager:

pkg install node

Verify the installation:

node -v
npm -v

Create a Next.js Application

Use the npx command to create a new Next.js application:

npx create-next-app@latest my-next-app

Navigate to the project directory:

cd my-next-app

Build the application:

npm run build

This will generate an optimized production build of your Next.js app.

Step 2: Install and Configure Nginx

Install Nginx

Install Nginx using the FreeBSD package manager:

pkg install nginx

Enable and start the Nginx service:

sysrc nginx_enable="YES"
service nginx start

Configure Nginx for Reverse Proxy

Edit the Nginx configuration file:

vi /usr/local/etc/nginx/nginx.conf

Replace the default server block with the following configuration:

server {
    listen 80;
    server_name your-domain.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;
    }

    error_page 500 502 503 504 /50x.html;
    location = /50x.html {
        root /usr/local/www/nginx-dist;
    }
}

Replace your-domain.com with your domain name or server IP address.

Test the configuration for syntax errors:

nginx -t

Reload Nginx to apply the changes:

service nginx reload

Step 3: Run the Next.js Application

In production, use a process manager like PM2 or systemd to keep your Next.js application running.

Install PM2

Install PM2 globally using npm:

npm install -g pm2

Start the Application with PM2

Run your Next.js application:

pm2 start npm --name "next-app" -- start

This command starts the Next.js app on the default port 3000.

Save the PM2 Process

Ensure the process restarts automatically after a reboot:

pm2 startup
pm2 save

Step 4: Secure the Application with HTTPS

Using HTTPS is essential for securing your application. Let’s Encrypt is a free and automated Certificate Authority (CA) that works seamlessly with Nginx.

Install Certbot

Install Certbot for managing SSL certificates:

pkg install py39-certbot

Obtain an SSL Certificate

Run Certbot to obtain and configure a certificate for your domain:

certbot --nginx -d your-domain.com

Follow the prompts to complete the setup. Certbot will automatically update your Nginx configuration to enable HTTPS.

Test HTTPS Configuration

Restart Nginx to apply the SSL configuration:

service nginx restart

Verify that your site is accessible over HTTPS by visiting https://your-domain.com.

Step 5: Optimize Nginx for Next.js

To further optimize your Nginx configuration for a Next.js application:

  • Enable Compression: Add gzip compression to reduce file size.
gzip on;
gzip_types text/plain text/css application/json application/javascript text/xml application/xml application/xml+rss text/javascript;
gzip_min_length 1024;
  • Cache Static Files: Configure caching for static assets served by Next.js.
location /_next/static {
    alias /path/to/your/next-app/.next/static;
    expires 1y;
    add_header Cache-Control "public, max-age=31536000, immutable";
}

Replace /path/to/your/next-app with the absolute path to your Next.js project directory.

Conclusion

Deploying a Next.js application with Nginx on FreeBSD is a straightforward process when you follow the steps outlined above. By leveraging the performance and stability of FreeBSD, combined with the flexibility of Nginx and the power of Next.js, you can host fast, reliable, and scalable web applications.

Key takeaways:

  1. Set up Node.js and Next.js on FreeBSD.
  2. Use Nginx as a reverse proxy to manage traffic.
  3. Secure your application with HTTPS using Let’s Encrypt.
  4. Optimize Nginx for performance.

This setup provides a strong foundation for deploying modern web applications in a production environment. Happy coding!