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

Question

我正在使用 Next JS 制作一个全栈网络应用程序，我允许用户根据预定义的模板创建和管理字母（应用程序）。 因此，当用户成功创建应用程序时，它会被发送到托管在 Supabase 上的数据库 (POSTGRES)。 在首页，以列表的形式抓取用户创建的应用并展示。 在这里，当用户选择预览应用程序时，动态路由将在应用程序 ID 作为动态参数的位置放置。 通过getStaticPaths()从数据库中获取路由参数，然后在构建时在getStaticProps()方法中根据应用ID从数据库中获取页面的数据，渲染页面。 它可以在本地主机上无缝运行，但不能在 Vercel 上运行。 然而，有趣的是，动态路由在 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() function 中，我在构建时获取与应用程序 ID 对应的页面数据。 它在 localhost 中按预期工作，但在 Vercel 部署中，即使在执行函数之前，我也会收到 404 错误。 注意：Vercel 框架预设设置为 Next.js。

我尝试了多种解决方案，包括在 Link 组件中添加和作为参数。 此外，我将 vercel.json 文件更改为以下配置`

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

` 但似乎没有任何效果。

Answer 1

当他们创建应用程序然后尝试预览它时，系统会提示他们 404 错误。 但是，如果我手动或通过提交到我的存储库的主分支来触发重新部署，则会针对给出错误的特定应用程序修复错误。

这是预期的，要构建的每个动态页面所需的数据仅在构建时获取。 由于您使用的是getStaticProps ，您可以通过在getStaticProps添加一个revalidate道具来实现ISR ，这样当在构建时尚未生成页面（如新应用程序）时，Next.js 将在第一次请求时服务器渲染它然后缓存它用于后续请求。

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

如果您决定实施 ISR 并希望在服务器呈现页面时显示加载 UI，请确保在getStaticPaths和组件级别设置fallback: true ，您可以访问router.isFallback标志以相应地显示加载 UI ，否则，将其保留为您已经拥有的fallback: 'blocking' 。

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