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

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

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

สร้าง image loader ที่ใช้ 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 เสร็จสมบูรณ์