nextjs 参数在构建期间不可用

Question

我将 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但也许我在这一步上错了？

Answer 1

毕竟，在我的情况下，解决方案是添加一个generateStaticParams function。 在文档中的动态段下有一个对它的简单引用，我将其作为可选首选项阅读。 尽管我（还）对在构建时创建 static 个页面不感兴趣，但一旦构建和使用服务器端组件，我就无法在不使用它的情况下让参数工作。

对于我的用例，我尝试创建一个 static 页面，使用它：

export async function generateStaticParams() {

    const staticParams = [
        { 
            itemid: '4214', 
            slug: 'apagetitle'
        }
    ]
    return staticParams;
}

这使得应用程序能够成功构建。 请注意，这仅用于测试目的并试图更好地理解问题。 根据示例，这旨在为数据库的整个或大部分生成 static 页，文档中的示例很好地说明了这一点。