Next.js での画像の読み込みを最適化する

デフォルトでは、組み込みの Next.js 画像 最適化 は App Hosting で無効になっています。ただし、 images.unoptimized を明示的に false に設定するか、カスタム 画像 ローダーを使用する場合は除きます。

Image Processing Firebase Extension を使用して Next.js グローバル イメージローダーを構成すると、 App Hosting 上の Next.js アプリでオンデマンドの画像最適化と配信が可能になります。App Hosting

前提条件

  • Firebase プロジェクトと App Hosting バックエンドがある。
  • Cloud Storage がプロジェクトで有効になっている。
  • Cloud Functions for Firebase がプロジェクトで有効になっている。

拡張機能をインストールする

Firebase Extensions Hub で Image Processing Extension に移動し、[Install in Firebase Console] を選択します。画面上の手順に沿って操作します。

ローカル イメージの最適化を構成する（省略可）

この拡張機能を使用して最適化するローカル イメージをアプリケーションで使用する場合は、拡張機能のインストール プロセスで「Hostname」パラメータを構成する必要があります。

  1. 拡張機能の構成中: [拡張機能を構成] ステップに到達したら、「Hostname」パラメータを見つけます。

  2. ホスト名を設定する: Firebase App Hosting バックエンドのデフォルト ドメインを入力します。通常、このドメインは .hosted.app で終わります。

インストールが完了すると、Image Processing API が 関数として Cloud Functions にデプロイされます。Functions dashboard に移動し、 Firebase コンソールで Image Processing API トリガー URL をコピーします。

カスタム イメージローダーを設定する

最適化されたすべての image component にデプロイされた Image Processing API を使用する image loader を作成します。最適化として、Next.js アプリケーションと同じ Firebase App Hosting ドメインで提供され、同じグローバル CDN の背後でキャッシュされるように書き換えます。

まず、次のフィールドを 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}`;
}

これらの変更を含む commit を作成し、ライブブランチに push します。 次に、App Hosting のロールアウトが完了するまで待ちます。