重新加载托管在 Vercel 上的页面时，getStaticProps 不起作用

Question

我正在构建 nextjs 项目并面临重新加载页面时其中一个页面转到 404 的问题。

我在页面目录中使用 getStaticProps。

pages
    - blogs.tsx
    - blog/[slug].tsx
    - index.tsx
    - _app.tsx
    - _document.tsx

在 blogs.tsx 中，我调用 getStaticProps 获取要传递的 mdx 文件数据。

type BlogStaticInputs = {
    blogs: BlogsType[]
}

export const Index = ({ blogs }: BlogStaticInputs) => {
    return <Blogs blogs={blogs} />
}

// get all blogs data from './blogs'
export const getStaticProps: GetStaticProps = async () => {
    console.log('Before getting blogs...')
    const blogs = getAllBlogs([
        'date',
        'description',
    ])

    return {
        props: { blogs }
    }
}

查看vercel deploy日志后，我发现第一次成功打印了console.log('Before getting blogs...')，但是当我转到页面并重新加载时没有console.log输出，只显示404 .

话虽如此，由于当前 getStaticProps 实施在某些方面不正确，当我重新加载 ./blogs 页面时，nextjs 无法或试图找到一些不同的页面。

如果有人知道为什么当前 getStaticProps 函数没有触发并显示 404，就好像只有在重新加载页面时页面不存在一样。

当我第一次访问 /blogs 页面时，它正常运行。但是在我重新加载页面后，它会转到 404。

我已经设置了 trailingSlash = true，因为它似乎是解决方案之一，但不起作用。

module.exports = {
  trailingSlash: true,
}

Answer 1

我会post自己回答

我发现我需要传递 as 参数来指定 next/link 中的实际路径，如下所示。

<Link
     href="/blogs"
     as={`/blogs`} <- this was required
     passHref
>

重新加载托管在 Vercel 上的页面时，getStaticProps 不起作用

getStaticProps doesn't work when reload the page hosted on vercel

typescript

reactjs

next.js

vercel