NextJs中如何通过多层组件传递href值？

Question

So I am fairly new to NextJs and have been struggling to make this work over the past few days. Scrutinised the internet and haven't found someone with the same issue, so I am probably misunderstanding the workings of NextJs.

My file structure is as follows:

//index.js

export default function Home() {

  return ( 
    <div className={classnames(indexStyles.wrapper, "gap")}>

        <div className={indexStyles.itemswrapper}>
          <Item image={banner1} text="Trusted by our clients" 
          button="View project" href="/project1" />

          <Item image={banner2} text="Effective design" 
          button="View project" href="/project 2" />
        </div>
  )
}

This is my index file (homepage) where I have multiple items which are components as I want to have different contents within them. This is what the item component looks like:

// Item.js

const Item = ( props, { href } ) => {

    return (
      <div className={classnames(itemStyles.wrapper, "wrap", "center")}>
                
            <div className={itemStyles.thumbnail}>
                  <div className={itemStyles.image}>
                      <Image src={props.image} alt=""/>
                  </div>
            </div>

            <div className={itemStyles.cta_wrapper}>
                  <div className={itemStyles.title}>
                      <h2>{props.text}</h2>
                  </div>

                  <div className={itemStyles.knop}>
                      <Button href={{href}} ><a>{props.button}</a></Button>
                  </div>
            </div>

      </div>
    )
}

And this is what the Button component looks like:

// Button.js

const Button = ({ children, href }) => {

    return (
        <div className={buttonStyles.button}>
            <Link href={{href}}><a>{children}</a></Link>
        </div>
    )
}

So my question is, how do I pass the href in the index.js page as a prop to the Item component so that the href in the Link in Button.js gets changed. As far as I found it has something to do with next router. I hope my question is clear, if not please do not refrain from asking further explanation.

PS. I left our all the imports at the top of each file in this question to make everything more clear, but everything has been imported correctly.

Answer 1

In Item.js href is just a regular prop, there's nothing special about it.

// Item.js

const Item = ( props = {} ) => {
    const {href} = props;
    return (
      <div className={classnames(itemStyles.wrapper, "wrap", "center")}>
                
            <div className={itemStyles.thumbnail}>
                  <div className={itemStyles.image}>
                      <Image src={props.image} alt=""/>
                  </div>
            </div>

            <div className={itemStyles.cta_wrapper}>
                  <div className={itemStyles.title}>
                      <h2>{props.text}</h2>
                  </div>

                  <div className={itemStyles.knop}>
                      <Button href={href}><a>{props.button}</a></Button>
                  </div>
            </div>

      </div>
    )
}

You would probably want to destructure the other props as well