เพิ่มประสิทธิภาพการโหลดรูปภาพใน Next.js

โดยค่าเริ่มต้น ระบบจะปิดใช้การเพิ่มประสิทธิภาพรูปภาพ Next.js ในตัวใน App Hosting เว้นแต่คุณจะตั้งค่า images.unoptimized เป็น false อย่างชัดเจนหรือใช้ Image Loader ที่กําหนดเอง

คุณสามารถกําหนดค่าโปรแกรมโหลดรูปภาพส่วนกลางของ Next.js ด้วยส่วนขยาย Firebase สำหรับประมวลผลรูปภาพเพื่อเปิดใช้การเพิ่มประสิทธิภาพและการแสดงรูปภาพแบบออนดีมานด์ในแอป Next.js บน App Hosting

ข้อกำหนดเบื้องต้น

  • คุณมีโปรเจ็กต์ Firebase และแบ็กเอนด์ App Hosting
  • Cloud Storage เปิดใช้ในโปรเจ็กต์ของคุณแล้ว
  • Cloud Functions for Firebase เปิดใช้ในโปรเจ็กต์ของคุณแล้ว

ติดตั้งส่วนขยาย

ไปที่ส่วนขยายการประมวลผลรูปภาพในฮับส่วนขยาย Firebase แล้วเลือกติดตั้งในคอนโซล Firebase ทำตามวิธีการบนหน้าจอ

กำหนดค่าการเพิ่มประสิทธิภาพรูปภาพในร้าน (ไม่บังคับ)

หากแอปพลิเคชันใช้รูปภาพในเครื่องที่คุณต้องการเพิ่มประสิทธิภาพโดยใช้ส่วนขยายนี้ คุณต้องกําหนดค่าพารามิเตอร์ "ชื่อโฮสต์" ในระหว่างกระบวนการติดตั้งส่วนขยาย

  1. ระหว่างการกําหนดค่าส่วนขยาย: เมื่อถึงขั้นตอน "กําหนดค่าส่วนขยาย" ให้ค้นหาพารามิเตอร์ "ชื่อโฮสต์"

  2. ตั้งค่าชื่อโฮสต์: ป้อนโดเมนเริ่มต้นสําหรับแบ็กเอนด์ App Hosting ของ Firebase โดยทั่วไปแล้วโดเมนนี้จะลงท้ายด้วย .hosted.app

เมื่อติดตั้งเสร็จแล้ว คุณควรทำให้ Image Processing API ใช้งานได้เป็นฟังก์ชันใน Cloud Functions ไปที่แดชบอร์ดของฟังก์ชันในคอนโซล Firebase แล้วคัดลอก URL ทริกเกอร์ของ Image Processing API

ตั้งค่าโปรแกรมโหลดรูปภาพที่กําหนดเอง

สร้างโปรแกรมโหลดคอมโพเนนต์รูปภาพที่เพิ่มประสิทธิภาพแล้วทุกรายการโดยใช้ Image Processing API ที่ติดตั้งใช้งาน ในการเพิ่มประสิทธิภาพ ให้เขียนโค้ดใหม่เพื่อแสดงภายใต้โดเมน App Hosting ของ Firebase เดียวกันและแคชไว้เบื้องหลัง CDN ทั่วโลกเดียวกันกับแอปพลิเคชัน Next.js

ก่อนอื่น ให้เพิ่มช่องต่อไปนี้ลงในไฟล์ next.config.js

// @ts-check

/** @type {import('next').NextConfig} */
const nextConfig = {
  images: {
    loader: "custom",
    loaderFile: "./loader.js",
  },
  async rewrites() {
    return [
      {
        source: "/_fah/image/:path*",
        destination:
          "<CLOUD_FUNCTIONS_URL>/:path*",
      },
    ];
  },
}

module.exports = nextConfig;

จากนั้นสร้างไฟล์ loader.js ในไดเรกทอรีรูทที่มีเนื้อหาต่อไปนี้

"use client"

export default function myImageLoader({ src, width, quality }) {
  if (process.env.NODE_ENV === "development") {
    return src;
  }

  const operations = [
    {
      operation: "input",
      type: "url",
      url: src,
    },
    { operation: "resize", width: width },
    { operation: "output", format: "webp", quality: quality || 75 },
  ];

  const encodedOperations = encodeURIComponent(JSON.stringify(operations));

  return `/_fah/image/process?operations=${encodedOperations}`;
}

สร้างการคอมมิตที่มีการเปลี่ยนแปลงเหล่านี้และพุชไปยังสาขาที่ใช้งานอยู่ จากนั้นรอให้ App Hosting เปิดตัวเสร็จสมบูรณ์