Next.js einbinden

Über die Firebase-Befehlszeile können Sie Ihre Next.js-Webanwendungen in Firebase und mit Firebase Hosting bereitstellen. Die CLI berücksichtigt Ihre Next.js-Einstellungen und übersetzt sie in Firebase-Einstellungen, ohne dass Sie zusätzliche Konfigurationsschritte ausführen müssen. Wenn Ihre App dynamische serverseitige Logik enthält, wird diese Logik von der CLI auf Cloud Functions for Firebase bereitgestellt. Die neueste unterstützte Next.js-Version ist 13.4.7.

Hinweis

Bevor Sie mit der Bereitstellung Ihrer App in Firebase beginnen, prüfen Sie die folgenden Anforderungen und Optionen:

  • Firebase CLI-Version 12.1.0 oder höher Installieren Sie die Befehlszeile mit der gewünschten Methode.

  • Optional: Abrechnung in Ihrem Firebase-Projekt aktiviert (erforderlich, wenn Sie SSR verwenden möchten)

  • Optional: Verwenden Sie die experimentelle ReactFire-Bibliothek, um von den Firebase-kompatiblen Funktionen zu profitieren.

Firebase initialisieren

Initialisieren Sie zuerst Firebase für Ihr Framework-Projekt. Verwenden Sie die Firebase CLI für ein neues Projekt oder ändern Sie firebase.json für ein vorhandenes Projekt.

Neues Projekt initialisieren

  1. Aktivieren Sie in der Firebase-Befehlszeile die Vorschau der Web-Frameworks: 
    firebase experiments:enable webframeworks

  2. Führen Sie den Initialisierungsbefehl über die Befehlszeile aus und folgen Sie der Anleitung: 

    firebase init hosting

  3. Antworten Sie auf „Möchten Sie ein Web-Framework verwenden? (experimentell)“

  4. Wählen Sie Ihr Quellverzeichnis für das Hosting aus. Wenn es sich um eine vorhandene Next.js-Anwendung handelt, wird der Befehlszeilenprozess abgeschlossen und Sie können mit dem nächsten Abschnitt fortfahren.

  5. Wählen Sie bei Aufforderung „Next.js“ aus.

Statische Inhalte bereitstellen

Nach der Initialisierung von Firebase können Sie mit dem Standardbereitstellungsbefehl statische Inhalte bereitstellen:

firebase deploy

Sie können sich Ihre bereitgestellte Anwendung auf der Live-Website ansehen.

Dynamischen Content vorab rendern

Die Firebase-Befehlszeile erkennt die Nutzung von getStaticProps und getStaticPaths.

Optional: Integration mit dem Firebase JS SDK

Wenn Sie Firebase JS SDK-Methoden sowohl in Server- als auch in Client-Bundles einbinden, prüfen Sie vor der Verwendung des Produkts isSupported(), um Laufzeitfehler zu vermeiden. Nicht alle Produkte werden in allen Umgebungen unterstützt.

Optional: Integration mit dem Firebase Admin SDK

Admin SDK-Bundles funktionieren nicht, wenn sie in Ihren Browser-Build eingefügt werden. Sie dürfen nur in getStaticProps und getStaticPaths verwendet werden.

Vollständig dynamische Inhalte bereitstellen (SSR)

Die Firebase-Befehlszeile erkennt die Verwendung von getServerSideProps. In solchen Fällen werden über die Befehlszeile Funktionen auf Cloud Functions for Firebase bereitgestellt, um dynamischen Servercode auszuführen. Informationen zu diesen Funktionen, z. B. ihre Domain- und Laufzeitkonfiguration, finden Sie in der Firebase Console.

Hosting-Verhalten mit next.config.js konfigurieren

Bildoptimierung

Die Next.js-Bildoptimierung wird unterstützt, aber es wird eine Funktion (in Cloud Functions for Firebase) erstellt, auch wenn Sie kein SSR verwenden.

Weiterleitungen, Umschreibungen und Header

Die Firebase-Befehlszeile berücksichtigt Weiterleitungen, Umschreibungen und Header in next.config.js und wandelt sie beim Bereitstellen in die entsprechende Firebase Hosting-Konfiguration um. Wenn eine Next.js-Weiterleitung, -Umschreibung oder -Header nicht in einen entsprechenden Firebase Hosting-Header konvertiert werden kann, wird eine Funktion erstellt, auch wenn Sie keine Bildoptimierung oder SSR verwenden.

Optional: In Firebase Authentication einbinden

Das web-framework-kompatible Firebase-Bereitstellungstool hält den Client- und Serverstatus automatisch mithilfe von Cookies synchron. Es gibt verschiedene Methoden, um auf den Authentifizierungskontext in SSR zuzugreifen:

  • Das Express-res.locals-Objekt enthält optional eine authentifizierte Firebase App-Instanz (firebaseApp) und den aktuell angemeldeten Nutzer (currentUser). Auf diese Daten kann über getServerSideProps zugegriffen werden.
  • Der Name der authentifizierten Firebase-App wird in der Routenabfrage (__firebaseAppName) angegeben. Dies ermöglicht eine manuelle Integration im Kontext:
// get the authenticated Firebase App
const firebaseApp = getApp(useRouter().query.__firebaseAppName);