Deployment

Herzlichen Glückwunsch! Sie sind hier, weil Sie bereit sind, Ihre Next.js-Anwendung zu deployen. Diese Seite zeigt, wie Sie entweder verwaltet oder selbst gehostet mit der Next.js Build API bereitstellen können.

Next.js Build API

next build generiert eine optimierte Version Ihrer Anwendung für die Produktion. Diese Standardausgabe umfasst:

• HTML-Dateien für Seiten mit getStaticProps oder Automatischer statischer Optimierung
• CSS-Dateien für globale oder individuell abgegrenzte Stile
• JavaScript für das Pre-Rendering dynamischer Inhalte vom Next.js-Server
• JavaScript für Interaktivität auf der Client-Seite durch React

Diese Ausgabe wird im .next-Ordner generiert:

• .next/static/chunks/pages – Jede JavaScript-Datei in diesem Ordner bezieht sich auf die Route mit demselben Namen. Zum Beispiel wäre .next/static/chunks/pages/about.js die JavaScript-Datei, die geladen wird, wenn Sie die /about-Route in Ihrer Anwendung aufrufen
• .next/static/media – Statisch importierte Bilder von next/image werden hier gehasht und kopiert
• .next/static/css – Globale CSS-Dateien für alle Seiten Ihrer Anwendung
• .next/server/pages – Die HTML- und JavaScript-Einstiegspunkte, die vom Server vorgerendert wurden. Die .nft.json-Dateien werden erstellt, wenn Output File Tracing aktiviert ist, und enthalten alle Dateipfade, die von einer bestimmten Seite abhängen.
• .next/server/chunks – Gemeinsame JavaScript-Chunks, die an mehreren Stellen in Ihrer Anwendung verwendet werden
• .next/cache – Ausgabe für den Build-Cache und zwischengespeicherte Bilder, Antworten und Seiten vom Next.js-Server. Die Verwendung eines Caches hilft, Build-Zeiten zu verringern und die Leistung beim Laden von Bildern zu verbessern

Der gesamte JavaScript-Code in .next wurde kompiliert und Browser-Bundles wurden minimiert, um die beste Leistung zu erreichen und alle modernen Browser zu unterstützen.

Verwaltetes Next.js mit Vercel

Vercel ist der schnellste Weg, Ihre Next.js-Anwendung ohne Konfiguration zu deployen.

Bei der Bereitstellung auf Vercel erkennt die Plattform Next.js automatisch, führt next build aus und optimiert die Build-Ausgabe für Sie, einschließlich:

• Beibehaltung zwischengespeicherter Assets über Bereitstellungen hinweg, wenn sie unverändert bleiben
• Unveränderliche Bereitstellungen mit einer eindeutigen URL für jeden Commit
• Seiten werden automatisch statisch optimiert, wenn möglich
• Assets (JavaScript, CSS, Bilder, Schriftarten) werden komprimiert und von einem Globalen Edge-Netzwerk bereitgestellt
• API-Routen werden automatisch als isolierte Serverless Functions optimiert, die unendlich skalieren können
• Middleware wird automatisch als Edge Functions optimiert, die keine Cold Starts haben und sofort starten

Zusätzlich bietet Vercel Funktionen wie:

• Automatische Leistungsüberwachung mit Next.js Speed Insights
• Automatisches HTTPS und SSL-Zertifikate
• Automatische CI/CD (über GitHub, GitLab, Bitbucket etc.)
• Unterstützung für Umgebungsvariablen
• Unterstützung für Benutzerdefinierte Domains
• Unterstützung für Bildoptimierung mit next/image
• Sofortige globale Bereitstellungen via git push

Stellen Sie eine Next.js-Anwendung auf Vercel bereit, um es kostenlos auszuprobieren.

Selbstgehostet

Sie können Next.js selbst hosten mit Unterstützung für alle Funktionen unter Verwendung von Node.js oder Docker. Sie können auch einen statischen HTML-Export durchführen, der einige Einschränkungen hat.

Node.js-Server

Next.js kann auf jedem Hosting-Anbieter bereitgestellt werden, der Node.js unterstützt. Zum Beispiel AWS EC2 oder ein DigitalOcean Droplet.

Stellen Sie zunächst sicher, dass Ihr package.json die Skripte "build" und "start" enthält:

{
  "scripts": {
    "dev": "next dev",
    "build": "next build",
    "start": "next start"
  }
}

Führen Sie dann npm run build aus, um Ihre Anwendung zu bauen. Starten Sie abschließend npm run start, um den Node.js-Server zu starten. Dieser Server unterstützt alle Funktionen von Next.js.

