How to Deploy a Next.js Application on Your Breeze

How to Deploy a Next.js Application on Your Breeze

Next.js is a powerful React framework that supports server-side rendering (SSR), static site generation (SSG), incremental static regeneration (ISR), and API routes. It is the go-to framework for building production-grade React applications. This guide covers deploying a Next.js application on your Breeze instance with a reverse proxy setup.

Prerequisites

• A Breeze instance with Ubuntu 22.04 or later
• Node.js 18+ installed
• Nginx installed for reverse proxy
• A domain name pointed to your Breeze IP
• PM2 process manager (installed in this guide)

Step 1 — Install Node.js and PM2

curl -fsSL https://deb.nodesource.com/setup_20.x | sudo -E bash -
sudo apt install -y nodejs
sudo npm install -g pm2

Step 2 — Create or Clone Your Next.js App

If starting a new project:

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

If deploying an existing project, clone your repository:

git clone https://github.com/yourusername/your-nextjs-app.git
cd your-nextjs-app
npm ci

Step 3 — Build the Application

Create an optimized production build:

npm run build

This compiles your pages, optimizes assets, and prepares your app for production. For a fully static export, you can use:

npx next export

However, if you use SSR or API routes, you need to run the Node.js server.

Step 4 — Run with PM2

Start the Next.js production server with PM2 for process management:

pm2 start npm --name "nextjs-app" -- start
pm2 save
pm2 startup

PM2 will keep your application running, restart it if it crashes, and start it automatically on system boot. Useful PM2 commands:

• pm2 status — view running processes
• pm2 logs nextjs-app — view application logs
• pm2 restart nextjs-app — restart the application
• pm2 monit — monitor CPU and memory usage

Step 5 — Configure Nginx Reverse Proxy

Set up Nginx to proxy requests to the Next.js server:

sudo nano /etc/nginx/sites-available/nextjs

server {
    listen 80;
    server_name yourdomain.com;

    location / {
        proxy_pass http://127.0.0.1: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_cache_bypass $http_upgrade;
    }
}

sudo ln -s /etc/nginx/sites-available/nextjs /etc/nginx/sites-enabled/
sudo nginx -t && sudo systemctl reload nginx

Step 6 — Environment Variables

Create a .env.production file for production-specific variables:

NEXT_PUBLIC_API_URL=https://api.yourdomain.com
DATABASE_URL=mysql://user:pass@localhost:3306/mydb

Rebuild after changing environment variables. Secure your deployment with SSL using Certbot:

sudo certbot --nginx -d yourdomain.com