'Are Nextjs' data fetching systems and functions one-to-one at the top level?

I create web client app with Next.js. I have a question.

If there are two similar functions in the same hierarchy, such as

function Hoge({ data }) {
  return (
    <div>
     {data.hoge}
    </div>
  )
}
function Fuga({ data }) {
  return (
    <div>
     {data.fuga}
    </div>
  )
}
export async function getStaticProps() {
  ...
  return {
    props: {
      ...
    }
  };
}

, which one will be called?

Or is this against the rules?

I couldn't find any source code or documentation that shows which function is called.



Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source