ผสานรวม Next.js

เมื่อใช้ Firebase CLI คุณจะทำให้เว็บแอป Next.js ใช้งานได้ใน Firebase และ แสดงผลด้วย Firebase Hosting ได้

แสดงเนื้อหาแบบคงที่

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

firebase deploy

หากแอปมีตรรกะฝั่งเซิร์ฟเวอร์แบบไดนามิก CLI จะทําการ ติดตั้งใช้งานตรรกะดังกล่าวไปยัง Cloud Functions for Firebase คุณดูแอปที่ทำให้ใช้งานได้แล้ว ในเว็บไซต์จริงได้

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

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

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

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

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

การรวม 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 ดังนี้

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

// get the authenticated Firebase App
const firebaseApp = getApp(useRouter().query.__firebaseAppName);