Mit der Firebase-CLI können Sie Ihre Next.js-Webanwendungen in Firebase bereitstellen und sie mit Firebase Hosting bereitstellen. Die CLI respektiert Ihre Next.js-Einstellungen und übersetzt sie ohne oder mit minimaler zusätzlicher Konfiguration Ihrerseits in Firebase-Einstellungen. Wenn Ihre App dynamische serverseitige Logik enthält, stellt die CLI diese Logik in Cloud Functions für Firebase bereit. Die neueste unterstützte Next.js-Version ist 13.4.7.
Bevor Sie beginnen
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. Stellen Sie sicher, dass Sie die CLI mit Ihrer bevorzugten Methode installieren .
Optional: Abrechnung für Ihr Firebase-Projekt aktiviert (erforderlich, wenn Sie SSR verwenden möchten)
Optional: Nutzen Sie die experimentelle ReactFire-Bibliothek, um von den Firebase-freundlichen Funktionen zu profitieren
Firebase initialisieren
Initialisieren Sie zunächst 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.
Initialisieren Sie ein neues Projekt
- Aktivieren Sie in der Firebase-CLI die Web-Frameworks-Vorschau:
firebase experiments:enable webframeworks
Führen Sie den Initialisierungsbefehl über die CLI aus und befolgen Sie dann die Anweisungen:
firebase init hosting
Beantworten Sie die Frage „Möchten Sie ein Webframework verwenden? (experimentell)“ mit Ja.
Wählen Sie Ihr Hosting-Quellverzeichnis. 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.
Wenn Sie dazu aufgefordert werden, wählen Sie Next.js.
Stellen Sie statische Inhalte bereit
Nach der Initialisierung von Firebase können Sie statische Inhalte mit dem Standard-Bereitstellungsbefehl bereitstellen:
firebase deploy
Sie können Ihre bereitgestellte App auf der Live-Site anzeigen .
Rendern Sie dynamische Inhalte vorab
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, schützen Sie sich vor Laufzeitfehlern, indem Sie isSupported()
überprüfen, bevor Sie das Produkt verwenden. Nicht alle Produkte werden in allen Umgebungen unterstützt .
Optional: Integration mit dem Firebase Admin SDK
Admin-SDK-Bundles schlagen fehl, wenn sie in Ihrem Browser-Build enthalten sind. Verweisen Sie nur innerhalb von getStaticProps und getStaticPaths auf sie.
Bereitstellen vollständig dynamischer Inhalte (SSR)
Die Firebase-CLI erkennt die Verwendung von getServerSideProps . In solchen Fällen stellt die CLI Funktionen für Cloud Functions für Firebase bereit, um dynamischen Servercode auszuführen. Sie können Informationen zu diesen Funktionen, z. B. ihre Domänen- und Laufzeitkonfiguration, in der Firebase-Konsole anzeigen.
Konfigurieren Sie das Hosting-Verhalten mit next.config.js
Bildoptimierung
Die Verwendung der Next.js-Bildoptimierung wird unterstützt, löst jedoch die Erstellung einer Funktion (in Cloud Functions for Firebase ) aus, auch wenn Sie SSR nicht verwenden.
Weiterleitungen, Umschreibungen und Header
Die Firebase-CLI berücksichtigt Umleitungen , Umschreibungen und Header in next.config.js
und konvertiert sie zum Zeitpunkt der Bereitstellung in die entsprechende entsprechende Firebase-Hosting-Konfiguration. Wenn eine Weiterleitung, ein Umschreiben oder ein Header von Next.js nicht in einen entsprechenden Firebase Hosting-Header konvertiert werden kann, greift es zurück und erstellt eine Funktion – auch wenn Sie keine Bildoptimierung oder SSR verwenden.
Optional: Integration mit Firebase-Authentifizierung
Das Web-Framework-fähige Firebase-Bereitstellungstool hält den Client- und Serverstatus mithilfe von Cookies automatisch synchron. Für den Zugriff auf den Authentifizierungskontext in SSR stehen einige Methoden zur Verfügung:
- Das Express-
res.locals
-Objekt enthält optional eine authentifizierte Firebase-App-Instanz (firebaseApp
) und den aktuell angemeldeten Benutzer (currentUser
). Darauf kann ingetServerSideProps
zugegriffen werden. - Der authentifizierte Firebase-App-Name wird in der Routenabfrage (
__firebaseAppName
) bereitgestellt. Dies ermöglicht eine manuelle Integration im Kontext:
// get the authenticated Firebase App
const firebaseApp = getApp(useRouter().query.__firebaseAppName);