เมื่อใช้ 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
สำหรับ
ที่มีอยู่
เริ่มต้นโปรเจ็กต์ใหม่
- ใน Firebase CLI ให้เปิดใช้ตัวอย่างเว็บเฟรมเวิร์ก ดังนี้
firebase experiments:enable webframeworks
เรียกใช้คำสั่งการเริ่มต้นจาก CLI จากนั้นทำตามข้อความแจ้ง
firebase init hosting
ตอบว่า "ใช่" สำหรับ "คุณต้องการใช้เว็บเฟรมเวิร์กไหม (ทดลอง)"
เลือกไดเรกทอรีต้นทางของโฮสติ้ง หากนี่เป็นแอป Next.js ที่มีอยู่ กระบวนการ CLI จะเสร็จสมบูรณ์ และคุณจะดำเนินการต่อในส่วนถัดไปได้
หากมีข้อความแจ้ง ให้เลือก 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);