繁体   English   中英

nextjs 参数在构建期间不可用

[英]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 页,文档中的示例很好地说明了这一点。

问题未解决?试试本站强大的搜索功能,搜索: nextjs 参数在构建期间不可用
如何仅在 NextJS 站点构建期间使用 getInitialProps?

[英]How can I use getInitialProps only during the NextJS site build?

使用 NextJS 构建静态站点时,我希望getInitialProps方法仅在构建步骤期间触发,而不是在客户端上触发。 在构建步骤中,NextJS 在使用每个组件呈现的 HTML 生成页面的静态 HTML 之前运行getInitialProps 方法。 在客户端,NextJS 也会在页面组件呈现 ...

服务器端渲染构建错误期间 Gatsby 窗口不可用

[英]Gatsby window not available during server side rendering build error

我正在尝试构建我的 Gatsby 站点以部署到生产环境,但我遇到了一个问题,我认为这与我的应用程序中的一行代码有关,我使用window重定向到从 GET 请求中检索的外部 url单击按钮即可完成。 我试图通读有关此问题的文档并尝试使用他们的窗口检查条件,但我的重定向要么不起作用,要么收到与Can't ...

Nextjs - 在服务器端访问 url 参数

[英]Nextjs - access url params on server side

我正在使用官方with-apollo示例来创建 nextjs 前端。 我正在尝试使用用户的 slug,可以在 url 字符串中找到它来呈现用户配置文件。 但是,我无法在 graphql 查询中使用 url 参数(slug)作为变量。 用户资料的链接 用户配置文件组件 用户个人资料页面 ...

使用 NextJS + Auth0 传递查询参数或正文?

[英]Passing query params or body with NextJS + Auth0?

所以,我对 next 和 JS 的一般知识和我的 Auth0 知识一样非常少。 我想知道是否有人可以建议如何将查询参数或请求正文传递给下面的第一个代码块? 我知道我可以向fetch函数添加一个正文,但是当我尝试在下面的/pages/profile块中执行此操作时,它似乎中断了请求。 更好的办法是 ...

无法将查询参数添加到 nextjs 动态路由

[英]Can not add query params to the nextjs dynamic route

我有文件命名。 [slug].js 。 我想做的是我想向这个动态路由添加查询参数,这是代码。 每 static 页面都可以正常工作,但在动态页面上它会给我这个错误: 有什么建议吗? ...

如何使用 next.js 静态呈现动态页面,使得动态页面数据在构建期间不可用?

[英]How to statically render dynamic pages using next.js, such that the dynamic pages data is not available during build time?

根据 next.js 的当前文档,通过向getStaticProps和getStaticPaths提供路由数据来处理动态路由。 当在构建期间从数据库中获取路由数据时,什么概念将使我能够使用或不使用getStaticProps()和getStaticPaths()来实现动态路由? ...

暂无
暂无

声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2023 STACKOOM.COM