ผสานรวม Next.js

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

ก่อนเริ่มต้น

ก่อนเริ่มใช้งานการติดตั้งใช้งานแอปใน 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 ไว้ในการสร้างเบราว์เซอร์จะทำให้การรวมล้มเหลว โปรดอ้างอิง 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);