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

【问题标题】：getStaticProps doesn't work when reload the page hosted on vercel重新加载托管在 vercel 上的页面时，getStaticProps 不起作用
【发布时间】：2022-02-02 15:13:09
【问题描述】：

我正在构建 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部署日志后，我注意到console.log('Before getting blogs...')第一次打印成功，但是当我转到页面并重新加载时，没有console.log输出，只显示404。

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

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

当我第一次访问/blogs 页面时，它可以正常工作。但是在我重新加载页面后，它会进入 404。

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

module.exports = {
  trailingSlash: true,
}

【问题讨论】：

这是在生产模式下的预期。 getStaticProps 在构建时在服务器上运行一次，它不会在对页面的每个请求时触发。但是，它确实是run on every request in development mode。

标签： reactjs typescript next.js vercel

【解决方案1】：

我会自己发布答案。

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

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

【讨论】：