Mit der Firebase-Befehlszeile können Sie Ihre Next.js-Web-Apps in Firebase bereitstellen und mit Firebase Hosting ausliefern. Die Befehlszeile berücksichtigt Ihre Next.js-Einstellungen und werden sie in Firebase-Einstellungen übertragen, ohne dass zusätzliche Konfigurationsschritte erforderlich sind. Ihre Rolle. Wenn Ihre Anwendung dynamische serverseitige Logik enthält, stellt die Befehlszeile Folgendes bereit: Logik in Cloud Functions for Firebase. Die neueste unterstützte Next.js-Version ist 13.4.7.
Hinweis
Bevor Sie Ihre App in Firebase bereitstellen, sehen Sie sich die folgenden Anforderungen und Optionen an:
- Firebase-Befehlszeile 12.1.0 oder höher. Achten Sie darauf, Befehlszeile installieren mit Ihrer bevorzugten Methode.
Optional: Abrechnung für Ihr Firebase-Projekt aktiviert (erforderlich, wenn Sie SSR nutzen möchten)
Optional: Nutzen Sie die experimentelle ReactFire-Bibliothek, um von deren Für Firebase optimierte Funktionen
Firebase initialisieren
Initialisieren Sie zuerst Firebase für Ihr Framework-Projekt.
Verwenden Sie die Firebase-Befehlszeile für ein neues Projekt oder ändern Sie firebase.json
für ein
Projekt arbeiten.
Neues Projekt initialisieren
- Aktivieren Sie in der Firebase-Befehlszeile die Vorschau der Web-Frameworks:
firebase experiments:enable webframeworks
Führen Sie den Initialisierungsbefehl über die Befehlszeile aus und folgen Sie der Anleitung:
firebase init hosting
Antworten Sie auf „Möchten Sie ein Web-Framework verwenden? (experimentell)"
Wählen Sie Ihr Quellverzeichnis für das Hosting aus. Handelt es sich um eine vorhandene Next.js-App, der CLI-Prozess abgeschlossen und Sie können mit dem nächsten Abschnitt fortfahren.
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 Standard- Bereitstellungsbefehl:
firebase deploy
Sie können sich Ihre bereitgestellte Anwendung auf der Live-Website ansehen.
Dynamische Inhalte vorab rendern
Die Firebase-Befehlszeile erkennt die Nutzung von getStaticProps und getStaticPaths.
Optional: Integration in das Firebase JS SDK
Wenn Sie Firebase JS SDK-Methoden in Server- und Client-Bundles einbinden,
auf Laufzeitfehler, indem Sie isSupported()
prüfen, bevor Sie das Produkt verwenden.
Nicht alle Produkte sind
in allen Umgebungen unterstützt.
Optional: Firebase Admin SDK einbinden
Admin SDK-Bundles schlagen fehl, wenn sie in Ihrem Browser-Build enthalten sind. sich darauf beziehen nur innerhalb von getStaticProps und getStaticPaths.
Vollständig dynamische Inhalte bereitstellen (SSR)
Die Firebase-Befehlszeile erkennt die Nutzung von getServerSideProps. In solchen Fällen stellt die Befehlszeile Funktionen in Cloud Functions for Firebase bereit, um dynamische Servercode. Sie können Informationen zu diesen Funktionen aufrufen, z. B. die Domain und Laufzeit in der Firebase Console konfigurieren.
Verhalten von Hosting mit next.config.js
konfigurieren
Bildoptimierung
Next.js-Bildoptimierung verwenden wird unterstützt, löst aber die Erstellung einer Funktion aus. (in Cloud Functions for Firebase), auch wenn Sie keine SSR verwenden.
Weiterleitungen, Umschreibungen und Header
Die Firebase-Befehlszeile berücksichtigt
Weiterleitungen,
Umformulierungen und
Header in
next.config.js
, wodurch sie in ihre
entsprechende Firebase Hosting-Konfiguration zum Zeitpunkt der Bereitstellung. Wenn ein
Next.js-Weiterleitung, -Umschreibung oder -Header können nicht in ein Äquivalent konvertiert werden
Firebase Hosting-Header verwendet, Fallbacks und erstellt eine Funktion, selbst wenn Sie
keine Bildoptimierung oder SSR verwenden.
Optional: In Firebase Authentication einbinden
Die auf dem Web-Framework basierenden Firebase-Bereitstellungstools Client- und Serverstatus mithilfe von Cookies synchron. Es gibt verschiedene Methoden, für den Zugriff auf den Authentifizierungskontext in SSR:
- Das Express-
res.locals
-Objekt enthält optional eine authentifizierte Firebase App-Instanz (firebaseApp
) und den aktuell angemeldeten Nutzer (currentUser
). Auf diese Daten kann übergetServerSideProps
zugegriffen werden. - Der authentifizierte Name der Firebase-App wird in der Routenabfrage angegeben
(
__firebaseAppName
). Das ermöglicht die manuelle Integration im Kontext:
// get the authenticated Firebase App
const firebaseApp = getApp(useRouter().query.__firebaseAppName);