我正在使用Next JS制作全栈Web应用程序,用户可以基于预定义的模板创建和管理信件(申请)。因此,当用户成功创建一个申请时,它会被发送到托管在Supabase上的数据库(POSTGRES)中。主页上会获取并以列表形式显示用户创建的申请。此后,当用户选择预览申请时,将放置动态路由,其中申请ID充当动态参数。通过使用
以下是关于动态[id].js页面的代码,我首先根据应用程序ID获取路径,然后在getStaticProps()函数中在构建时获取对应于应用程序ID的页面的数据。在本地主机中,它按预期工作,但在Vercel部署中,在执行函数之前,我会得到404错误。 注意:Vercel框架预设设置为Next.js。
我尝试了各种解决方案,包括向Link组件添加as和to参数。此外,我更改了我的vercel.json文件以符合以下配置。
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" }]
}
但是似乎什么都没有起作用。
getStaticPaths
е’ҢgetStaticProps
дёӯйғҪйңҖиҰҒгҖӮ - ivanatias