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

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

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

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

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

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

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

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

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

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

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

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

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

สร้างโปรแกรมโหลดรูปภาพที่ใช้ Image Processing API ที่ติดตั้งใช้งานสำหรับคอมโพเนนต์รูปภาพที่เพิ่มประสิทธิภาพทุกรายการ เพื่อเป็นการเพิ่มประสิทธิภาพ ให้เขียนใหม่เพื่อให้แสดงภายใต้โดเมน Firebase App Hosting เดียวกันและแคชไว้หลัง 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 เสร็จสมบูรณ์