差不多3年前，维塞尔发布了下一个.js，一个以简单但可定制的方式构建单页Javascript应用程序的极简框架。由于专注于性能和对服务器端渲染（SSR）的现成支持，他们在NPM上的每周下载量超过28万次，在GitHub上达到40000星。这个下一个.jsshowcase证实了该框架的成功，该框架目前正被包括Netflix在内的大小公司所使用，比例.ai，惊奇漫画，杰特，甚至Auth0。新工具，新挑战提供支持身份验证的解决方案下一个.js是平台中最需要的功能之一。但为什么呢？我们不能用我们在React和节点.js（例如：passport，auth0.js，…）？下一个.js模糊了前端和后端之间的界限，使现有的生态系统不太理想下一个.js充分发挥潜力。一个例子是Passport，它取决于快递的可用性。虽然你可以在你的下一个.js应用程序，它将使所有的性能改进只是淡出。如果您希望针对快速冷启动进行优化，并希望提高可靠性和可伸缩性，则需要转向无服务器部署模型。有不同的方法来构建和部署应用程序下一个.js而且，在这篇博客文章中，我们将介绍这些用例，并解释您可以最好地使用什么机制进行身份验证。身份验证意味着什么下一个.js？当你在建造一个下一个.js应用程序，在以下情况下可能需要身份验证：访问页面时："我的发票"访问API路由时：/API/my/invoices当应用程序调用托管在下一个.js代表用户的应用程序：来自网站到billing.mycompany.com/api现在，我们已经了解了应用程序可能在何时何地需要身份验证，接下来让我们研究一下可以针对不同情况实现的身份验证策略下一个.js部署模型。下一个.js静态场地法下一个.js允许您生成独立的静态应用程序，而不需要节点.js服务器。当您运行next build时，该命令将为支持它的每个页面生成HTML文件。您可以使用这个生成的输出将站点部署到任何静态托管服务上，比如Now、amazons3或Netlify。这种技术可以用来生成完整的网站作为静态站点，比如公司的公共首页，或者当你创建一个"管理仪表板"时。生成的HTML可能只是应用程序的外壳——可以将此外壳看作应用程序的页眉和页脚。Vercel dashboard是最好的例子之一，可以看出它的样子：一旦提供了"shell"，客户端将调用必要的api（携带用户信息），获取特定于用户的内容，并更新页面：这种模式在托管方面有几个优点。静态托管站点（如Vercel、amazons3、azureblob Storage、Netlify等）都经过了实战考验，价格低廉，但更重要的是，它们速度极快，能很好地与cdn打交道。有一点不同的是我们如何处理身份验证。服务器可用的模型可以处理与Auth0的交互并创建会话，但是在这个模型中，我们没有后端。所有工作都在前端进行：用户被重定向到Auth0。当用户成功登录后，他们将被重定向回应用程序。客户端将完成与Auth0的代码交换，并检索存储在内存中的用户id_令牌和access_令牌。如果您的用例需要动态内容或特定于用户的内容，那么您还需要部署其他东西，比如API。这个API不能作为静态宿主站点的一部分运行，所以您可以使用AWS Lambda、Heroku或现在这样的平台来部署它。然后，客户端将通过提供access_令牌直接与该API通信，获取动态内容，并充实静态托管平台提供的页面。这与构建任何单页应用程序的方式非常相似，其中应用程序没有实际的"后端"，而是调用一个或多个api。如何在社区中找到各种类型的标志：useAuth（使用auth0.js）Auth0 React快速启动（使用Auth0 spa js）use-auth0-hooks（使用auth0 spa js）例如，使用use-auth0-hooks，只需按如下方式配置应用程序即可：从'use-auth0-hooks'导入{Auth0Provider}；默认导出根类扩展应用程序{呈现（）{const{Component，pageProps}=这个。道具;返回();}}然后您可以使用React Hooks检索用户并为您的一个api请求访问令牌。转到此处以了解有关使用的更多信息下一个.js反应应用。然后，当您调用API时，access_令牌会随之发送，下面的示例通过useApi钩子进行发送：从'use-auth0-hooks'导入{useAuth}；导出默认函数MyShows（）{const{isAuthenticated，isload，accessToken}=useAuth({观众：'https://api/电视节目',范围：'阅读：显示'});如果（！已验证）{返回(

您必须先登录才能访问订阅。

；)}如果（正在加载）{返回(

正在加载用户信息…

);}const{response，正在加载}=useApi(`${process.env.API_基_URL}/api/my/显示`，访问令牌);如果（装载）{返回(订阅{用户电子邮件}

正在加载订阅…

);}返回(订阅{用户电子邮件}