Next.js Link component incompatible with Hero CTAs

[rezrah]

Problem statement

Next.js encourage using the Link component declaratively to wrap any <a> tags.

E.g.

<Link href="/about">
  <a>About Us</a>
</Link>

The Hero doesn't use a composable API, which makes composition of Next.js link impossible.

<Hero
  heading="..."
  description="..."
  primaryAction={{
    text: 'Primary action',
    href: '#',
  }}
  secondaryAction={{
    text: 'Secondary action',
    href: '#',
  }}
  align="..."
/>

Suggestion

Rewrite the API for consistency with other composable API's.

<Hero align="...">
  <Hero.Heading></Hero.Heading>
  <Hero.Description></Hero.Description>
  <Hero.Description></Hero.Description>
  <Link href="#">
    <Hero.PrimaryAction></Hero.PrimaryAction>
  </Link>
  <Link href="#">
    <Hero.SecondaryAction></Hero.SecondaryAction>
  </Link>
</Hero>

References

Next.js Link component docs

[rfearing]

FYI: I spoke with Max and we don't recall any issues with Next/link. (Context: I mentioned we had some speedbumps with Next's link, but what I was thinking of is actually Next's image component.

[stefankp]

Wondering if we should remove the forced vertical padding on Hero 🤔 None of the other components have that.

[rfearing]

Wondering if we should remove the forced vertical padding on Hero 🤔 None of the other components have that.

That makes sense to me