How to import component as a button in Nextjs?

Question

I have this component with an internal link which is used in multiple pages

when I try to import it as a button in the Nextjs application I get this result, it renders both the styled anchor link and the button in the background

With the exact same code in the React application I get the desired result

It looks like the prop "as" for some reason is rendering the component as a button and also the anchor inside the component, which is not happening in the regular React version

Answer 1

I suspect you have different styling in "the regular React version".

Your component will always render <a> because that's hardcoded. If you want to use <a> as a default component to render, you can define a default value for as property and you don't need nested <a>.

For example:

const Comp=({as: Component = 'a', ...rest}) => {
 return <Component {...rest}>Foobar</Component>
}

then following usage will render <a> and <button>:

      <Comp />
      <Comp as="button" />