next firebase ssr

Weiter.js + Firebase + GetServersideProps

Dieses Projekt zeigt, wie authentifizierte serverseitige Rendering mit Next.js und Firebase Authentication implementiert werden.

UPDATE 19. November 2020: Ein Fehler wurde behoben, bei dem die Firebase -Token nach einer Stunde ohne Aktualisierung ablaufen würden. Alle Token sind jetzt alle 10 Minuten erfrischt.

Update 9. November 2020: Dieses Repo wurde aktualisiert, um die in [email protected] eingeführte Umleitungsfunktion zu verwenden. Derzeit müssen Sie in der canary Veröffentlichung von Next für diesen Arbeitsansatz sein ( yarn add next@canary ).

Versionen

• next@10
• react@17
• firebase@8
• [email protected]
• [email protected]

Dokumentation

Vollständige Walkthrough und Dokumentation hier: Authentifiziertes serverseitiges Rendering mit Next.js und Firebase.

Wie man benutzt

Um dieses Beispiel auszuführen:

• Klon The Repo: git clone [email protected]:vriad/next-firebase-ssr.git
• Navigieren Sie in das Verzeichnis: cd next-firebase-ssr
• Abhängigkeiten installieren: yarn
• Erstellen Sie ein Firebase -Projekt, wenn Sie es noch nicht getan haben. Stellen Sie sicher, dass Sie in die Registerkarte Authentifizierung in der Konsole gehen, zu "Anmeldemethode" gehen und "E-Mail/Passwort" aktivieren,
• Fügen Sie Ihre Firebase -Client -Anmeldeinformationen zu firebaseClient.ts hinzu. Um diese zu erhalten, gehen Sie zur Firebase -Konsole> Ihr Projekt> Zahnradsymbol> Projekteinstellungen> Allgemein> Ihre Apps> Firebase SDK -Snippet> Klicken Sie auf das Optionsfeld "Konfiguration"> kopieren/einfügen/einfügen.
• Fügen Sie Ihr Service -Account (Administrator-) Anmeldeinformationen dem Projekt hinzu. Gehen Sie dazu zur Firebase -Konsole> Ihr Projekt Öffnen> Klicken Sie auf das Symbol für Zahnrad> Projekteinstellungen> Servicekonten> Klicken Sie auf node.js> Neuen privaten Schlüssel generieren. Öffnen Sie die JSON -Datei, die heruntergeladen wird. Erstellen Sie dann eine Kopie von .env.local.example und benennen Sie sie in .env.local um. Dies ist die Datei, in der Sie Ihre geheimen Firebase -Anmeldeinformationen einsetzen. Kopieren/Fügen Sie die Werte aus der JSON -Datei private Schlüssel in die neue .env.local -Datei: privateKey wird PRIVATE_KEY , project_id PROJECT_ID und clientEmail CLIENT_EMAIL .
• Run yarn dev
• Gehen Sie zu localhost:3000