Next.js:使用动态路由生成静态文件的 getStaticProps 和 getStaticPaths

Question

我正在寻找 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 生成静态页面的文档/演示使用来自 的 API 的数据构建 时间，并且不需要任何进一步的调用来填充 Prop 运行时间 .

Answer 1

两者 getStaticProps和 getStaticPaths仅在 运行构建时间 .这就是这些功能的目的。您正在正确使用它。
处于开发模式next dev然而，getStaticProps和 getStaticPaths在每个请求上运行。
getStaticProps (Static Generation)