API 路由详情

以下是关于 API 路由 的一些关键信息。

不要在 getStaticProps 或 getStaticPaths 中调用 API 路由

不应 在 getStaticProps 或 getStaticPaths 中调用 API 路由。相反，应直接在 getStaticProps 或 getStaticPaths 中编写服务端代码（或调用辅助函数）。

原因如下：getStaticProps 和 getStaticPaths 仅在服务端运行，永远不会在客户端执行。此外，这些函数不会包含在浏览器的 JS 包中。这意味着你可以编写直接查询数据库等代码，而无需将其发送至浏览器。阅读 编写服务端代码 文档了解更多。

典型用例：表单输入处理

API 路由的一个典型用例是处理表单输入。例如，你可以在页面创建表单并让其发送 POST 请求至 API 路由，然后编写代码将数据直接保存至数据库。API 路由代码不会包含在客户端包中，因此可以安全地编写服务端代码。

export default function handler(req, res) {
  const email = req.body.email;
  // 然后将 email 保存至数据库等...
}

预览模式

当页面从无头 CMS 获取数据时，静态生成 (Static Generation) 非常有用。但若你在无头 CMS 上撰写草稿并希望立即在页面上 预览 时，静态生成就不理想了。此时你希望 Next.js 在 请求时 而非构建时渲染这些页面，并获取草稿内容而非已发布内容。你希望 Next.js 仅针对此特定情况绕过静态生成。

Next.js 的 预览模式 (Preview Mode) 功能可解决上述问题，该功能利用了 API 路由。了解更多请参阅 预览模式 文档。

动态 API 路由

API 路由可以像常规页面一样支持动态路由。详见 动态 API 路由 文档。

总结

在下一个也是最后一个基础课程中，我们将讨论如何将 Next.js 应用部署至生产环境。