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

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

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

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

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

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

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

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

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

ในระหว่างการกำหนดค่าส่วนขยาย: เมื่อไปถึงขั้นตอน "กำหนดค่าส่วนขยาย" ให้ค้นหาพารามิเตอร์ "ชื่อโฮสต์"
ตั้งค่าชื่อโฮสต์: ป้อนโดเมนเริ่มต้นสำหรับ 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เปิดตัวเสร็จสมบูรณ์