ผสานรวม 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 จะล้มเหลวหากรวมไว้ในการสร้างเบราว์เซอร์ ให้อ้างอิงชุดรวมดังกล่าวภายใน getStaticProps และ getStaticPathsเท่านั้น

แสดงเนื้อหาแบบไดนามิกทั้งหมด (SSR)

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

กำหนดค่าลักษณะการทำงานด้วย Hostingnext.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 App ที่ผ่านการตรวจสอบสิทธิ์ (firebaseApp) และผู้ใช้ที่ลงชื่อเข้าใช้ในปัจจุบัน (currentUser) โดยไม่บังคับ ซึ่งสามารถเข้าถึงได้ใน getServerSideProps
• ชื่อ Firebase App ที่ผ่านการตรวจสอบสิทธิ์จะอยู่ในคําค้นหาเส้นทาง (__firebaseAppName) ซึ่งช่วยให้ผสานรวมด้วยตนเองได้ขณะอยู่ในบริบท

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