NextJS 将表单发布到内部 API

Posted 2023-03-30

【中文标题】NextJS 将表单发布到内部 API

【英文标题】：NextJS posting a form to internal API

【发布时间】：2021-08-23 11:06:59

【问题描述】：

在 Next.JS documentation 我读到了以下内容。

Note: You should not use fetch() to call an API route in getStaticProps. Instead, directly import the logic used inside your API route. You may need to slightly refactor your code for this approach.

Fetching from an external API is fine!

但如果我不应该使用内部 API，那么就会出现两个问题。

如何处理 POSTS？我应该通过 API 处理 POSTS / PUTS 等而不是 GETS 吗？我觉得这很奇怪。 如果我也不应该执行“内部 POSTS 等”，为什么还有 API 选项？

编辑：

嗯。我想原因之一是在使用 getStaticProps 并编译站点的静态版本时，@ compile time API 可能没有运行。但这可以通过同时运行 API 轻松解决。 （由于 GetStaticProps 与交互式页面并不真正相关，所以 POST 等）

编辑2：

这里有人也想通了。 Next.js - Error: only absolute urls are supported 分别运行导出和服务器，然后您可以在需要时获取静态道具。那么至少所有东西都在一个地方。

【问题讨论】：

你为什么要向getStaticProps 中的内部API 路由发送POST/PUT 请求？ Next.js 使用getStaticProps 在构建时预渲染页面。虽然存在 API 路由来处理客户端请求。

***.com/questions/62089870/… 有帮助吗？

我没有在 getStaticProps 中进行 POST 或 PUT。我明白那个。但我的观点是。可以说我也在制作一个移动应用程序（本机）。然后我希望我的 API 不仅可以处理 POST 和 PUT，还可以处理 getStaticProps 可能想要获取的任何内容。所以，我也想在这些情况下调用 API。所以不是fetchUsers() 我打电话给fetch('/api/users') 什么的。因为我也已经为移动应用做了这个。

【参考方案1】：

getStaticProps 函数用于在页面加载时在服务器端生成数据。

答案 1：您应该在 API 路由中处理 POST/PUT/GET 等。

答案 2：getStaticProps 和 API 的主要区别在于它们的运行时间。 getStaticProps 在服务器上生成页面时运行。 API 可以在您需要时随时调用。