Cannot Use Images or Divs Inside Links?

Answered

Alligator mississippiensis posted this in #help-forum

Alligator mississippiensisOP

2024-12-16T20:32:23.799Z

pretty self explanatory, I want to be able to use images & divs inside links. I dont know why even Next.js doesnt allow us to do this, I thought of using a relative container with absolute positioned links to solve this but I feel like I shouldn't need to do that, why does next.js not allow us to do that with link elements?
regular <a> tags work just fine with images and divs but if I use that then next.js complains about regular <a> being unoptimized

Answered by Alligator mississippiensis

it was using this random old component that I named as Link 💀

View full answer

12 Replies

B33fb0n3

2024-12-16T20:35:12.516Z

can you share the error for:

even Next.js doesnt allow us to do this

Alligator mississippiensisOP

2024-12-16T20:40:12.595Z

next.js itself doesnt raise an error, however ts does, as well as the linter
and next.js will just not render the elements inside the Link element, it only renders the text

the code for the one on the right:

export function TestCta({ url, svg, text }: { url: string; svg: string; text: string }) {
  return (
    <Link url={url} text={text}>
      <Image height={40} src={svg} />
    </Link>
  );
}