
[英][nextjs]: getStaticProps missing params key during development
export const getStaticPaths = async () => { return { paths: [ { params: { slug: 'article-1' } }, { params: { slug: 'arti ...
[英]nextjs params not available during build
提示:本站为国内最大中英文翻译问答网站,提供中英文对照查看,鼠标放在中文字句上可显示英文原文。
我将 nextjs 13 与实验性应用程序目录一起使用。 我的应用程序使用动态路由,如下所示:
https://app.domain/[itemid]/[slug]
在我的[slug]目录中,如果我创建pages.jsx ,一个服务器站点路由,具有以下内容:
export default async function pageComponent ({ params, ...props }) {
console.log('params': params);
const data = await afunction(params.itemid);
...
当我以dev身份运行时,该应用程序按预期工作。 一个url如:
https://app.domain/44/pagetitle
正如我所料,在控制台中输出params.itemid = '44'
和params.slug = 'pagetitle'
。
我无法构建用于生产的应用程序。 如果我运行npm npm run build
,它会尝试编译page.jsx并发现pageComponent上的函数未定义,因为它没有params.itemid
。 用户从未针对特定的 url,因此在构建时没有生成任何参数。 参数来自不断增长的数据库中设置的动态值。 数据库中的各种值可能会被编辑,所以我不想要一个完整的 static 页面。
根据文档,我不确定我还应该如何处理这个问题。 我觉得我在这里错过了一步,但我觉得我不需要generateStaticParams
但也许我在这一步上错了?
毕竟,在我的情况下,解决方案是添加一个generateStaticParams
function。 在文档中的动态段下有一个对它的简单引用,我将其作为可选首选项阅读。 尽管我(还)对在构建时创建 static 个页面不感兴趣,但一旦构建和使用服务器端组件,我就无法在不使用它的情况下让参数工作。
对于我的用例,我尝试创建一个 static 页面,使用它:
export async function generateStaticParams() {
const staticParams = [
{
itemid: '4214',
slug: 'apagetitle'
}
]
return staticParams;
}
这使得应用程序能够成功构建。 请注意,这仅用于测试目的并试图更好地理解问题。 根据示例,这旨在为数据库的整个或大部分生成 static 页,文档中的示例很好地说明了这一点。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.