"getStaticProps"以填充页面页眉/页脚

Question

我正在Next中构建一个项目。目前，我有一个自定义应用程序组件，用于挂载页眉和页脚组件。

现在我想从 API 填充页眉/页脚的内容(在构建时，因为它不会经常更改(。但是，getStaticProps仅适用于页面，而不适用于组件。

如何在构建时获取数据并将其传递给页眉/页脚组件？

Answer 1

假设App呈现在pages内部的索引页上，您只需将其传递到下水道即可。

页数/索引.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 } } 
}

然后在您的应用程序组件中，您可以使用props.

组件/应用程序.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组件中做同样的事情。

组件/标头.js

const Header = ({data}) => {
return(
<div>
{data}
</div>
)
}