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 tích hợp của Next.js image optimization sẽ bị tắt trên App Hosting, trừ phi bạn đặt images.unoptimized thành false hoặc sử dụng Trình tải hình ảnh tuỳ chỉnh.Image Loader.

Bạn có thể định cấu hình trình tải hình ảnh toàn cục của Next.js bằng Tiện ích xử lý hình ảnh của 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 Firebase rồi chọn Cài đặt trong Bảng điều khiển 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, 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 đế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. Miền này thường kết thúc bằng .hosted.app.

Sau khi cài đặt xong, API Xử lý hình ảnh sẽ được triển khai dưới dạng một hàm trong Cloud Functions. Chuyển đến trang tổng quan Hàm trong Firebase bảng điều khiển rồi sao chép URL 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ầnhình ảnh được tối ưu hoá. Để tối ưu hoá, hãy viết lại thành phần đó để thành phần 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 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 đó, 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 rồi đẩy cam kết đó vào nhánh trực tiếp. Sau đó, hãy đợi quá trình triển khai App Hosting hoàn tất.