如何使用 Next.js 获取基本的外部数据并将组件导入另一个

Question

I have the code below in pages/github and when I go to localhost:3000/github the code executes as expected. I get JSON data.

function GithubAPI(props) {
  // Render posts...
  return (<div>{props.data.name}</div>)
}

// This function gets called at build time
export async function getStaticProps() {
  // Call an external API endpoint to get posts
  const res = await fetch('https://api.github.com/repos/vercel/next.js')

  const data= await res.json()
  console.log(data)

  return {
    props: {
      data,
    },
  }
}

export default GithubAPI

When I import this component into another component I get problems.

pages/about

import GithubAPI from './github'
function About(props) {
    console.log(props)

  return (
    <div>
      <div>About</div>
       <GithubAPI/>  {/* TypeError: Cannot read property 'name' of undefined */}

    </div>
  )
}

export default About

I do not know how the developers of Next.js expect us to structure our code so that we can make these kinds of API calls and still export our components for import into other components. How am I expected to do this?

Answer 1

You cannot run getStaticProps/getServerSideProps in any non-page components. One must prop pass instead.