Wenn Sie next/image verwenden, ziehen Sie die Installation von sharp in Betracht, um eine leistungsfähigere Bildoptimierung in Ihrer Produktionsumgebung zu erreichen, indem Sie npm install sharp in Ihrem Projektverzeichnis ausführen. Auf Linux-Plattformen erfordert sharp möglicherweise zusätzliche Konfiguration, um übermäßigen Speicherverbrauch zu verhindern.

Docker-Image

Next.js kann auf jedem Hosting-Anbieter bereitgestellt werden, der Docker-Container unterstützt. Sie können diesen Ansatz verwenden, wenn Sie auf Container-Orchestratoren wie Kubernetes oder HashiCorp Nomad bereitstellen oder wenn Sie auf einem einzelnen Knoten in einem Cloud-Anbieter ausführen.

1. Installieren Sie Docker auf Ihrem Rechner
2. Klonen Sie das with-docker-Beispiel
3. Bauen Sie Ihren Container: docker build -t nextjs-docker .
4. Führen Sie Ihren Container aus: docker run -p 3000:3000 nextjs-docker

Wenn Sie verschiedene Umgebungsvariablen für mehrere Umgebungen benötigen, sehen Sie sich unser with-docker-multi-env-Beispiel an.

Statischer HTML-Export

Wenn Sie einen statischen HTML-Export Ihrer Next.js-App durchführen möchten, folgen Sie den Anweisungen in unserer Dokumentation zum statischen HTML-Export.

Andere Dienste

Die folgenden Dienste unterstützen Next.js v12+. Unten finden Sie Beispiele oder Anleitungen, um Next.js auf jedem Dienst bereitzustellen.

Verwalteter Server

• AWS Copilot
• Digital Ocean App Platform
• Google Cloud Run
• Heroku
• Railway
• Render

Gut zu wissen: Es gibt auch verwaltete Plattformen, die die Verwendung einer Dockerfile ermöglichen, wie im obigen Beispiel gezeigt.

Nur statisch

Die folgenden Dienste unterstützen nur die Bereitstellung von Next.js mit output: 'export'.

• GitHub Pages

Sie können die Ausgabe von output: 'export' auch manuell auf jedem statischen Hosting-Anbieter bereitstellen, oft über Ihre CI/CD-Pipeline wie GitHub Actions, Jenkins, AWS CodeBuild, Circle CI, Azure Pipelines und mehr.

Serverless

• AWS Amplify
• Azure Static Web Apps
• Cloudflare Pages
• Firebase
• Netlify
• Terraform
• SST

Gut zu wissen: Nicht alle Serverless-Anbieter implementieren die Next.js Build API von next start. Bitte überprüfen Sie beim Anbieter, welche Funktionen unterstützt werden.

Automatische Updates

Wenn Sie Ihre Next.js-Anwendung bereitstellen, möchten Sie die neueste Version sehen, ohne neu laden zu müssen.

Next.js lädt automatisch die neueste Version Ihrer Anwendung im Hintergrund beim Routing. Für Client-seitige Navigationen fungiert next/link vorübergehend als normales <a>-Tag.

Gut zu wissen: Wenn eine neue Seite (mit einer alten Version) bereits von next/link prefetched wurde, verwendet Next.js die alte Version. Die Navigation zu einer Seite, die nicht prefetched wurde (und nicht auf CDN-Ebene zwischengespeichert ist), lädt die neueste Version.

Manuelles Graceful Shutdown

Beim Selbsthosting möchten Sie möglicherweise Code ausführen, wenn der Server mit SIGTERM oder SIGINT-Signalen herunterfährt.

Sie können die Umgebungsvariable NEXT_MANUAL_SIG_HANDLE auf true setzen und dann einen Handler für dieses Signal in Ihrer _document.js-Datei registrieren. Sie müssen die Umgebungsvariable direkt im package.json-Skript registrieren, nicht in der .env-Datei.

Gut zu wissen: Manuelle Signalbehandlung ist in next dev nicht verfügbar.

{
  "scripts": {
    "dev": "next dev",
    "build": "next build",
    "start": "NEXT_MANUAL_SIG_HANDLE=true next start"
  }
}

if (process.env.NEXT_MANUAL_SIG_HANDLE) {
  // dies sollte in Ihrem benutzerdefinierten _document hinzugefügt werden
  process.on('SIGTERM', () => {
    console.log('Received SIGTERM: ', 'cleaning up')
    process.exit(0)
  })

  process.on('SIGINT', () => {
    console.log('Received SIGINT: ', 'cleaning up')
    process.exit(0)
  })
}