NextJS - Cloudflare Images 사용하기

NextJS - Cloudflare Images 사용하기

 

작성 일자 : 2025년 06월 29일

---

 

components/ui/cloudflare-image.tsx

 

"use client";

import cloudflareLoader from "@/lib/cloudflareImageLoader";
import NextImage, { type ImageProps } from "next/image";

interface CloudflareImageProps extends ImageProps {
  ref?: (node: HTMLImageElement | null) => void;
}

export default function CloudflareImage({ ...props }: CloudflareImageProps) {
  return <NextImage loader={cloudflareLoader} {...props} />;
}

 

---

 

lib/cloudflareImageLoader.ts

 

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

export default function cloudflareLoader({
  src,
  width,
  quality,
  format,
}: {
  src: string;
  width: number;
  quality?: number;
  format?: string;
}) {
  // DEV 환경에서 원본 이미지 URL을 그대로 반환하는 방법
  // if (process.env.NODE_ENV === "development") {
  //   return src;
  // }

  const params = [`width=${width}`];

  if (quality) {
    params.push(`quality=${quality}`);
  }

  if (format) {
    params.push(`f=${format}`);
  } else {
    params.push("f=webp");
  }

  const paramsString = params.join(",");

  // DEV 환경에서 Cloudflare Images로 변환된 URL을 반환하는 방법
  if (process.env.NODE_ENV === "development") {
    const productionDomain = process.env.NEXT_PUBLIC_PRODUCTION_DOMAIN;
    return `${productionDomain}/cdn-cgi/image/${paramsString}/${normalizeSrc(src)}`;
  }

  return `/cdn-cgi/image/${paramsString}/${normalizeSrc(src)}`;
}