next firebase ssr

Next.js + firebase + getServerSideprops

Proyek ini menunjukkan cara mengimplementasikan rendering sisi server yang diautentikasi dengan otentikasi Next.js dan Firebase.

UPDATE 19 November 2020: Bug telah diperbaiki di mana token Firebase akan kedaluwarsa setelah satu jam tanpa disegarkan. Semua token sekarang dipaksa disegarkan setiap 10 menit.

UPDATE 9 November 2020: Repo ini telah diperbarui untuk menggunakan fungsionalitas pengalihan yang diperkenalkan di [email protected] . Saat ini Anda harus berada di canary Release Next for This Short To Work ( yarn add next@canary ).

Versi

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

Dokumentasi

Walkthrough dan dokumentasi lengkap di sini: rendering sisi server yang diautentikasi dengan Next.js dan Firebase.

Cara menggunakan

Untuk menjalankan contoh ini:

• Kloning repo: git clone [email protected]:vriad/next-firebase-ssr.git
• Navigasi ke Direktori: cd next-firebase-ssr
• Instal dependensi: yarn
• Buat proyek Firebase jika Anda belum melakukannya. Pastikan Anda masuk ke tab Otentikasi di konsol, buka "Metode Masuk", dan Aktifkan "Email/Kata Sandi"
• Tambahkan kredensial klien Firebase Anda ke firebaseClient.ts . Untuk mendapatkan ini, buka Firebase Console> Buka Proyek Anda> Ikon Gear> Pengaturan Proyek> Umum> Aplikasi Anda> Cuplikan Firebase SDK> Klik tombol Radio "Config"> Salin/Tempel.
• Tambahkan kredensial Akun Layanan Anda (Admin) ke proyek. Untuk melakukan ini, buka Firebase Console> Buka Proyek Anda> Klik Ikon Gear> Pengaturan Proyek> Akun Layanan> Klik Node.js> Hasilkan Kunci Pribadi Baru. Buka file JSON yang diunduh. Kemudian buat salinan .env.local.example dan ganti namanya menjadi .env.local . Ini adalah file di mana Anda akan menempatkan kredensial Firebase rahasia Anda. Salin/Tempel nilai -nilai dari file JSON kunci pribadi ke file .env.local baru: privateKey menjadi PRIVATE_KEY , project_id menjadi PROJECT_ID , dan clientEmail menjadi CLIENT_EMAIL .
• Jalankan yarn dev
• Pergi ke localhost:3000