我发现docs有点含糊。给定一个列表的特许经营权,我想在构建时呈现相关的特许经营权详细信息页面,以避免在运行时访问CMS / API,因为它们不会经常更改。
但是,似乎即使相关页面是在构建时使用getStaticPaths
生成的,它们仍然需要getStaticProps
中的调用才能在运行时执行。这违反了生成静态页面的目的。
import {withLayout} from '../../components/layout';
import {getFranchises} from '../api/franchises';
const Franchise = (props) => {
console.info(props);
return (
<>
<h1>{props.name}</h1>
</>
);
};
export async function getStaticProps({params}) {
let data = await getFranchises();
let franchise = data.find(x => x.id === params.id);
return {
props: franchise
}
}
export async function getStaticPaths() {
let data = await getFranchises();
// Get the paths we want to pre-render based on posts
const paths = data.map(post => ({
params: {id: post.id},
}));
// We'll pre-render only these paths at build time.
return {paths, fallback: false}
}
export default withLayout(Franchise);
也许是我做错了,但是我确实在寻找一些有关如何在构建时使用next build
生成静态页面的文档/演示,该文档使用 build 中的API数据时间,并且不需要任何进一步的调用即可在运行时填充道具。
答案 0 :(得分:7)
getStaticProps
和getStaticPaths
都仅在构建时间运行。这就是这些功能的目的。您正在正确使用它。
在开发模式next dev
中,getStaticProps
和getStaticPaths
在每个请求上运行。