Tối ưu hoá việc tải hình ảnh trên Next.js

Theo mặc định, tính năng tối ưu hoá hình ảnh Next.js tích hợp sẵn sẽ bị tắt trên App Hosting, trừ phi bạn đặt rõ ràng images.unoptimized thành false hoặc sử dụng Trình tải hình ảnh tuỳ chỉnh.

Bạn có thể thiết lập một trình tải hình ảnh chung Next.js bằng Tiện ích xử lý hình ảnh Firebase để bật tính năng tối ưu hoá và phân phối hình ảnh theo yêu cầu trong ứng dụng Next.js trên App Hosting.

Điều kiện tiên quyết

• Bạn có một dự án Firebase và một phần phụ trợ App Hosting.
• Cloud Storage được bật trong dự án của bạn.
• Cloud Functions for Firebase được bật trong dự án của bạn.

Cài đặt tiện ích

Chuyển đến Tiện ích xử lý hình ảnh trong Trung tâm tiện ích của Firebase rồi chọn Cài đặt trong Bảng điều khiển của Firebase. Làm theo hướng dẫn trên màn hình.

Định cấu hình chế độ tối ưu hoá hình ảnh cục bộ (không bắt buộc)

Nếu ứng dụng của bạn sử dụng hình ảnh cục bộ mà bạn muốn tối ưu hoá bằng tiện ích này, thì bạn cần định cấu hình tham số "Tên máy chủ" trong quá trình cài đặt tiện ích.

1. Trong quá trình định cấu hình tiện ích: Khi bạn chuyển đến bước "Định cấu hình tiện ích", hãy tìm thông số "Tên máy chủ".

2. Đặt tên máy chủ: Nhập miền mặc định cho phần phụ trợ Firebase App Hosting. Miền này thường kết thúc bằng .hosted.app.

Sau khi cài đặt xong, Image Processing API sẽ được triển khai dưới dạng một hàm trong Cloud Functions. Chuyển đến trang tổng quan về Các hàm trong bảng điều khiển Firebase rồi sao chép URL kích hoạt Image Processing API.

Thiết lập trình tải hình ảnh tuỳ chỉnh

Tạo một trình tải hình ảnh sử dụng API Xử lý hình ảnh đã triển khai cho mọi thành phần hình ảnh được tối ưu hoá. Để tối ưu hoá, hãy viết lại thành miền này để miền được phân phát trong cùng một miền App Hosting của Firebase và được lưu vào bộ nhớ đệm sau cùng một CDN toàn cầu như ứng dụng Next.js của bạn.

Trước tiên, hãy thêm các trường sau vào tệp 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;

Sau đó, hãy tạo một tệp loader.js trong thư mục gốc có nội dung sau:

"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}`;
}

Tạo một cam kết bao gồm những thay đổi này và đẩy cam kết đó lên nhánh đang hoạt động. Sau đó, hãy đợi quá trình triển khai App Hosting hoàn tất.