问题标签 [getstaticprops]

我有一个组件通过单击我注册后发送的帐户验证电子邮件中的链接来调用我的服务器来呈现响应（已成功验证，已验证，并且此令牌已过期） 。

在极少数情况下，UI 会呈现，但它的内容不会，所以我正在阅读有关getStaticProps 和 getStaticPaths的 Next 文档，并认为我需要预渲染\o/

现在我useEffect在组件中使用钩子：

但我现在想做的是用预渲染的数据填充这个坏男孩，

我被困在如何处理它上，因为在组件级别上，正如您所看到的，我创建了一些对 axios 调用做出反应（哈！）的钩子。我不知道如何连接getStaticProps阅读文档感觉就像你需要使用getStaticPaths它......

任何帮助，将不胜感激！

原始问题发布在Github 讨论中。但目前还没有人回答这个问题。所以让我们在这里试试我的运气。

语境

我正在尝试建立一个平台（又名 web-2.0）网站，用户将在其中创建大部分内容，比如 Ebay。我决定useSWR在页面加载后使用来获取用户特定的数据。现在，我在加载可缓存和支持 SEO 的页面骨架数据getStaticProps之间进行选择。getServerSideProps

getStaticProps生成 HTML 和 JSON 文件，这两者都可以由 CDN 缓存以提高性能。

从文档中，它没有详细说明getStaticProps应该如何在生产中提供 CDN。我想知道它是否仅指纯静态的类似博客的网页，它们不使用fallbacknor regeneration。我有一种感觉，getServerSideProps在 server/lambda 前面使用 CDN 可能是一种更简单、性能更高的缓存架构。

问题

是否应该使用具有后备和再生功能的 NextJSgetStaticProps来为用户制作的内容 Web 应用程序提供服务？

要得到这个问题的答案，我相信我需要先了解一些事情：

我不知道的事情，我找不到任何相关文档

1. getStaticProps如上面提到的文档，应该如何使用 CDN 提供具有 、 后备和重新生成的页面？
2. 使用回退时，网络请求是否必须始终通过 NextJs？是否有将预渲染页面的 CDN 放在 server/lambda 前面同时支持fallback&的示例regen？我的想法是避免服务器命中并在有预呈现页面时节省更多的处理时间和资源。
3. 是否支持将新生成的 HTMLfallback和regenerationJSON 保存在 S3 等远程存储中，并让 NextJS 从中读取？
4. 如果上述问题的答案是否定的，那么当无服务器时，比如 Lambda，它如何重用新生成的文件？它是否依赖于非冷 Lambda 容器内存/状态？使用服务器时，我可以跨服务器共享新生成的工件吗？

我可能错过了一些文档。任何线索、链接或更正将不胜感激。

提前感谢=]

更新

我找到了更多信息，如下所示

1. 无服务器 NextJs 当前架构
2. 无服务器 NextJs RFC 回退
3. NextJs RFC 关于增量静态再生

对于剩下的问题，我已经在这篇文章中向 NextJS提出了这些问题。

我正在尝试使用getStaticProps来简单地发出请求，然后将该数据从它传递给组件：

但我收到了这个错误：

FetchError： https ://www.ajmadison.com/product3.0/packages.index.json.php?sku=RF28R7351SR 处的无效 json 响应正文 原因：JSON 中位置 0 处的意外令牌 <

我试图对其进行字符串化，但这没有用！我也对评论感到困惑：

该函数在服务器端的构建时被调用。它不会在客户端调用，因此您甚至可以直接进行数据库查询。请参阅“技术细节”部分。

然后如您所见，有一条评论指出：

调用外部 API 端点以获取帖子。

但是在他们的文档中有一个关于 API 路由的完整部分

任何人都可以帮助我这是怎么回事？

更新

Alexey 提供了一些很棒的见解，但就像我对他说的那样，我在 axios 文档中找不到更改用户代理！

Next.js 初学者在这里，希望获得有关使用getStaticPaths和getStaticProps使用包罗万象的路线的指针。大多数 Next.js 9.3+ 博客启动器似乎仅基于一个级别的博客文章（例如，，/posts/post-1.md等/posts/post-2.md），但我徒劳地试图找到的是一个启动器 - 或者只是一组说明 - 解决处理，比如说，/posts/yyyy/mm/postname.md通过/pages/posts/[...post].js。

当然，我确实阅读了有关这些项目的 Next.js 文档，但我发现它们至少在这种特殊情况下有点帮助。我确实意识到它们是为更有经验的 Next.js 开发人员编写的。来自https://nextjs.org/docs/routing/dynamic-routes的这一项让我现在尽可能接近，但还不够远：

