next/image fix

vercel/next.js#19117

components/BlogPost/BlogPost.tsx

@@ -14,6 +14,7 @@ import * as api from "../../api";
 import { ThreeDotsLoader } from "../UI/Loader/Loader";
 import CustomizedTooltip from "../UI/HTMLToolTip/HTMLTooltip";
 import siteMetadata from "../../data/siteMetadata";
+import { contentfulLoader } from "../../helpers/ImageURL/contentFulLoader";
 
 type BlogPostProps = {
   data: {
@@ -76,6 +77,7 @@ const BlogPost = ({ data }: BlogPostProps) => {
                 >
                   <Image
                     src={data.data.user.photo}
+                    loader={contentfulLoader}
                     alt={data.data.user.name}
                     layout="fill"
                     objectFit="cover"
@@ -144,6 +146,7 @@ const BlogPost = ({ data }: BlogPostProps) => {
               ? data.data.featuredImage
               : "/static/no_image.png"
           }
+          loader={contentfulLoader}
           alt={data.data.description}
           className="shadow-lg rounded-md object-cover"
           layout="fill"

components/BlogPost/RelatedPosts.tsx

@@ -2,6 +2,7 @@ import Link from "next/link";
 import Image from "next/image";
 import React from "react";
 import { BlogPostDetails, RelatedBlog } from "../../pages/blog/[slug]";
+import { contentfulLoader } from "../../helpers/ImageURL/contentFulLoader";
 
 type RelatedPostsProps = {
   data: {
@@ -28,6 +29,7 @@ const RelatedPosts = ({ data }: RelatedPostsProps) => {
               <div className="relative w-full">
                 <Image
                   src={blog.featuredImage}
+                  loader={contentfulLoader}
                   layout="fill"
                   objectFit="cover"
                 />

components/Card/BlogCard.tsx

@@ -7,6 +7,7 @@ import dayjs from "dayjs";
 import relativeTime from "dayjs/plugin/relativeTime";
 import { useSelector } from "react-redux";
 import { RootState } from "../../store/store";
+import { contentfulLoader } from "../../helpers/ImageURL/contentFulLoader";
 
 export type BlogProps = {
   _id: string;
@@ -62,6 +63,7 @@ export const BlogCard = ({ blog }: Props) => {
             src={
               blog.featuredImage ? blog.featuredImage : "/static/about/1.jpg"
             }
+            loader={contentfulLoader}
             alt="blog image"
             layout="fill"
             objectFit="cover"

components/HOC/Layout/Header/Header.tsx

@@ -19,6 +19,7 @@ import styles from "styles/MobileMenu.module.css";
 import dynamic from "next/dynamic";
 import MobileMenu from "./MobileMenu";
 import DropdownMenu from "./DropdownMenu";
+import { contentfulLoader } from "../../../../helpers/ImageURL/contentFulLoader";
 
 const Header = () => {
   const [mounted, setMounted] = React.useState(false);
@@ -97,6 +98,7 @@ const Header = () => {
                     <Image
                       // Note: authData?.user is optional chaining, it means if authData is null then it will not throw an error
                       src={authData.photo ? authData.photo : "/static/default-avatar.png"}
+                      loader={contentfulLoader}
                       alt="profile"
                       layout="fill"
                       className="rounded-full object-cover cursor-pointer block m-auto"

components/HomePage/Intro.tsx

@@ -9,6 +9,7 @@ import { toast } from "react-toastify";
 // Todo: replace react-text-transition with normal css animation
 
 import { RootState } from "../../store/store";
+import { contentfulLoader } from "../../helpers/ImageURL/contentFulLoader";
 
 const TEXTS = ["Share", "Grow"];
 
@@ -173,6 +174,7 @@ export const CardLayout = ({ post }: CardProps) => {
       <div className="aspect-w-10 aspect-h-9 lg:aspect-w-16 lg:aspect-h-9">
         <Image
           src={post.featuredImage}
+          loader={contentfulLoader}
           className="object-cover shadow-lg rounded-lg"
           alt={post.title}
           layout="fill"
@@ -191,6 +193,7 @@ export const CardLayout = ({ post }: CardProps) => {
           <div className="w-10 h-10 relative">
             <Image
               src={post.anonymous ? "/static/about/1.jpg" : post.user[0].photo}
+              loader={contentfulLoader}
               layout="fill"
               className="rounded-full object-cover"
             />

components/UI/HTMLToolTip/HTMLTooltip.tsx

@@ -2,6 +2,7 @@ import * as React from "react";
 import { styled } from "@mui/material/styles";
 import Tooltip, { TooltipProps, tooltipClasses } from "@mui/material/Tooltip";
 import Image from "next/image";
+import { contentfulLoader } from "../../../helpers/ImageURL/contentFulLoader";
 
 const HtmlTooltip = styled(({ className, ...props }: TooltipProps) => (
   <Tooltip {...props} classes={{ popper: className }} />
@@ -79,6 +80,7 @@ const CustomizedTooltip = ({ children, name, photo, bio }: Props) => {
           <div className="relative w-48 h-48 ">
             <Image
               src={photo!}
+              loader={contentfulLoader}
               alt="author image"
               layout="fill"
               objectFit="cover"

helpers/ImageURL/contentFulLoader.tsx

@@ -0,0 +1,15 @@
+interface ImageProps {
+    src: string;
+    width: number;
+    quality: number;
+}
+
+export  const contentfulLoader = ({ src, width, quality}: any) => {
+    const params = [`w=${width}`];
+
+    if (quality) {
+      params.push(`q=${quality}`);
+    }
+
+    return `${src}?${params.join('&')}`;
+};

package.json

@@ -35,6 +35,7 @@
     "react-use": "^17.4.0",
     "redux-persist": "^6.0.0",
     "sanitize-filename": "^1.6.3",
+    "sharp": "^0.31.1",
     "suneditor": "^2.43.14",
     "suneditor-react": "^3.4.1",
     "swr": "^1.3.0"

pages/user/my-profile.tsx

@@ -11,6 +11,7 @@ import Loader from "../../components/UI/Loader/Loader";
 import { getProfile } from "../../api";
 import { BlogCard, BlogProps } from "../../components/Card/BlogCard";
 import Image from "next/image";
+import { contentfulLoader } from "../../helpers/ImageURL/contentFulLoader";
 
 const fetchWithToken = (url: string, token: string) =>
   getProfile(url, token).then((res) => res.data);
@@ -72,6 +73,7 @@ const MyProfile = () => {
                   ? data.data.user.photo
                   : "/static/default-avatar.png"
               }
+              loader={contentfulLoader}
               layout="fill"
               objectFit="cover"
               alt={data.data.user.name}