Epic Next.js 14 Tutorial: Learn Next.js by building a real-life project part 3

Hi Paul , Thank you very much vor this real-ife project . I treally helps understanding the use of Strapi in Next.js . I am struggling with a Readt hydration error . I believe I followed all of your steps but I am receiving this error


It come from th StrapiImage component
“use client”; // Ensures this component is rendered on the client side

import Image from “next/image”;
import { getStrapiMedia } from “@/lib/utils”;

interface StrapiImageProps {
src: string;
alt: string;
height: number;
width: number;
className?: string;
}

export function StrapiImage({
src,
alt,
height,
width,
className,
}: Readonly) {
if (!src) return null;
const imageUrl = getStrapiMedia(src);
const imageFallback = https://placehold.co/${width}x${height};

return (
<Image
src={imageUrl ?? imageFallback}
alt={alt}
height={height}
width={width}
className={className}
/>
);
}
Can you please help me with this ?