next firebase ssr

next.js + firebase + getServersideprops

โครงการนี้แสดงให้เห็นถึงวิธีการใช้การเรนเดอร์ฝั่งเซิร์ฟเวอร์ที่ได้รับการรับรองความถูกต้องด้วย next.js และ firebase uthentication

อัปเดต 19 พฤศจิกายน 2563: ข้อผิดพลาดได้รับการแก้ไขซึ่งโทเค็น Firebase จะหมดอายุหลังจากผ่านไปหนึ่งชั่วโมงโดยไม่ได้รับการรีเฟรช ตอนนี้โทเค็นทั้งหมดจะถูกรีเฟรชทุก ๆ 10 นาที

อัปเดต 9 พฤศจิกายน 2563: repo นี้ได้รับการปรับปรุงเพื่อใช้ฟังก์ชั่นการเปลี่ยนเส้นทางที่แนะนำใน [email protected] ขณะนี้คุณต้องอยู่ในการเปิด canary ของ Next สำหรับวิธีการทำงานนี้ ( yarn add next@canary )

รุ่น

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

เอกสาร

คำแนะนำแบบเต็มและเอกสารประกอบที่นี่: การแสดงผลฝั่งเซิร์ฟเวอร์ที่ผ่านการรับรองความถูกต้องด้วย next.js และ firebase

วิธีใช้

เพื่อเรียกใช้ตัวอย่างนี้:

• โคลน repo: git clone [email protected]:vriad/next-firebase-ssr.git
• นำทางไปยังไดเรกทอรี: cd next-firebase-ssr
• ติดตั้งการพึ่งพา: yarn
• สร้างโครงการ Firebase หากคุณยังไม่ได้ทำ ตรวจสอบให้แน่ใจว่าคุณเข้าไปในแท็บการรับรองความถูกต้องในคอนโซลไปที่ "วิธีการลงชื่อเข้าใช้" และเปิดใช้งาน "อีเมล/รหัสผ่าน"
• เพิ่มข้อมูลรับรองไคลเอนต์ Firebase ของคุณไปยัง firebaseClient.ts หากต้องการรับสิ่งเหล่านี้ไปที่คอนโซล Firebase> เปิดโครงการของคุณ> ไอคอนเกียร์> การตั้งค่าโครงการ> ทั่วไป> แอพของคุณ> ตัวอย่าง Firebase SDK> คลิกปุ่มตัวเลือก "config"> คัดลอก/วาง
• เพิ่มข้อมูลรับรองบัญชี (ผู้ดูแลระบบ) ของคุณในโครงการ ในการทำเช่นนี้ให้ไปที่คอนโซล Firebase> เปิดโครงการของคุณ> คลิกไอคอนเกียร์> การตั้งค่าโครงการ> บัญชีบริการ> คลิก node.js> สร้างคีย์ส่วนตัวใหม่ เปิดไฟล์ JSON ที่ดาวน์โหลด จากนั้นสร้างสำเนาของ .env.local.example และเปลี่ยนชื่อเป็น .env.local นี่คือไฟล์ที่คุณจะใส่ข้อมูลรับรอง Firebase ลับของคุณ คัดลอก/วางค่าจากไฟล์คีย์ส่วนตัว JSON ไปยังไฟล์ .env.local ใหม่: privateKey กลายเป็น PRIVATE_KEY , project_id กลายเป็น PROJECT_ID และ clientEmail กลายเป็น CLIENT_EMAIL
• เรียกใช้ yarn dev
• ไปที่ localhost:3000