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ể định cấu hình trình tải hình ảnh toàn cục Next.js bằng Tiện ích Firebase xử lý hình ảnh để 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 đang bật trong dự án của bạn.
  • Cloud Functions for Firebase đang 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 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 tính năng 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, bạn cần định cấu hình thông 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 đế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ợ App Hosting của Firebase. Miền này thường kết thúc bằng .hosted.app.

Sau khi cài đặt xong, bạn nên triển khai API Xử lý hình ảnh dưới dạng một hàm trong Cloud Functions. Chuyển đến trang tổng quan về Hàm trong bảng điều khiển Firebase rồi sao chép URL của điều kiện kích hoạt API Xử lý hình ảnh.

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 tệp này để tệp này được phân phát trong cùng một miền App Hosting Firebase và được lưu vào bộ nhớ đệm trong cùng một CDN toàn cầu như ứng dụng Next.js.

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ủa bạn với 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 thay đổi bao gồm các thay đổi này và đẩy thay đổi đó vào nhánh đang hoạt động. Sau đó, hãy đợi quá trình triển khai App Hosting hoàn tất.