fix: prd 인 경우만 이미지 최적화 적용

thismeme-team · Mar 27, 2024 · ea7f2df · ea7f2df
1 parent f5206cb
commit ea7f2df
Show file tree

Hide file tree

Showing 2 changed files with 10 additions and 6 deletions.
diff --git a/config/base.next.config.js b/config/base.next.config.js
@@ -1,5 +1,6 @@
 /* eslint-disable @typescript-eslint/no-var-requires */
-const IS_PROD = process.env.NODE_ENV === "production";
+const isProd = process.env.NODE_ENV === "production";
+const cloudName = process.env.NEXT_PUBLIC_CLOUDINARY_CLOUD_NAME || "";
 
 // The folders containing files importing twin.macro
 const path = require("path");
@@ -62,6 +63,7 @@ module.exports = () => ({
     return config;
   },
   images: {
+    unoptimized: !isProd || !cloudName,
     // Link: https://fe-developers.kakaoent.com/2022/220714-next-image/
     deviceSizes: [440],
     imageSizes: [100, 200],
@@ -74,6 +76,6 @@ module.exports = () => ({
     // https://webpack.js.org/configuration/devtool/ and
     // https://docs.sentry.io/platforms/javascript/guides/nextjs/manual-setup/#use-hidden-source-map
     // for more information.
-    hideSourceMaps: IS_PROD,
+    hideSourceMaps: isProd,
   },
 });
diff --git a/config/cloudinary-loader.ts b/config/cloudinary-loader.ts
@@ -2,7 +2,7 @@
 
 import type { ImageLoaderProps } from "next/image";
 
-const cloudName = process.env.NEXT_PUBLIC_CLOUDINARY_CLOUD_NAME;
+const cloudName = process.env.NEXT_PUBLIC_CLOUDINARY_CLOUD_NAME || "";
 
 export function cloudinaryLoader({ src, width, quality }: ImageLoaderProps) {
   const rawTransformations = ["f_auto", "c_limit", `w_${width}`, `q_${quality || "auto"}`];
@@ -18,7 +18,9 @@ export function cloudinaryLoader({ src, width, quality }: ImageLoaderProps) {
     isAbsolute = true;
   }
 
-  return isAbsolute
-    ? `https://res.cloudinary.com/${cloudName}/image/fetch/${rawTransformations.join(",")}/${href}`
-    : src;
+  const cldUrl = `https://res.cloudinary.com/${cloudName}/image/fetch/${rawTransformations.join(
+    ",",
+  )}/${href}`;
+
+  return isAbsolute ? cldUrl : src;
 }