ผสานรวม Next.js

เมื่อใช้ Firebase CLI คุณสามารถทำให้เว็บแอป Next.js ใช้งานได้ใน Firebase และ แสดงด้วยโฮสติ้งของ Firebase 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

แพ็กเกจ SDK ของผู้ดูแลระบบจะล้มเหลวหากรวมอยู่ในบิลด์ของเบราว์เซอร์ อ้างถึง ใน getStaticProps เท่านั้น และ getStaticPaths

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

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

กำหนดค่าลักษณะการทำงานของโฮสติ้งด้วย next.config.js

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

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

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

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

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

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

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

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