如果您计划部署到Vercel，请按照我们的首席架构师提供的本教程进行操作。所以您正在考虑用下一个.js，嗯？或者你已经开始开发它，现在你想给你的应用添加身份验证。不管怎样，你都在对的地方。如果你刚刚开始用下一个.js，现在是学习如何向其添加身份验证的好时机。如果您已经有了一些事情要做，那么以正确的方式添加身份验证永远不会晚。在本文中，您将了解如何利用Passport来保护下一个.js应用程序。您将在这里了解到的方法的酷之处在于它甚至支持受保护路由的服务器端呈现（SSR）。也就是说，使用此设置，如果未知用户请求安全路由（那些只有经过身份验证的用户才能访问的路由），你的应用程序会将它们重定向到登录页面。另一方面，如果经过身份验证的用户试图加载相同的路由，则下一个.js应用程序将识别它们并在服务器上呈现页面。听起来很酷？如果是的话，继续读吧！"保护您的下一个.js使用Passport的应用程序很简单，即使支持必须保持保护的服务器端呈现路由。学习方法！"在推特上留言这个GitHub存储库是作者在撰写本文时创建的。如果需要，你可以用它作为参考。先决条件要阅读本教程，您需要节点.js安装了NPM。在继续之前，您应该下载并安装它们。你还需要一些反应的基本知识。您只需要了解组件和JSX的基本框架就可以了，但是如果您是一个完全的初学者，这将很困难。如果是你，在继续之前，你可以阅读我们关于构建和保护你的第一个React应用程序的文章。脚手架下一个.js应用您首先需要的是一个目录来存放项目的源代码。此外，您还必须将这个目录转换为NPM项目（如果您喜欢使用Yarn，请记住您必须相应地调整命令）。为此，从终端发出以下命令：#为应用程序创建目录mkdir nextjs护照#进去吧cd nextjs护照#把它作为一个NPM项目开始npm初始-y之后，使用以下命令将一些依赖项添加到新项目中：npm i body解析器引导dotenv\dotenv webpack express同构获取\下一步反应-反应引导\react dom样式的组件如您所见，这个命令正在安装许多依赖项。其中一些是必需的，有些是可选的。更具体地说，这些是必需的依赖关系：body parser：这个包允许您的Express应用程序解析不同类型的请求主体（例如application/json）dotenv：这个包帮助您从文件中读取环境变量。dotenv webpack:此包允许您调整下一个.js.快速：这个软件包可以让你更容易地定义一个后端应用程序。同构获取：这个包添加了一个同构获取函数，您可以在前端和后端使用。接下来，react和react-dom：这些包一起让您构建支持服务器端呈现的react应用程序。这些是可选的：bootstrap和react bootstrap：这些包允许您使用引导组件，而不必使用jQuery。样式化组件：这个包允许您在JavaScript中使用CSS。注意：如果选择不安装可选依赖项，则必须根据需要重构代码。另外，如果上面的解释含糊不清，也不要担心。很快，你将了解到这些零件是如何协同工作的。配置下一个.js项目在安装了这些依赖项之后，是时候配置它们了。对于初学者，请在项目根目录中创建一个名为.babelrc的文件，并向其中添加以下代码：//./.baberlc公司{"预设"：下一个/babel"]，"plugins"：[样式化组件"，{"ssr"：true}]]}此文件将使样式化组件与下一个.js让巴贝尔知道你正在开发这个软件包。需要使用next/Babel预置配置Babel，使这个包相应地编译代码。有了它，接下来要做的就是在项目根目录中创建一个名为.env的文件。目前，您将仅使用此文件定义应用程序将侦听的端口：#./.env.环境端口=3000稍后（设置身份验证时），您将向该文件添加更多属性。现在，您将创建一个名为下一个.config.js在项目根目录中，您将向其中添加以下代码：// ./下一个.config.js需要（"dotenv"）.config（）；const path=require（"path"）；const Dotenv=需要（"Dotenv webpack"）；模块.导出= {网页包：config=>{配置插件= 配置插件|| [];配置插件= [...配置插件,//读取.env文件新建Dotenv({路径：路径.连接（\u dirname，".env"），系统变量：真})];返回配置；}};这里的目标是帮助下一个.js解析刚刚创建的配置文件（即.env）。这样，在项目根目录中创建一个名为src的目录，然后在其中创建三个子目录：components、pages和state。要加快速度，可以使用以下命令创建这些目录：#p标志确保首先创建srcmkdir-p src/组件mkdir src/页mkdir src/状态下一个.js将使用src/pages作为主目录来定义应用程序中可用的路由（页面）。创建这些目录后，添加一个名为索引.js在src/pages中添加以下代码：//./src/页/索引.js从"styled components"导入styled；常量火箭=样式.div`文本对齐：居中；图像{宽度：630px；}`;函数索引（）{返回(

);}导出默认索引；接下来，您将创建一个名为_文档.js在src/pages中添加以下代码：//./src/页/_文档.js从"next/Document"导入文档{Head，Html，Main，NextScript}；从"styled components"导入{ServerStyleSheet}；导出默认类MyDocument extends Document{静态异步getInitialProps（ctx）{const sheet=新服务器样式表（）；const originalRenderPage=ctx.renderPage页面;试试看{ctx.renderPage页面= () =>原始效果图({增强应用程序：应用程序=>道具=>集合表样式（）});const initialProps=等待Document.getInitialProps（ctx）；返回{…首字母缩写，风格：({initialProps.styles}{sheet.getStyleElement()})};}最后{密封片();}}渲染（）{返回(在在);}}上面的代码使用一个名为getInitialProps的静态函数定义了一个类，该函数可能看起来很混乱。不用担心这个方法。它的目的是下一个.js设置好服务器端的样式（使服务器端的组件能够正常工作）。除此之外，这个类还定义了render方法，以便能够在HTML上注入引导的样式表下一个.js生成。注意：默认情况下，页面下一个.js跳过周围文档标记的定义。也就是说，永远不会在页面上包含html和body标记。要覆盖默认结构，您需要_文档.js文件。要包装此部分中的内容，请打开包.json文件并将脚本属性替换为：// ./包.json"脚本"：{"dev"："下一步。/src"},注：默认情况下，下一个.js将使用项目根目录来查找源代码（例如，pages目录及其路由）。但是，本文使用src目录使事情更有条理。因此，您需要添加./src来告诉下一个.js关于这个变化。随意移动物品以更好地满足您的需要。在定义了dev脚本之后，可以从终端执行npm run dev来运行下一个.js应用程序。如果一切正常，几秒钟后，你就可以打开了：3000/在web浏览器中。发展下一个.js应用在本节中，您将开发一个下一个.js允许用户做两件事的应用程序：分享他们的想法（类似于他们在Twitter上做的事情）和消费别人分享的想法。目前，这些想法将没有关于输入它们的用户的信息（即没有身份管理）。在下一节中，您将向您的应用程序添加身份验证，并使其将想法链接到用户。使用构建自定义API下一个.js为了支持这个应用程序，您需要一个API，它可以在请求时提供思想服务，并且能够保存用户共享的新思想。要构建这个API，首先要创建一个名为thinkings的文件-api.js标准在src中；然后将以下代码添加到此文件：//./src/想法-api.js标准const bodyParser=require（"正文解析器"）；const express=要求（"express"）；常数路由器=快速路由器();路由器。使用(bodyParser.json());常数思想=[{id:123，留言："我喜欢意大利香肠披萨！"，作者："未知"}，{u id:456，消息："我在看Netflix。"，作者："未知"}];路由器.get（"/api/thoughts"，（请求，响应）=>{const orderedThoughts=想法。排序（（t1，t2）=>t2.\u id-t1.\u id）；回复发送（有序思维）；});路由器.post（"/api/thoughts"，（请求，响应）=>{const{message}=需求主体;常数新思想={_id:new Date（）.getTime（），消息，作者："未知"};想法。推（新思维）；回复发送（{留言："谢谢！"});}