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

โดยค่าเริ่มต้น ระบบจะปิดใช้การเพิ่มประสิทธิภาพรูปภาพในตัวของ Next.js image optimization ใน 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 ไปที่แดชบอร์ด 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 เสร็จสมบูรณ์