Next.js einbinden

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

Statische Inhalte bereitstellen

Nach der Initialisierung von Firebase können Sie statische Inhalte mit dem Standardbereitstellungsbefehl bereitstellen:

firebase deploy

Wenn Ihre App dynamische serverseitige Logik enthält, wird diese Logik mit der CLI in Cloud Functions for Firebase bereitgestellt. Sie können sich Ihre bereitgestellte App auf der zugehörigen Live-Website ansehen.

Dynamische Inhalte vorrendern

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

Optional: 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 isSupported() prüfen, bevor Sie das Produkt verwenden. Nicht alle Produkte werden in allen Umgebungen unterstützt.

Optional: Firebase Admin SDK einbinden

Admin SDK-Bundles schlagen fehl, wenn sie in Ihren Browser-Build aufgenommen werden. Verweisen Sie nur innerhalb von getStaticProps und getStaticPaths darauf.

Vollständig dynamische Inhalte bereitstellen (SSR)

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

Hosting-Verhalten mit next.config.js konfigurieren

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-Befehlszeile berücksichtigt Weiterleitungen, Neuschreibungen und Headern in next.config.js und konvertiert sie bei der Bereitstellung in die entsprechenden Firebase Hosting-Konfigurationen. Wenn eine Next.js-Weiterleitung, ‑Umschreibung oder ‑Kopfzeile nicht in eine entsprechende Firebase Hosting-Kopfzeile konvertiert werden kann, wird eine Funktion erstellt – auch wenn Sie keine Bildoptimierung oder SSR verwenden.

Optional: Mit Firebase Authentication integrieren

Die Firebase-Bereitstellungstools, die das Web-Framework kennen, sorgen automatisch dafür, dass Client- und Serverstatus mithilfe von Cookies synchronisiert werden. Es gibt einige Methoden, mit denen Sie in SSR auf den Authentifizierungskontext zugreifen können:

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