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 chung của 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 đượ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 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 trên thiết 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ố "Hostname" (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 tham 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 của bạn. 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ề hàm trong bảng điều khiển Firebase rồi sao chép URL của trình 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 được phân phát trong cùng một miền Firebase App Hosting và được lưu vào bộ nhớ đệm sau cùng một CDN toàn cầu với ứ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 đó, tạo một tệp loader.js trong thư mục gốc có nội dung như 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 những thay đổi này và đẩy thay đổi đó vào nhánh đang hoạt động. Sau đó, hãy đợi quá trình phát hành App Hosting hoàn tất.