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

デフォルトでは、images.unoptimized を明示的に false に設定するか、カスタムの Image Loader を使用しない限り、App Hosting で組み込みの Next.js 画像最適化は無効になっています。

Image Processing Firebase 拡張機能を使用して Next.js グローバル画像ローダーを構成すると、App Hosting の Next.js アプリで画像のオンデマンド最適化と配信を有効にできます。

前提条件

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

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

Firebase Extensions Hub で Image Processing Extension に移動し、[Firebase コンソールにインストール] を選択します。画面上の指示に沿って操作します。

ローカル画像の最適化を構成する（省略可）

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

  1. 拡張機能の構成中: [拡張機能の構成] ステップに到達したら、[ホスト名] パラメータを探します。

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

インストールが完了すると、Image Processing API が Cloud Functions の関数としてデプロイされます。Firebase コンソールの関数ダッシュボードに移動し、画像処理 API トリガー URL をコピーします。

カスタム画像ローダーを設定する

デプロイされた画像処理 API を使用して、最適化されたすべての画像コンポーネントの画像ローダーを作成します。最適化として、同じ Firebase App Hosting ドメインで提供され、Next.js アプリケーションと同じグローバル 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 のロールアウトが完了するまで待ちます。