Next.js einbinden

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: Das Framework-fähige Hosting ist eine frühe öffentliche Vorschau. Das bedeutet, dass sich die Funktionalität in nicht abwärtskompatibler Weise ändern kann. Vorschau unterliegt keinem SLA und keiner Richtlinie zur Einstellung von Produkten und Diensten und wird möglicherweise oder keine Unterstützung erhalten.

Achtung : Für Entwickler, die eine Full-Stack-Next.js-App erstellen, ist Folgendes zu beachten: empfehlen Firebase App Hosting. Wenn Sie den Frameworks-Test in der Firebase CLI bereits verwenden, empfehlen „Abschluss“ bis App Hosting Mit App Hosting haben Sie eine einheitliche Lösung, mit der Sie alles von CDN bis hin zum serverseitigen Rendering verwalten können. Außerdem ist die GitHub-Integration verbessert.

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

1. Aktivieren Sie in der Firebase-Befehlszeile die Vorschau der Web-Frameworks:

   firebase experiments:enable webframeworks

2. Führen Sie den Initialisierungsbefehl über die Befehlszeile aus und folgen Sie der Anleitung:

   firebase init hosting

3. Antworten Sie auf „Möchten Sie ein Web-Framework verwenden? (experimentell)"

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

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

Tipp :Verwenden Sie ReactFire, das automatisch für Sie.

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.

Hinweis :Aus diesem Grund können die Bildoptimierung und Hosting-Vorschaukanäle funktionieren gut zusammen.

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 über getServerSideProps 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);