Integrieren Sie Next.js

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

  1. Aktivieren Sie in der Firebase-CLI die Web-Frameworks-Vorschau:
    firebase experiments:enable webframeworks

  2. Führen Sie den Initialisierungsbefehl über die CLI aus und befolgen Sie dann die Anweisungen:

    firebase init hosting

  3. Beantworten Sie die Frage „Möchten Sie ein Webframework verwenden? (experimentell)“ mit Ja.

  4. 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.

  5. 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 in getServerSideProps 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);