Next.js einbinden

Mit der Firebase CLI können Sie Ihre Next.js-Webanwendungen bei Firebase bereitstellen und mit Firebase Hosting ausliefern. 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, sollten Sie sich mit den folgenden Anforderungen und Optionen vertraut machen:

  • 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 Befehl zum Initialisieren über die Befehlszeile aus und folgen Sie der Anleitung: 

    firebase init hosting

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

  4. Wählen Sie das Verzeichnis der Hostingquelle 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

Nachdem Sie Firebase initialisiert haben, können Sie statische Inhalte mit dem Standardbefehl für die Bereitstellung bereitstellen:

firebase deploy

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

Dynamischen Content vorab rendern

Die Firebase CLI erkennt die Verwendung 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, sollten Sie vor der Verwendung des Produkts isSupported() prüfen, 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 Weiterleitung, ein Rewrite oder ein Header von Next.js nicht in einen entsprechenden Firebase Hosting-Header umgewandelt werden kann, wird eine Funktion erstellt – auch wenn Sie keine Bildoptimierung oder SSR verwenden.

Optional: Firebase Authentication einbinden

Das web-framework-kompatible Firebase-Bereitstellungstool hält den Client- und Serverstatus automatisch mithilfe von Cookies synchron. Es gibt einige 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);