404页面未找到-Vercel部署-在Next JS中使用动态路由

Question

404页面未找到-Vercel部署-在Next JS中使用动态路由

javascriptnext.jsvercelcustom-error-pages

3

我正在使用Next JS制作全栈Web应用程序，用户可以基于预定义的模板创建和管理信件（申请）。因此，当用户成功创建一个申请时，它会被发送到托管在Supabase上的数据库（POSTGRES）中。主页上会获取并以列表形式显示用户创建的申请。此后，当用户选择预览申请时，将放置动态路由，其中申请ID充当动态参数。通过使用getStaticPaths()从数据库中获取路由参数，然后在构建时基于申请ID从数据库中获取页面数据的getStaticProps()方法，我们渲染页面。它在本地主机上可以无缝运行，但在Vercel上不行。然而有趣的是，对于过去的每个部署，动态路由都适用于先前的申请，这意味着如果用户想要预览他们的过去的申请，他们可以这样做，而没有任何问题，但当他们创建一个申请并尝试预览它时，就会提示404错误。但是，如果我手动触发重新部署或通过提交到存储库的主分支来重新部署，错误会被修复，特定的应用程序也会得到修复。

export const getStaticPaths = async () => {
  var APIendpoint;
  if (process.env.NODE_ENV === 'development') {
    APIendpoint = 'http://localhost:3000/api/fetchApplication'
  }
  else if (process.env.NODE_ENV === 'production') {
    APIendpoint = 'https://templaterepo.vercel.app/api/fetchApplication';
  }
  const data = await getPaths(APIendpoint)
  const paths = data.map((application) => {
    return {
      params: { id: application.appid.toString() }
    }
  })

 return {
    paths,
    fallback: 'blocking'
  }

}

export async function getStaticProps(context) {
  const appID = context.params.id;

  var APIendpoint;
  if (process.env.NODE_ENV === 'development') {
    APIendpoint = 'http://localhost:3000/api/fetchApplicationwithID'
  }
  else if (process.env.NODE_ENV === 'production') {
    APIendpoint = 'https://templaterepo.vercel.app/api/fetchApplicationwithID';
  }

  let data = await getPageData(APIendpoint, appID);
 
  return {
    props: { data }
  }
}

以下是关于动态[id].js页面的代码，我首先根据应用程序ID获取路径，然后在getStaticProps()函数中在构建时获取对应于应用程序ID的页面的数据。在本地主机中，它按预期工作，但在Vercel部署中，在执行函数之前，我会得到404错误。注意：Vercel框架预设设置为Next.js。

我尝试了各种解决方案，包括向Link组件添加as和to参数。此外，我更改了我的vercel.json文件以符合以下配置。

{
    "rewrites": [{ "source": "/(.*)", "destination": "/index.html" }]
}

但是似乎什么都没有起作用。

- Sounav Saha

1个回答

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- ivanatias · Accepted Answer

当他们创建一个应用程序并尝试预览时，会提示404错误。但是，如果我手动触发重新部署或通过提交到我的存储库的主分支来触发重新部署，那么该错误将被修复，特别是对于给出错误的特定应用程序。

这是可以预料的，每个动态页面构建所需的数据仅在构建时获取。由于您正在使用`getStaticProps`，因此可以通过在`getStaticProps`中添加`revalidate`属性来实现ISR，这样当页面（如新应用程序）未在构建时生成时，Next.js将在第一次请求时进行服务器渲染，然后将其缓存以供后续请求使用。

在开发模式下，getStaticProps和getStaticPaths都会按请求运行（就像getServerSideProps），这就是为什么您在开发环境中没有此问题的原因。参考文档。

如果您决定实现ISR并希望在页面被服务器渲染时显示加载UI，请确保在getStaticPaths上设置fallback：true，并且在组件级别上，您可以访问router.isFallback标志，以相应地显示加载UI，否则，将其保留为fallback：'blocking'。

此外，请确保直接在getStaticProps和getStaticPaths中编写服务器端代码，而不是在这些函数中调用自己的API端点。这是根据文档建议的。