问题标签 [getstaticprops]

For questions regarding programming in ECMAScript (JavaScript/JS) and its various dialects/implementations (excluding ActionScript). Note JavaScript is NOT the same as Java! Please include all relevant tags on your question; e.g., [node.js], [jquery], [json], [reactjs], [angular], [ember.js], [vue.js], [typescript], [svelte], etc.

0 投票
0 回答
47 浏览

typescript - Next.js | 错误:不变:getStaticProps 没有返回有效的道具。请报告这个

我有一个小问题,React 和 Next.js 用户可能会帮助我。

我正在学习 React(使用 Next.js),但getStaticProps. 疯狂的是 1 小时前它工作正常,但我不明白在此期间有什么可能会破坏它。

代码:

console.log 显示我有有效的可序列化数据:

我有这个错误:

我的代码似乎很正确,但疯狂的是我在互联网上找不到任何提及此特定错误的信息。

0 投票
1 回答
689 浏览

next.js - 在 NextJS 的 getStaticProps 中处理 API 调用的错误

我在 getStaticProps 中有多个 API 调用。我想单独处理每个 API 调用的错误。我怎样才能做到这一点?

0 投票
0 回答
183 浏览

reactjs - getStaticProps 没有返回数据

我正在尝试从 Storyblok API 获取数据,但在 getStaticProps 中我从故事书中获取数据,但它无法将数据返回到页面。

pages/docs/[slug].js

页面/_app.js

})

如果我使用 console.log() 显示数据,我会得到数据,但它不会返回它。

如果你能让我知道我做错了什么,我将不胜感激。

0 投票
0 回答
243 浏览

javascript - 使用 getStaticPaths 和 getStaticProps 在 nextjs 中使用 Airtable 中的表中的数据进行分页

我正在尝试使用来自 Airtable 中的表的数据在 Nextjs 中设置分页,但我无法弄清楚如何通过 getStaticProps 和 getStaticPaths 来实现这一点。

以下是我的目录结构的一部分

我在 posts/index.js 中编写了以下函数,以从后端 Airtable 表中检索数据。该函数预计将返回约 100 多条记录。

下面是我的 getStaticProps()

我需要将约 100 多条记录分页成每页 9 条记录,我只是无法弄清楚如何使用 getStaticProps 和 getStaticPaths 来做到这一点。作为尝试,我将 posts/index.js 重命名为 posts/[page].js 并如下修改 getStaticProps 以创建一个记录数组,每页分成 9 个。

以下是帖子的代码片段。

我什至不知道我上面写的 getStaticProps 是否有意义。此时我不知道如何编写 getStaticPaths 来创建路由。

任何帮助表示赞赏。顺便说一句,我是一个完全的js菜鸟,刚刚开始学习。

0 投票
1 回答
48 浏览

reactjs - 使用 getStaticProps 在反应中获取数据时出现问题

我目前正在尝试使用 getStaticProps() 函数在我的 Next.js 项目中获取一些数据,但我继续收到此错误:

TypeError:无法读取未定义的属性“地图”

我的代码如下所示:

任何指导将不胜感激,在此先感谢:)

0 投票
1 回答
149 浏览

next.js - 当下拉值更改nextjs时如何更改api调用

我正在开发一个作为日历的 nextjs 项目。当国家和年份更改日历应该更改并且我使用假期 API。API url 包含国家和年份参数(https://localhost:5001//holiday?&country=${country}&year=${year})。所以我需要通过国家和年份,在Holiday.tsx我使用下拉选择国家和年份。

我在获取数据方面很吃力。如何将这些选定的国家和年份值传递给index.tsx. 我不使用动态路径。我只有 index.ts。

api.ts

索引.tsx

Holiday.tsx - 这里的国家和年份变化

0 投票
2 回答
637 浏览

reactjs - 使用 NextJS 在 Vercel 上重新验证不起作用

我使用了 Vercel 文档中提供的示例,每隔 15 秒从 MongoDB 获取数据,但不幸的是该功能不起作用。我应该怎么做才能使其按预期工作?

0 投票
0 回答
247 浏览

javascript - 如何使用 Plaiceholder 在 Next js 中将我们的本地图像转换为 Base64

我一直在使用 plaiceholder 获取 base64 转换后的图像,以便在 next/Image 组件中传入 blurDataUrl。

这里我有两个问题:

  1. 我想保持这个imagePath动态,以便我可以在 blurDataUrl 中相应地传递多个图像和 url
  2. 当我使用它时,它给出了fs not found

卡了好久,求帮助

0 投票
1 回答
150 浏览

javascript - Next.js getStaticProps 将数据作为对象传递

我是使用 typescript 和 next.js 的新手。我正在使用 Vercel 部署 Next.js webapp,它将使用 Prisma 从 heroku postgresSQL db 中提取数据。我正在尝试使用 observable/d3 在页面上呈现一些数据,使用 getStaticProps 获取数据,然后将其传递给主页组件。

getStaticProps 中的第一个控制台日志以我想要的格式返回数据,一个对象数组:

将数据传递给 Home 组件后,data它被包装在一个对象中,如下所示:

我的绘图函数需要一个对象数组,但是在data使用 getStaticProps 将其传递给 Home 组件后,data会被“包裹”在那些 JS Curley 大括号中,我不希望这样。有人可以帮我理解为什么以及如何纠正这种行为吗?在两个 console.log 中使用 typeof 数据返回object

0 投票
0 回答
64 浏览

next.js - Next.js getStaticProps/getServerSideProps 最佳用例

我有一个使用 getStaticProps + getStaticPaths 从无头 WP 生成页面的博客 - 一切都很好。然后我有一个连接到数据库的组件,允许我链接到任何单个类别中的任何下一个帖子。然后在 ...postSlug 页面中使用该组件。

因此,如果我切换到使用 getServerSideProps 发布帖子,基本上该组件可以完美运行,因为它会在每个帖子被请求并在服务器上构建时更新“上一个”+“下一个”URL。但是,如果我使用 getStaticProps,除非我手动刷新页面,否则组件不会使用正确的 URL 进行更新。所以我需要在组件中使用一些客户端数据获取,使用 useState、useEffect 或 SWR 或其他东西 - 但我不确定最好的方法(或者即使这可行或者我是否应该使用gServerSideProps)。

任何帮助将不胜感激。谢谢!为清楚起见,以下组件已编辑...