next.js 下一步.js:getStaticProps和getStaticPaths使用动态路由生成静态文件

enxuqcxy  于 2023-02-12  发布在  其他
关注(0)|答案(1)|浏览(133)

我发现这些文档有点模棱两可。给定一个特许经营列表,我希望在构建时呈现相关的特许经营详细信息页面,以避免在运行时碰到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生成静态页面的文档/演示,next build构建时使用来自API的数据,并且在运行时不需要任何进一步的调用来填充 prop 。

x8diyxa7

x8diyxa71#

getStaticPropsgetStaticPaths都主要在构建时运行,这是它们的用途。
请注意,在开发模式(next dev)下,它们会在每个请求上运行。

相关问题