รวม Next.js

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

ก่อนที่คุณจะเริ่มต้น

ก่อนที่คุณจะเริ่มทำให้แอปของคุณใช้งานได้กับ Firebase ให้อ่านข้อกำหนดและตัวเลือกต่อไปนี้:

• Firebase CLI เวอร์ชัน 12.1.0 หรือใหม่กว่า ตรวจสอบให้แน่ใจว่า ได้ติดตั้ง CLI โดยใช้วิธีที่คุณต้องการ

• ไม่บังคับ: เปิดใช้งานการเรียกเก็บเงินในโครงการ Firebase ของคุณ (จำเป็นหากคุณวางแผนที่จะใช้ SSR)

• ไม่บังคับ: เปิดใช้งานการเรียกเก็บเงินในโครงการ 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

กำหนดค่าพฤติกรรมการโฮสต์ด้วย next.config.js

การปรับภาพให้เหมาะสม

รองรับการใช้ Next.js Image Optimization แต่จะทริกเกอร์การสร้างฟังก์ชัน (ใน Cloud Functions สำหรับ Firebase ) แม้ว่าคุณจะไม่ได้ใช้ SSR ก็ตาม

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

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

ทางเลือก: รวมเข้ากับการรับรองความถูกต้องของ Firebase

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

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

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