Setting up the Cloudinary URL Gen SDK

package.json

@@ -8,6 +8,7 @@
     "lint": "next lint"
   },
   "dependencies": {
+    "@cloudinary/url-gen": "^1.7.0",
     "cloudinary": "^1.29.0",
     "next": "12.0.4",
     "react": "17.0.2",

pages/index.js

@@ -1,13 +1,26 @@
 import { useEffect, useState } from 'react';
 import Head from 'next/head'
+import { Cloudinary } from '@cloudinary/url-gen';
 import styles from '../styles/Home.module.scss'
 
+const cloudinary = new Cloudinary({
+  cloud: {
+    cloudName: process.env.NEXT_PUBLIC_CLOUDINARY_CLOUD_NAME,
+  },
+  url: {
+    secure: true,
+  },
+});
+
 export default function Home() {
   const [imageSrc, setImageSrc] = useState();
   const [uploadData, setUploadData] = useState();
 
   const [transparentData, setTransparentData] = useState();
 
+  const mainImage = uploadData && cloudinary.image(uploadData.public_id).toURL();
+  const transparentImage = transparentData && cloudinary.image(transparentData.public_id).toURL()
+
   useEffect(() => {
     if ( !uploadData ) return;
     (async function run() {
@@ -96,8 +109,8 @@ export default function Home() {
             <img src={imageSrc} />
           )}
 
-          { uploadData && (
-            <img src={transparentData?.secure_url || uploadData.secure_url} />
+          { mainImage && (
+            <img src={transparentImage || mainImage} />
           )}
 
           {imageSrc && !uploadData && (

yarn.lock

@@ -65,6 +65,11 @@
     "@babel/helper-validator-identifier" "^7.14.9"
     to-fast-properties "^2.0.0"
 
+"@cloudinary/url-gen@^1.7.0":
+  version "1.7.0"
+  resolved "https://registry.yarnpkg.com/@cloudinary/url-gen/-/url-gen-1.7.0.tgz#510f7898852982928d0b44093c2bb97f59196c6f"
+  integrity sha512-GXbFr4HYFHVcEOGNCFjPUv5LwK00W7s53XDHkZpXE6tv5uINfAucXmq1twPJ7esW3BPxNUjq6CiHyDXqf9YvTg==
+
 "@eslint/eslintrc@^0.4.3":
   version "0.4.3"
   resolved "https://registry.yarnpkg.com/@eslint/eslintrc/-/eslintrc-0.4.3.tgz#9e42981ef035beb3dd49add17acb96e8ff6f394c"