รวม Next.js

เมื่อใช้ Firebase CLI คุณสามารถปรับใช้เว็บแอป Next.js กับ Firebase และให้บริการด้วย Firebase Hosting CLI เคารพการตั้งค่า Next.js ของคุณและแปลเป็นการตั้งค่า Firebase โดยมีการกำหนดค่าเพิ่มเติมเป็นศูนย์หรือน้อยที่สุดในส่วนของคุณ หากแอปของคุณมีตรรกะฝั่งเซิร์ฟเวอร์แบบไดนามิก CLI จะปรับใช้ตรรกะนั้นกับฟังก์ชันคลาวด์สำหรับ Firebase Next.js เวอร์ชันล่าสุดที่รองรับคือ 13.4.7

ก่อนที่คุณจะเริ่ม

ก่อนที่คุณจะเริ่มปรับใช้แอปของคุณกับ Firebase โปรดตรวจสอบข้อกำหนดและตัวเลือกต่อไปนี้:

  • Firebase CLI เวอร์ชัน 12.1.0 หรือใหม่กว่า ตรวจสอบให้แน่ใจว่า ได้ติดตั้ง CLI โดยใช้วิธีที่คุณต้องการ
  • ทางเลือก: เปิดใช้งานการเรียกเก็บเงินในโปรเจ็กต์ Firebase ของคุณ (จำเป็นหากคุณวางแผนที่จะใช้ SSR)

  • ทางเลือก: ใช้ไลบรารี ReactFire รุ่นทดลองเพื่อรับประโยชน์จากฟีเจอร์ที่เป็นมิตรกับ Firebase

เริ่มต้น Firebase

ในการเริ่มต้น ให้เริ่มต้น Firebase สำหรับโปรเจ็กต์เฟรมเวิร์กของคุณ ใช้ Firebase CLI สำหรับโปรเจ็กต์ใหม่ หรือแก้ไข firebase.json สำหรับโปรเจ็กต์ที่มีอยู่

เริ่มต้นโครงการใหม่

  1. ใน Firebase CLI ให้เปิดใช้งานการแสดงตัวอย่างเฟรมเวิร์กเว็บ:
    firebase experiments:enable webframeworks
  2. รันคำสั่งการเริ่มต้นจาก CLI จากนั้นปฏิบัติตามพร้อมท์:

    firebase init hosting

  3. ตอบว่าใช่เป็น "คุณต้องการใช้เว็บเฟรมเวิร์กหรือไม่ (ทดลอง)"

  4. เลือกไดเร็กทอรีต้นทางโฮสติ้งของคุณ หากนี่เป็นแอป Next.js ที่มีอยู่ กระบวนการ CLI จะเสร็จสิ้น และคุณสามารถไปยังส่วนถัดไปได้

  5. หากได้รับแจ้ง ให้เลือก Next.js

ให้บริการเนื้อหาแบบคงที่

หลังจากเริ่มต้น Firebase แล้ว คุณสามารถให้บริการเนื้อหาแบบคงที่ได้ด้วยคำสั่งการปรับใช้มาตรฐาน:

firebase deploy

คุณสามารถ ดูแอปที่ปรับใช้ของคุณได้ บนเว็บไซต์ที่ใช้งานจริง

เนื้อหาแบบไดนามิกที่แสดงผลล่วงหน้า

Firebase CLI จะตรวจจับการใช้งาน getStaticProps และ getStaticPaths

ไม่บังคับ: ผสานรวมกับ Firebase JS SDK

เมื่อรวมเมธอด Firebase JS SDK ไว้ในบันเดิลเซิร์ฟเวอร์และไคลเอนต์ ให้ป้องกันข้อผิดพลาดรันไทม์โดยตรวจสอบ isSupported() ก่อนใช้งานผลิตภัณฑ์ ผลิตภัณฑ์บางชนิดไม่ได้ รับการสนับสนุนในทุกสภาพแวดล้อม

ไม่บังคับ: ผสานรวมกับ Firebase Admin SDK

ชุด Admin SDK จะล้มเหลวหากรวมอยู่ในรุ่นเบราว์เซอร์ของคุณ อ้างถึงพวกเขาเฉพาะภายใน getStaticProps และ getStaticPaths

ให้บริการเนื้อหาแบบไดนามิกเต็มรูปแบบ (SSR)

Firebase CLI จะตรวจจับการใช้งาน getServerSideProps ในกรณีเช่นนี้ CLI จะปรับใช้ฟังก์ชันกับฟังก์ชันคลาวด์สำหรับ Firebase เพื่อเรียกใช้โค้ดเซิร์ฟเวอร์แบบไดนามิก คุณสามารถดูข้อมูลเกี่ยวกับฟังก์ชันเหล่านี้ เช่น โดเมนและการกำหนดค่ารันไทม์ได้ใน คอนโซล Firebase

กำหนดค่าพฤติกรรมการโฮสต์ด้วย next.config.js

การเพิ่มประสิทธิภาพภาพ

รองรับการใช้ การเพิ่มประสิทธิภาพรูปภาพ Next.js แต่จะทริกเกอร์การสร้างฟังก์ชัน (ใน ฟังก์ชันคลาวด์สำหรับ Firebase ) แม้ว่าคุณจะไม่ได้ใช้ SSR ก็ตาม

การเปลี่ยนเส้นทาง เขียนซ้ำ และส่วนหัว

Firebase CLI เคารพ การเปลี่ยนเส้นทาง การ เขียนซ้ำ และ ส่วนหัว ใน next.config.js โดยแปลงเป็นการกำหนดค่า Firebase Hosting ที่เทียบเท่ากัน ณ เวลาปรับใช้ หากการเปลี่ยนเส้นทาง เขียนใหม่ หรือส่วนหัวของ Next.js ไม่สามารถแปลงเป็นส่วนหัว Firebase Hosting ที่เทียบเท่าได้ ส่วนหัวนั้นจะถอยกลับและสร้างฟังก์ชัน แม้ว่าคุณจะไม่ได้ใช้การเพิ่มประสิทธิภาพรูปภาพหรือ SSR ก็ตาม

ทางเลือก: ผสานรวมกับ Firebase Authentication

เครื่องมือการปรับใช้ Firebase ที่รับรู้ถึงเฟรมเวิร์กเว็บจะรักษาสถานะของไคลเอ็นต์และเซิร์ฟเวอร์ให้ตรงกันโดยอัตโนมัติโดยใช้คุกกี้ มีวิธีการบางอย่างที่ให้ไว้สำหรับการเข้าถึงบริบทการรับรองความถูกต้องใน SSR:

  • ออบเจ็กต์ Express res.locals จะมีตัวเลือกอินสแตนซ์ของแอป Firebase ที่ได้รับการรับรองความถูกต้อง ( firebaseApp ) และผู้ใช้ที่ลงชื่อเข้าใช้ในปัจจุบัน ( currentUser ) สามารถเข้าถึงได้ใน getServerSideProps
  • ชื่อแอป Firebase ที่ได้รับการรับรองความถูกต้องมีอยู่ในการสืบค้นเส้นทาง ( __firebaseAppName ) สิ่งนี้ทำให้สามารถรวมด้วยตนเองในขณะที่อยู่ในบริบท:
// get the authenticated Firebase App
const firebaseApp = getApp(useRouter().query.__firebaseAppName);