如何使用Vercel无服务器函数和NextJS的API路由

尼耳多
829 阅读3分钟

简介

Image description

你使用Next.js做你的前端应用程序。你是否知道，你可以使用Next.js创建一个Node API，并在本质上拥有一个后端应用程序😃！！！。

这是正确的，不需要使用Nodejs或其他webframeworks（如Express JS或Fastify）建立一个单独的后端应用程序。

因此，我通过阅读文档知道了这一点，但让我有点困惑的是，显然有两种选择呈现在我们面前。

首先是Vercel的无服务器函数，其次是Next.js的API路由。两者都允许你为API端点提供服务🤔。

Vercel是Next.js背后的公司，对我来说，最初的界限是模糊的，因为这两种实现似乎都很相似（剧透🚨这不是真的）。因此，在这篇文章中，我们将介绍这两种方法的区别，哪种方法可能适合你，以及如何使用这些方法来推进工作。

选项1：使用Vercel的无服务器函数

Image description

用Vercel创建无服务器函数只有一个软件包依赖，那就是Vercel，你不需要Next.js。这是一个零配置的部署。

要部署无服务器函数，你可以将
扩展名与支持的语言
和导出的函数相匹配的文件放在
项目根部的/api 目录中。

优点

  • 如果你想创建微服务并让多个应用程序使用你的API，那么使用Vercel的无服务器函数就非常好。
  • Vercel支持的语言包括Node.js、Go、Python和Ruby。更多信息和例子请看这里的官方文档。

如何安装/使用Vercel无服务器函数
如果你觉得选项1是你正在寻找的选择，这里有一些资源可以开始使用

选项2:用Next.js创建API路由
Next.js的API路由也为我们提供了创建无服务器API路由的能力，并预先配置为Next.js应用程序的完美后端伙伴。为此需要依赖Next.js。
使用Next.js创建API路由的方法是：在pages 目录（不是像方案1那样的根目录）中创建一个名为/api/ 的文件夹，并向其中添加文件。pages/api 文件夹内的任何文件都将被视为API端点。

  • 这些捆绑文件只是服务器端的，不会增加你的客户端捆绑文件的大小。因此，API文件夹将永远不会被运送到你的浏览器。

注意事项

  • 默认情况下，它们是同源的，这意味着如果你的域名是mySite.com/，那么只有来自该域名的请求才能访问你的API。如果你想让其他应用程序（来自其他域）访问这个API，它将被拒绝。你可以通过用CORS中间件包装请求处理程序来定制这种行为，也就是说，除了myDifferentSite.com/，我们可以允许其他一些受信任的网站访问API。

如何使用Next.js的API路由
选项2的一些资源

  • Next.js的文档是真正的黄金标准。它简明扼要，易于消化，为你涵盖了所有选项。

  • 在Egghead.io上有一个免费的视频教程。

相同点

  • 这两个选项的代码编写方式非常相似，所以这两个选项的一致性很好。
  • 因此，你可以选择任何一个选项，不必重新学习太多。

总结

  • 在引擎盖下，两个选项（1和2）都是一样的：它是对Lambda和其他无服务器函数的抽象，旨在成为一个零配置服务。
  • 如果你要构建的API是专门为你的Next.js前端配套应用服务的，那么Next.js的API路由就是你的选择。它是一个完美的后端伴侣，默认限制了起源，并可与中间件一起使用。
  • 从技术上讲，你可以用这两个选项实现同样的结果，但它们的配置迎合了不同的受众/使用情况。
avatar
文章
阅读
粉丝