Download next blog firestore - Download Kode Sumber next blog firestore

next blog firestore

Kode Sumber AI

1.0.0

Unduh

Blog berikutnya Firestore

Blog ini menggunakan Next.js untuk SSR & Firebase Firestore API untuk menyimpan dan mengambil data. Buat dan edit konten Anda dalam sistem manajemen konten khusus sederhana yang dibangun dengan React, Mobx State Tree, dan komponen gaya.

Klone repo ini dan gunakan sebagai titik awal untuk membuat blog mewah Anda sendiri.

Tumpukan Teknologi:

Bereaksi
Next.js
Firebase Firestore & Auth
Komponen bergaya
Mobx-state-tree
Desain semut
Marksy
Eslint
Lebih cantik
Webpack
Husky & Lint-Stag

Apa yang Anda dapatkan:

Posting Feed
Posting unggulan
Posting dengan tag dan kategori
Dukungan multi bahasa
Dukungan multi penulis
Markdown dengan kemampuan untuk menggunakan komponen reaksi khusus
CMS sederhana dan nyaman terinspirasi oleh hantu
CMS dilindungi oleh Firebase Auth
Respons cepat dan ramah SEO dengan SSR
Hasil Bagus di Mercusuar

Memulai

Langkah 1. Buat Akun Firebase

Langkah 2. Metode Otentikasi Pengaturan

Klik Mengatur Metode Masuk di Bagian Otentikasi.
Aktifkan hanya penyedia otentikasi google.
Tambahkan domain Anda (jika Anda memilikinya) ke domain resmi .

Langkah 3. Buat database Firestore

Buka bagian Basis Data dan buat instance Firestore.

Firestore masih dalam beta, tetapi tidak membuatnya kurang mengagumkan.

Langkah 4. Konfigurasi Database.

Buka bagian Aturan di basis data Anda dan Konfigurasi Tempel dari .Firebase-aturan di Root Proyek.
Publikasikan aturan baru.

Langkah 5. Siapkan tombol rahasia Firebase untuk aplikasi kami.

Buat .env pada akar proyek. Jangan melakukan file ini. Ini adalah data pribadi yang tidak boleh tersedia untuk semua orang.
Buka pengaturan proyek di Firebase Console (klik ikon Gear di sebelah Tinjauan Proyek ).
Salin data dari halaman ini ke .env dalam format berikut:

F_PROJECT_ID= < your Project ID >
F_AUTH_DOMAIN= < your Project ID > .firebaseapp.com
F_API_KEY= < your Web API Key >

Langkah 6. Mengatur Kunci SDK Admin Firebase untuk mengimpor/mengekspor data dari database.

Agar dapat menginisialisasi database dengan benih awal, kita perlu menghasilkan kunci layanan admin firebase pribadi.

Pergi ke Pengaturan Proyek > Akun Layanan dan klik Hasilkan tombol Kunci Pribadi Baru .
Simpan file yang diunduh sebagai firebase-service-key.json di root proyek. ** Jangan melakukan file ini. Itu ditambahkan ke .gitignore secara default.

Langkah 7. Inisialisasi database dengan data awal.

Kami hampir selesai. Mari kita inisialisasi database kita dengan data awal.

yarn
yarn run seed

Langkah 8. Indeks Database Pengaturan.

Kami perlu indeks pengaturan secara manual di database Firestore kami untuk dapat membuat permintaan istirahat ke firebase kami.

Buka database > indeks dan buat indeks berikut.

Langkah 9. Jalankan blog secara lokal.

Kami siap meluncurkan blog kami secara lokal.

yarn dev

Blog sudah berjalan dan berjalan di http: // localhost: 3000.

Langkah 10. Masuk ke Bagian Admin.

Tunggu .. tapi bagaimana dengan bagian CMS?

Buka http: // localhost: 3000/admin dan klik "klik untuk mulai menulis" .
Masuk dengan akun Google Anda di jendela popup.
Pergi ke Firebase Console dan tambahkan hak penulis untuk akun yang baru saja Anda masuki.
- Salin UID Pengguna di bagian Otentikasi .
- Buat koleksi authors dalam database
- Buat catatan dalam koleksi authors , di mana documentId adalah UID dari pengguna dan name adalah id pengguna dalam file config.js .