getStaticPaths 未在生产中创建路径

Question

我正在尝试连接 WordPress 和 next.js，并且在 dev 上一切正常，但生产版本有一个问题。

我有一个显示所有帖子的页面，在 WP 中添加新帖子后，我可以看到这个新添加的帖子，但是当我尝试打开链接时，我得到 404。我确定这个问题是由 getStaticPaths 引起。

这就是我的 slug 页面的样子

import {getAllPost, getPostBySlug} from "../../lib/api";

const PostPage = ({post}) => {
    return (
        <div className="container">
            <h1>{post.title}</h1>
            <div dangerouslySetInnerHTML={{__html: post.content}}/>
        </div>
    )
}

export const getStaticProps = async (ctx) => {

    const {slug} = ctx.params
    const post = await getPostBySlug(slug)

    return {
        props: {
            post
        },
        revalidate: 10
    }
}

export const getStaticPaths = async () => {
    const posts = await getAllPost()

    const paths = posts.map(post => ({
        params: {slug: post.slug}
    }))

    return {
        paths,
        fallback: false
    }
}

export default PostPage

getStaticPaths() 中的 getAllPost() 函数返回包含帖子标题和 slug 的对象数组。

Answer 1

您在静态路径中使用fallback: false，这意味着只有在构建期间可用的路径（在您的情况下为帖子）可以静态生成。所以不会显示其他帖子页面。

为了能够在部署项目后显示新添加的帖子，请使用fallback: true。