Next.js einbinden

Mit der Firebase CLI können Sie Ihre Next.js-Webanwendungen in Firebase bereitstellen und mit Firebase Hosting bereitstellen.

Statische Inhalte bereitstellen

Nach der Initialisierung von Firebase können Sie statische Inhalte mit dem Standardbefehl für die Bereitstellung bereitstellen:

firebase deploy

Wenn Ihre Anwendung dynamische serverseitige Logik enthält, stellt die CLI diese Logik in Cloud Functions for Firebase bereit. Sie können Ihre bereitgestellte Anwendung ansehen auf der zugehörigen Live-Website.

Dynamische Inhalte vorab rendern

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

Optional: In das 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 vor der Verwendung des Produkts isSupported() prüfen. Nicht alle Produkte werden in allen Umgebungen unterstützt.

Optional: In das Firebase Admin SDK einbinden

Admin SDK-Bundles führen zu Fehlern, wenn sie in Ihren Browser-Build aufgenommen werden. Verweisen Sie nur in getStaticProps und getStaticPathsauf sie.

Vollständig dynamische Inhalte bereitstellen (SSR)

Die Firebase CLI erkennt die Verwendung von getServerSideProps. In solchen Fällen stellt die CLI Funktionen in Cloud Functions for Firebase bereit, um dynamischen Servercode auszuführen. Informationen zu diesen Funktionen, z. B. ihre Domain und Laufzeit konfiguration, finden Sie in der Firebase Console.

Verhalten mit Hosting konfigurierennext.config.js

Bildoptimierung

Die Next.js-Bildoptimierung wird unterstützt, löst aber auch dann die Erstellung einer Funktion (in Cloud Functions for Firebase) aus, wenn Sie kein SSR verwenden.

Weiterleitungen, Umschreibungen und Header

Die Firebase CLI berücksichtigt Weiterleitungen, Umschreibungen und Header in next.config.js, konvertiert sie bei der Bereitstellung in die entsprechenden Firebase Hosting Konfigurationen. Wenn eine Next.js-Weiterleitung, -Umschreibung oder ein Header nicht in einen entsprechenden Firebase Hosting Header konvertiert werden kann, wird eine Funktion erstellt, auch wenn Sie keine Bildoptimierung oder kein SSR verwenden.

Optional: In Firebase Authentication einbinden

Mit den webframework-fähigen Firebase-Bereitstellungstools werden Client- und Serverstatus mithilfe von Cookies automatisch synchronisiert. Es gibt einige Methoden, um auf den Authentifizierungskontext in SSR zuzugreifen:

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