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 App dynamische serverseitige Logik enthält, stellt die CLI diese Logik in Cloud Functions for Firebase bereit. Sie können Ihre bereitgestellte App auf der zugehörigen Live-Website ansehen.
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 schlagen fehl, 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
Image-Optimierung
Die Image-Optimierung von Next.js 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, und konvertiert sie zur Bereitstellungszeit 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 Image-Optimierung oder kein SSR verwenden.
Optional: In Firebase Authentication einbinden
Mit den web-framework-aware Firebase-Bereitstellungstools werden Client- und Serverstatus mithilfe von Cookies automatisch synchronisiert. Es gibt einige Methoden für den Zugriff auf den Authentifizierungskontext in SSR:
- Das Express-Objekt
res.localsenthält optional eine authentifizierte Firebase-App-Instanz (firebaseApp) und den aktuell angemeldeten Nutzer (currentUser). Darauf kann ingetServerSidePropszugegriffen 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);