ผสานรวม Next.js

เมื่อใช้ Firebase CLI คุณจะทําให้เว็บแอป Next.js ใช้งานได้ใน Firebase และแสดงเว็บแอปด้วย Firebase Hosting ได้ CLI จะยึดตามการตั้งค่า Next.js และแปลงเป็นการตั้งค่า Firebase โดยที่คุณไม่ต้องทำการกําหนดค่าเพิ่มเติมเลยหรือน้อยมาก หากแอปมีตรรกะฝั่งเซิร์ฟเวอร์แบบไดนามิก CLI จะติดตั้งใช้งานตรรกะนั้นใน Cloud Functions for 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 จะติดตั้งใช้งานฟังก์ชันใน Cloud Functions for Firebase เพื่อเรียกใช้โค้ดเซิร์ฟเวอร์แบบไดนามิก คุณสามารถดูข้อมูลเกี่ยวกับฟังก์ชันเหล่านี้ เช่น โดเมนและการกำหนดค่ารันไทม์ ได้ในคอนโซล Firebase

กําหนดค่าลักษณะการทํางานของ Hosting ด้วย next.config.js

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

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

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

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

ไม่บังคับ: ผสานรวมกับการตรวจสอบสิทธิ์ Firebase

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

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