Next.js Stack: Reverse Proxy, Caching und Static Export

Ein performanter Next.js-Stack benötigt eine sorgfältige Abstimmung von Reverse Proxy, Caching und statischem Export, um schnelle Ladezeiten und Skalierbarkeit zu gewährleisten. Nginx dient dabei als Reverse Proxy, Node.js verarbeitet die Next.js-Anwendung, und statische Seiten können zusätzlich über CDN oder Cache ausgeliefert werden. Dieser Leitfaden richtet sich an Einsteiger, IT-Studierende und Junior Network Engineers und beschreibt praxisnah den Aufbau eines Next.js-Stacks auf Linux.

Systemvoraussetzungen

  • Linux-Distribution: Ubuntu 22.04 LTS oder CentOS 9
  • Root- oder sudo-Zugriff
  • Node.js 18+ installiert
  • Nginx als Reverse Proxy
  • Optional: PM2 für Prozessmanagement
  • Firewall- und SSL/TLS-Konfiguration

Node.js und Next.js installieren

Node.js bildet die Basis für den Next.js-Stack, während Next.js das Frontend-Framework liefert.

Node.js Installation

# Ubuntu
curl -fsSL https://deb.nodesource.com/setup_18.x | sudo -E bash -
sudo apt install -y nodejs

CentOS

curl -fsSL https://rpm.nodesource.com/setup_18.x | sudo bash -
sudo dnf install -y nodejs

Next.js Projekt erstellen

mkdir /var/www/nextapp
cd /var/www/nextapp
npm init -y
npm install next react react-dom
npx next build
npx next export

Reverse Proxy mit Nginx

Nginx leitet HTTP-Anfragen an den Next.js-Server weiter und kann statische Assets direkt ausliefern.

Installation

# Ubuntu
sudo apt install nginx -y

CentOS

sudo dnf install nginx -y
sudo systemctl enable nginx
sudo systemctl start nginx

Serverblock konfigurieren

sudo nano /etc/nginx/sites-available/nextapp.conf
server {
    listen 80;
    server_name example.com www.example.com;

    root /var/www/nextapp/out;

    access_log /var/log/nginx/nextapp.access.log;
    error_log /var/log/nginx/nextapp.error.log;

    location /_next/static/ {
        alias /var/www/nextapp/out/_next/static/;
        expires 1y;
        add_header Cache-Control "public";
    }

    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_cache_bypass $http_upgrade;
    }
}
sudo ln -s /etc/nginx/sites-available/nextapp.conf /etc/nginx/sites-enabled/
sudo nginx -t
sudo systemctl reload nginx

Caching für Next.js

Caching beschleunigt die Auslieferung von statischen Seiten und reduziert die Serverlast.

HTTP-Cache über Nginx

location / {
    proxy_pass http://127.0.0.1:3000;
    proxy_cache mycache;
    proxy_cache_valid 200 10m;
    proxy_cache_use_stale error timeout updating;
    add_header X-Cache-Status $upstream_cache_status;
}

Redis oder Varnish optional

  • Redis für Session-Cache und dynamische Daten
  • Varnish für Full-Page-Cache bei hohem Traffic

Process Management mit PM2

PM2 sorgt dafür, dass die Next.js-App automatisch neu gestartet wird und mehrere Workerprozesse genutzt werden.

npm install -g pm2
pm2 start npm --name "nextapp" -- start
pm2 startup systemd
pm2 save

Static Export optimieren

Next.js ermöglicht mit next export die Generierung statischer Seiten, die direkt über Nginx ausgeliefert werden können.

npx next build
npx next export -o /var/www/nextapp/out
  • Statische Assets nach /var/www/nextapp/out kopieren
  • Nginx-Root auf das Export-Verzeichnis setzen
  • Cache-Control für statische Assets setzen

Netzwerk- und Subnetzplanung

Für Multi-Server Deployments empfiehlt sich die Trennung von Webserver, Node-Server und Caching-Server in separaten Subnetzen.

IPv4 Subnetz

<math>
Web-Server-IP = 192.168.520.10/24
Node-Server-IP = 192.168.520.11/24
Cache-Server-IP = 192.168.520.12/24
Subnetzadresse = 192.168.520.0
Broadcastadresse = 192.168.520.255
</math>

IPv6 Subnetz

<math>
Web-Server-IP = 2001:db8:abcd:520::10/64
Node-Server-IP = 2001:db8:abcd:520::11/64
Cache-Server-IP = 2001:db8:abcd:520::12/64
Subnetzadresse = 2001:db8:abcd:520::0
Broadcastadresse = 2001:db8:abcd:520:ffff:ffff:ffff:ffff
</math>

Best Practices

  • Dedizierte Benutzer für Node.js und Nginx
  • PM2 oder systemd für Node-Prozesse nutzen
  • Statische Assets über next export optimieren
  • HTTP-Caching über Nginx oder Varnish aktivieren
  • Redis für dynamische Caches einsetzen
  • SSL/TLS für HTTPS erzwingen
  • Firewall und Subnetze zur Segmentierung nutzen
  • Backups und Monitoring für App und Server einrichten
  • Logfiles für Nginx und Node regelmäßig prüfen
  • Testumgebung identisch zur Produktion bereitstellen

Konfiguriere Cisco Router & Switches und liefere ein Packet-Tracer-Lab/GNS3

Ich biete professionelle Unterstützung im Bereich Netzwerkkonfiguration und Network Automation für private Anforderungen, Studienprojekte, Lernlabore, kleine Unternehmen sowie technische Projekte. Ich unterstütze Sie bei der Konfiguration von Routern und Switches, der Erstellung praxisnaher Topologien in Cisco Packet Tracer, dem Aufbau und Troubleshooting von GNS3- und EVE-NG-Labs sowie bei der Automatisierung von Netzwerkaufgaben mit Netmiko, Paramiko, NAPALM und Ansible. Kontaktieren Sie mich jetzt – klicken Sie hier.

Meine Leistungen umfassen:

  • Professionelle Konfiguration von Routern und Switches

  • Einrichtung von VLANs, Trunks, Routing, DHCP, NAT, ACLs und weiteren Netzwerkfunktionen

  • Erstellung von Topologien und Simulationen in Cisco Packet Tracer

  • Aufbau, Analyse und Fehlerbehebung von Netzwerk-Labs in GNS3 und EVE-NG

  • Automatisierung von Netzwerkkonfigurationen mit Python, Netmiko, Paramiko, NAPALM und Ansible

  • Erstellung von Skripten für wiederkehrende Netzwerkaufgaben

  • Dokumentation der Konfigurationen und Bereitstellung nachvollziehbarer Lösungswege

  • Konfigurations-Backups, Optimierung bestehender Setups und technisches Troubleshooting

Benötigen Sie Unterstützung bei Ihrem Netzwerkprojekt, Ihrer Simulation oder Ihrer Network-Automation-Lösung? Kontaktieren Sie mich jetzt – klicken Sie hier.

Related Articles