⚡️ Use Cloudinary to optimize images

Author: max-programming

components/ContributorCard.tsx

@@ -1,3 +1,5 @@
+import { env } from 'env.mjs';
+import { CldImage, getCldImageUrl } from 'next-cloudinary';
 import { IoLogoGithub } from 'react-icons/io';
 
 interface Contributor {
@@ -13,6 +15,15 @@ interface Props {
 }
 
 export default function ContributorCard({ contributor }: Props) {
+  const url = env.NEXT_PUBLIC_CLOUDINARY_CLOUD_NAME
+    ? getCldImageUrl({
+        src: contributor.avatar_url,
+        deliveryType: 'fetch',
+        width: 250,
+        height: 250
+      })
+    : contributor.avatar_url;
+
   return (
     <div className="text-center shadow-2xl card">
       <a
@@ -21,16 +32,15 @@ export default function ContributorCard({ contributor }: Props) {
         rel="noreferrer"
       >
         <figure className="px-10 pt-10">
-          <img
-            src={contributor.avatar_url}
-            alt={contributor.name}
-            className="rounded-xl"
-          />
+          <img src={url} alt={contributor.name} className="rounded-xl" />
         </figure>
       </a>
       <div className="card-body items-center text-center">
         <h2 className="card-title text-neutral-100">{contributor.name}</h2>
-        <a href={contributor.profile} className="link text-neutral-100 hover:text-[#dbe8d9]">
+        <a
+          href={contributor.profile}
+          className="link text-neutral-100 hover:text-[#dbe8d9]"
+        >
           {contributor.profile}
         </a>
         <div className="justify-center card-actions">

env.mjs

@@ -5,13 +5,12 @@ export const env = createEnv({
   server: {
     GITHUB_TOKEN: z.string().optional()
   },
-  client: {},
-  // If you're using Next.js < 13.4.4, you'll need to specify the runtimeEnv manually
+  client: {
+    NEXT_PUBLIC_CLOUDINARY_CLOUD_NAME: z.string().optional()
+  },
   runtimeEnv: {
-    GITHUB_TOKEN: process.env.GITHUB_TOKEN
+    GITHUB_TOKEN: process.env.GITHUB_TOKEN,
+    NEXT_PUBLIC_CLOUDINARY_CLOUD_NAME:
+      process.env.NEXT_PUBLIC_CLOUDINARY_CLOUD_NAME
   }
-  // For Next.js >= 13.4.4, you only need to destructure client variables:
-  // experimental__runtimeEnv: {
-  //   NEXT_PUBLIC_PUBLISHABLE_KEY: process.env.NEXT_PUBLIC_PUBLISHABLE_KEY,
-  // }
 });

package.json

@@ -20,6 +20,7 @@
     "daisyui": "^3.7.7",
     "framer-motion": "^10.16.4",
     "next": "^13.5.3",
+    "next-cloudinary": "^4.22.0",
     "next-seo": "^6.1.0",
     "nextjs-progressbar": "^0.0.16",
     "react": "18.2.0",