I have this <Card> component that uses NextJS 14.2 <Image> component. The card receives the image src as a prop, then passes it to the <Image> component, like this:

const Card = ({ title, text, link, image, alt }) => {
   return (
      ...
      <Image
         src={`/images/${image}.jpg`}
         alt={alt}
         layout="intrinsic"
         width={150}
         height={150}
         className="card-img-top"
      />
      ...
   )
}

When I first npm run dev it, I get the following error message:

Error: Hydration failed because the initial UI does not match what was rendered on the server.

Strangely enough, if I make any changes to the code, NextJS hot reloads the code and then it magically (to me!) works.

I think there’s something to do with the variable in the src prop but I don’t know how to fix it. I’ve tried "use client" with no success. I might need to use getStaticProps?