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

Question

我在 pages/github 中有以下代码，当我转到 localhost:3000/github 时，代码按预期执行。我得到 JSON 数据。

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

当我将此组件导入另一个组件时，我遇到了问题。

页/关于

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

我不知道 Next.js 的开发人员希望我们如何构造我们的代码，以便我们可以进行这些类型的 API 调用并仍然导出我们的组件以导入其他组件。我应该如何做到这一点？

Answer 1

您不能在任何非页面组件中运行 getStaticProps/getServerSideProps。一个必须通过支柱。