我正在Next中建立一个项目。当前，我有一个自定义的App组件，该组件安装了Header和Footer组件。
现在，我想从API填充页眉/页脚的内容（在构建时，因为它不会经常更改）。但是，getStaticProps仅适用于页面，不适用于组件。
如何在构建时获取数据并将其传递给页眉/页脚组件？
iCMS 回答：getStaticProps填充页面的页眉/页脚
假设App在pages内的索引页面上呈现，则只需将其传递下去即可。
pages / index.js
import App from '../components/App'
const Index = ({data}) => {
return(
<div>
<App data={data} />
</div>
)
}
export const getStaticProps = async () => {
const res = await fetch('...')
const data = await res.json()
return { props: { data } }
}
然后在您的App组件中使用props访问它。
components / App.js
import Header from './Header'
import Footer from './Footer'
const App = (props) => { // I believe you can also use {data} directly instead of props
return(
<div>
<Header data={props.data} />
<Footer data={props.data} />
</div>
)
}
然后在Header和Footer组件中执行相同的操作。
components / Header.js
const Header = ({data}) => {
return(
<div>
{data}
</div>
)
}