如果页面名称使用包罗万象的路由，例如pages/[...slug]，params则应包含slugwhich 是一个数组。例如，如果这个数组是['foo', 'bar']，那么 Next.js 将在 处静态生成页面/foo/bar。

我尝试使用fs-readdir-recursive来读取/posts/目录的各个级别并且有效，但是它给我的东西并没有产生getStaticPaths想要的数组。我确定我只需要按摩结果，但找不到任何示例来帮助我弄清楚。（大多数确实比一级场景更进一步的例子似乎处理从数据库中获取，也许是因为我试图找到的场景被认为太简单了。对于非初学者来说可能是这样，但是......）

我正在尝试创建一个菜单组件，该组件在构建时读取 pages 文件夹的内容。然而我没有任何成功。这是我尝试过的：

这不起作用，组件没有收到 pages 道具。我尝试过切换到一个功能组件，从 中返回一个 promise getStaticProps()，切换到getServerSideProps()，并将目录读取代码包含到 render 方法中。

前两个不起作用，因为除非组件是页面getStaticProps()，getServerSideProps()否则永远不会被调用，并且在 render 方法中包含代码失败，因为 fs 未定义或可导入，因为代码可能在没有 fs 的前端运行使用权。

我还尝试将代码添加到内部的getStaticProps()函数中_app.js，希望通过上下文将页面推送到组件，但似乎getStaticProps()也没有在那里调用。

我可以在包含菜单的页面的 getStaticProps 函数中运行代码，但我必须对每个页面重复该操作。即使我将逻辑提取到从 getStaticProps 调用的模块中，也像：

然后通过 Layout 组件将页面传递给页面内的导航组件：

那么这仍然是很多样板要添加到网站上的每个页面。

肯定有更好的办法……不可能是没有办法在构建时给全局状态添加静态数据吧？如何在构建时生成动态菜单？

我知道这个话题并不新鲜，我发现（并阅读了）一些讨论。我找不到的是我仍然存在的问题的答案。

其他人如何解决无法在 _app.js 中使用 getStaticProps 的问题？getInitialProps对我来说不是一个选项，因为我想使用SSG。即使使用 getInitialProps 也有办法强制 SSG吗？或者我真的必须在每一页上从我的 Headless CMS 中获取我的所有数据吗？例如，因为我想构建一个页眉（包括导航）和一个页脚。目前我看到的唯一选择是重复大量代码。

任何提示都非常感谢并感谢您的阅读！

我是第一次使用 Nextjs。

我正在尝试创建多个布局，这些布局将包含在一个<Header><different-layouts-for-each><Footer>结构上。

我面临的问题是 getStaticProps 或 getServerProps 只能在页面级别运行。

由于我需要在导航上进行 SEO，我想我应该使用上述两种方法之一在每个页面文件上获取它的道具。

这里的问题是我必须在每个页面上获取菜单道具，但是有不同的模板我必须在所有这些模板上重复自己，以便静态或预呈现内容并使 SEO 可读。

在组件上获取菜单道具<MainNav>将是理想的情况。

我尝试在组件上执行 asnyc/await：

<Header>零件

<MainNav>零件

这里的问题是这将返回一个承诺，并且 html 将显示“正在加载”而不是实际的菜单 html。

有什么帮助或文章可以帮助我吗？

谢谢。

使用 nextjs 10，您可以拥有一条包罗万象的路线，看起来像这样[...id].tsx。这个想法是，这将允许动态页面。所以它应该匹配/example,/example/new等/example/new/latest。

我面临的问题是特定匹配的路线（例如/example/new）可能需要额外的数据才能正确呈现。看到我的pages文件夹中只有一个文件，我只能访问一个getStaticProps电话。为所有可能的路线获取所有可能的数据似乎非常浪费。

在组件级别获取服务器端数据将解决他的问题，但这似乎不是 nextjs 中支持的功能

有没有推荐的解决方法？基于内部上下文的条件数据获取getStaticProps？

使用 Next.js ，我目前有一个带有 /pages/[...slug]/index.ts 形式的单一入口点的应用程序

它包含一个 getServerSideProps 函数，该函数分析 slug 并决定重定向

在某些情况下需要重定向，但它总是指向可以静态呈现的页面。示例：将 /fr/uid 重定向到可以是静态的 /fr/blog/uid。在其他情况下，slug 已经是可以是静态的页面的 url。

如何将此动态元素与所有页面的静态生成混合？

非常感谢你的帮助！

While usign the getStaticPaths() and getStaticProps() I am getting the error NextJS: "TypeError: Cannot read property 'toLowerCase' of undefined"