フレームワークとの統合

Next.js

画像変換は、Next.jsの<Image />コンポーネント ↗で自動的に使用できます。

画像変換を使用するには、グローバル画像ローダーまたは各<Image />コンポーネント用の複数のカスタムローダーを定義します。

Next.jsは、幅と品質の正しいパラメータで画像をリクエストします。

画像変換は、クライアントに最適な形式をキャッシュして提供する責任を負います。

グローバルローダー

アプリのすべての画像で画像を使用するには、アプリ用のグローバルloaderFile ↗を定義します。

次の設定を、Next.jsアプリケーションのルートにあるnext.config.jsファイルに追加します。

module.exports = {
  images: {
    loader: 'custom',
    loaderFile: './imageLoader.js',
  },
}

次に、指定されたパス（Next.jsアプリケーションのルートに対して相対的）にimageLoader.jsファイルを作成します。

const normalizeSrc = src => {
  return src.startsWith('/') ? src.slice(1) : src;
};

export default function cloudflareLoader ({ src, width, quality }) {
  const params = [`width=${width}`];
  if (quality) {
    params.push(`quality=${quality}`);
  }
  const paramsString = params.join(',');
  return `/cdn-cgi/image/${paramsString}/${normalizeSrc(src)}`;
};

カスタムローダー

または、各<Image />コンポーネント用にローダーを定義します。

import Image from 'next/image';

const normalizeSrc = src => {
  return src.startsWith('/') ? src.slice(1) : src;
};

const cloudflareLoader = ({ src, width, quality }) => {
  const params = [`width=${width}`];
  if (quality) {
    params.push(`quality=${quality}`);
  }
  const paramsString = params.join(',');
  return `/cdn-cgi/image/${paramsString}/${normalizeSrc(src)}`;
};

const MyImage = props => {
  return (
    <Image
      loader={cloudflareLoader}
      src="/me.png"
      alt="著者の写真"
      width={500}
      height={500}
    />
  );
};

Cloudflare Dashboard Discord Community Learning Center Support Portal

Cookie Settings