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

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

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

前提条件

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

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

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

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

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

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

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

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

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

最適化された画像コンポーネントごとに、デプロイされた Image Processing 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 のロールアウトが完了するまで待ちます。