ผสานรวม Next.js

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

แพ็กเกจ Admin 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 ทำได้หลายวิธี ดังนี้

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

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