Next.js einbinden

Mit der Firebase-CLI können Sie Ihre Next.js-Web-Apps in Firebase bereitstellen und mit Firebase Hosting bereitstellen. Die CLI berücksichtigt Ihre Next.js-Einstellungen und übersetzt sie in Firebase-Einstellungen. Dazu ist von Ihrer Seite aus keine oder nur eine minimale zusätzliche Konfiguration erforderlich. Wenn Ihre App dynamische serverseitige Logik enthält, wird diese Logik mit der CLI in Cloud Functions for Firebase bereitgestellt.

Hinweis

Bevor Sie mit der Bereitstellung Ihrer App in Firebase beginnen, sollten Sie sich die folgenden Anforderungen und Optionen ansehen:

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

  • Optional: Abrechnung für Ihr Firebase-Projekt aktiviert (erforderlich, wenn Sie SSR verwenden möchten)

  • Optional: Verwenden Sie die experimentelle ReactFire-Bibliothek, um von ihren Firebase-freundlichen 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 CLI die Vorschau für Web-Frameworks: 
    firebase experiments:enable webframeworks

  2. Führen Sie den Initialisierungsbefehl über die CLI aus und folgen Sie dann 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 Hosting-Quellverzeichnis aus. Wenn es sich um eine vorhandene Next.js-App handelt, wird der CLI-Prozess abgeschlossen und Sie können mit dem nächsten Abschnitt fortfahren.

  5. Wenn Sie dazu aufgefordert werden, wählen Sie Next.js aus.

Statische Inhalte bereitstellen

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

firebase deploy

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

Dynamische Inhalte vorrendern

Die Firebase-CLI erkennt die Verwendung von getStaticProps und getStaticPaths.

Optional: Firebase JS SDK einbinden

Wenn Sie Firebase JS SDK-Methoden sowohl in Server- als auch in Client-Bundles einbinden, sollten Sie Laufzeitfehler vermeiden, indem Sie isSupported() prüfen, bevor Sie das Produkt verwenden. Nicht alle Produkte werden in allen Umgebungen unterstützt.

um dies automatisch zu erledigen.

Optional: Firebase Admin SDK einbinden

Admin SDK-Bundles schlagen fehl, wenn sie in Ihren Browser-Build aufgenommen werden. Verweisen Sie nur innerhalb von getStaticProps und getStaticPaths darauf.

Vollständig dynamische Inhalte bereitstellen (SSR)

Die Firebase-CLI erkennt die Verwendung von getServerSideProps. In solchen Fällen werden Funktionen mit der CLI in 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 Verwendung von Next.js Image Optimization wird unterstützt, löst aber die Erstellung einer Funktion (in Cloud Functions for Firebase) aus, auch wenn Sie kein SSR verwenden.

Weiterleitungen, Umschreibungen und Header

Die Firebase-Befehlszeile berücksichtigt Weiterleitungen, Neuschreibungen und Headern in next.config.js und konvertiert sie bei der Bereitstellung in die entsprechenden Firebase Hosting-Konfigurationen. Wenn eine Next.js-Weiterleitung, ‑Umschreibung oder ‑Kopfzeile nicht in eine entsprechende Firebase Hosting-Kopfzeile konvertiert werden kann, wird eine Funktion erstellt – auch wenn Sie keine Bildoptimierung oder SSR verwenden.

Optional: In Firebase Authentication einbinden

Die Firebase-Bereitstellungstools, die das Web-Framework kennen, sorgen automatisch dafür, dass Client- und Serverstatus mithilfe von Cookies synchronisiert werden. Es gibt einige Methoden, mit denen Sie in SSR auf den Authentifizierungskontext zugreifen können:

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