Next.js mit Apache2 deployen

Folge dieser Anleitung, um deine Next.js Anwendung auf einem eigenen Server mit Apache2 zu deployen. Zwei Deployment-Modi werden behandelt: ein Standard-Node.js-Deployment mit vollem SSR-Support und ein statischer Export für einfachere Setups.

Standard-Deployment mit Node.js

Deploye deine App mit vollständigem Server-Side Rendering, API-Routen und Middleware.

1. Next.js-App bauen

Baue lokal, bevor du die Dateien auf den Server überträgst:

# Zum Projektverzeichnis navigieren
cd your-next-app

# Abhängigkeiten installieren, falls noch nicht geschehen
npm install

# App bauen
npm run build

# Erstellt ein .next-Verzeichnis mit der gebauten App

2. Dateien auf den Server übertragen

Verwende SCP, SFTP oder eine andere Dateiübertragungsmethode:

# Beispiel mit SCP (vom lokalen Rechner ausführen)
scp -r .next package.json package-lock.json public next.config.js benutzername@server-ip:/pfad/zur/app

3. Abhängigkeiten auf dem Server installieren

Per SSH auf den Server einloggen und Produktionsabhängigkeiten installieren:

cd /pfad/zur/app
npm install --production

4. Apache mit Reverse Proxy einrichten

Erforderliche Apache-Module aktivieren:

sudo a2enmod proxy
sudo a2enmod proxy_http
sudo a2enmod proxy_wstunnel  # Für WebSocket-Unterstützung
sudo a2enmod rewrite

Die Virtual-Host-Konfigurationsdatei erstellen:

sudo nano /etc/apache2/sites-available/nextjs.conf

Diese Konfiguration hinzufügen (Domainnamen anpassen):

<VirtualHost *:80>
    ServerName yourdomain.com
    ServerAdmin webmaster@yourdomain.com

    # Alle Anfragen an den Next.js-Server weiterleiten
    ProxyPreserveHost On
    ProxyPass / http://localhost:3000/
    ProxyPassReverse / http://localhost:3000/

    # WebSocket-Unterstützung
    RewriteEngine On
    RewriteCond %{HTTP:Upgrade} =websocket [NC]
    RewriteRule /(.*) ws://localhost:3000/$1 [P,L]

    ErrorLog ${APACHE_LOG_DIR}/nextjs_error.log
    CustomLog ${APACHE_LOG_DIR}/nextjs_access.log combined
</VirtualHost>

Site aktivieren und Apache neu starten:

sudo a2ensite nextjs.conf
sudo systemctl restart apache2

5. Next.js-Server mit PM2 ausführen

PM2 hält den Node.js-Prozess am Laufen und startet ihn bei Server-Neustart automatisch neu:

# PM2 global installieren
sudo npm install -g pm2

# Next.js-App starten
cd /pfad/zur/app
pm2 start npm --name "next-app" -- start

# Beim Neustart persistent halten
pm2 startup
pm2 save

6. SSL mit Certbot einrichten

Kostenloses Let’s Encrypt-Zertifikat erhalten und installieren:

sudo apt install certbot python3-certbot-apache
sudo certbot --apache -d yourdomain.com

Certbot aktualisiert deine Apache-Konfiguration automatisch, um HTTP auf HTTPS umzuleiten.

---

Statisches Export-Deployment

Verwende diese Methode, wenn du kein SSR, keine API-Routen oder Middleware benötigst – Apache liefert direkt statische HTML-Dateien aus.

1. App für statischen Export konfigurieren

output-Einstellung in next.config.js hinzufügen:

/** @type {import('next').NextConfig} */
const nextConfig = {
  output: 'export',
}

module.exports = nextConfig

2. App bauen

npm run build

Erstellt ein out-Verzeichnis mit ausschließlich statischen Dateien.

3. Apache für statische Dateien konfigurieren

Den Virtual Host erstellen:

<VirtualHost *:80>
    ServerName yourdomain.com
    ServerAdmin webmaster@yourdomain.com

    DocumentRoot /pfad/zur/app/out

    <Directory "/pfad/zur/app/out">
        Options Indexes FollowSymLinks
        AllowOverride All
        Require all granted
    </Directory>

    ErrorLog ${APACHE_LOG_DIR}/nextjs_error.log
    CustomLog ${APACHE_LOG_DIR}/nextjs_access.log combined
</VirtualHost>

4. Site aktivieren und Apache neu starten

sudo a2ensite nextjs.conf
sudo systemctl restart apache2

5. SSL einrichten

sudo apt install certbot python3-certbot-apache
sudo certbot --apache -d yourdomain.com

---

Wichtige Hinweise

• Auf dem Server muss Node.js installiert sein. Die Mindestversion hängt von der genutzten Next.js-Version ab – aktuelle Anforderungen in den offiziellen Next.js-Dokumenten prüfen (nur für Standard-Deployment).
• Statischer Export unterstützt kein SSR, keine API-Routen, Server Actions oder Middleware.
• Umgebungsvariablen in .env.production auf dem Server festlegen – diese Datei aus der Versionskontrolle heraushalten.
• In der Produktion immer HTTPS verwenden und geeignete Caching-Strategien implementieren.

Häufig gestellte Fragen

Muss Node.js auf dem Apache-Server installiert sein?

Ja, für das Standard-Deployment. Beim statischen Export liefert Apache die vorgefertigten HTML-Dateien aus – Node.js wird zur Laufzeit nicht benötigt.

Funktionieren Next.js-API-Routen mit statischem Export?

Nein. API-Routen, Server Actions und Middleware benötigen eine Node.js-Laufzeitumgebung und sind mit statischem Export nicht kompatibel. Verwende das Standard-Deployment, wenn deine App auf diese Funktionen angewiesen ist.

Wie verwalte ich Umgebungsvariablen in der Produktion?

Erstelle eine .env.production-Datei auf dem Server mit den entsprechenden Variablen. Beim statischen Export müssen alle clientseitig genutzten Variablen mit NEXT_PUBLIC_ prefixed und bereits zur Build-Zeit verfügbar sein, da sie in die JavaScript-Bundles eingebettet werden.