在本系列教程中，将向您介绍如何下一个.js可以帮助您构建web应用程序。由ZEIT创建，购物领券，ZEIT是一家云计算公司，负责托管前端和无服务器功能，下一个.js是一个React框架，能够创建在客户端和服务器上运行的应用程序，也称为通用JavaScript应用程序。此框架通过简化客户端路由和页面布局等基本功能，同时简化服务器端呈现和代码拆分等高级功能，数据挖掘和大数据，帮助您更快地构建通用应用程序。这个Nextjs系列的第一部分向开发人员展示了如何创建页面和布局。在本系列的第二部分中，您学习了如何添加样式和创建主题。在本系列的第三部分中，您将学习如何使用下一个.js9，编写时的最新框架版本。建议您熟悉React库。建立项目如果您从这一部分开始，您可以通过克隆回购并检查第二部分分支来获取在前一部分第二部分中构建的应用程序：git克隆git@github.com：auth0博客/whatabyte next-简介.gitwhatabyte公司cd whatabyte公司git结帐第2部分如果您没有使用SSH连接到GitHub，请使用HTTPS URL克隆repo：git克隆https://github.com/auth0-blog/whatabyte-next-intro.gitwhatabyte公司cd whatabyte公司git结帐第2部分存储库被克隆到本地计算机上名为whatabyte的目录中。如果目录不存在，则创建它。签出分支后，继续安装项目依赖项：npm安装最后，在终端中执行以下命令以运行应用程序：npm运行开发要查看应用程序的运行情况并开始遵循教程，请访问：3000。理解下一个.js路由WHATABYTE应用程序有四条核心路线：/探索：展示时尚餐厅和菜肴/nearme：显示用户附近的餐厅/mycart：显示用户的订单/profile：显示用户信息，如姓名、地址和帐单数据在这四条核心路线中，探索路线将是主要路线。因此，根路径/，应该重定向到/explore。首先，要熟悉下一个.js，您将通过在索引页的内容容器中添加超链接，从索引页导航到浏览页。使用下一个.js内部链接组件索引.js具体如下：//页数/索引.js从"next/Link"导入链接；从"./components/Layout"导入布局；常数索引=（）=>(
欢迎来到WHATABYTE！现在就开始探索吧);导出默认索引；这个下一个.js链接组件将路由或导航路径作为其href属性的值。您可以在Link中嵌入任何其他组件，只要该组件可以使用href prop。在浏览器中更新视图后，请访问：3000/然后单击链接。它将带您进入浏览页面。使用此链接导航到另一个页面对于测试来说是很好的，但是应用程序需要的是导航栏组件。为此，您需要一个NavButton组件来创建标准的、易于维护的四个导航按钮。为了使按钮看起来更漂亮，您将使用FontAwesome图标。使用另一个控制台窗口或选项卡，安装以下软件包：npm i@fortawesome/fontawesome svg核心\@fortawesome/free实心svg图标\@fortawesome/react fontawesome公司Windows PowerShell:npm i@fortawesome/fontawesome svg核心`@fortawesome/free实心svg图标`@fortawesome/react fontawesome公司如果可以动态地将所有的配置封装在它的导航栏中会容易得多。在whatabyte目录下，创建一个config子目录：mkdir配置在这个新的子目录中，创建一个按钮.js其中的文件：触摸配置/按钮.jsWindows PowerShell:ni配置/按钮.js然后，填充按钮.js具体如下：//配置/按钮.js从React导入React；从"@fortawesomeicon}@fortawesomeicon}"导入；进口{faCompass公司，Famapmarkerald公司，福泽，马车}来自"@fortawesome/free solid svg icons"；常量导航按钮=[{label:"探索"，人工智能知识体系，路径："/explore"，图标：},{label:"靠近我"，路径："/nearme"，哪个云服务器好，图标：},{label:"我的购物车"，手机网站建站，路径："/mycart"，图标：},{label:"配置文件"，路径："/profile"，{Fontaweicon:(

{道具图标}

{道具标签}在

);导出默认导航按钮；导航按钮需要适当的样式。创建导航按钮.scss作为同级文件：触摸组件/导航按钮.scssWindows PowerShell:镍元素/导航按钮.scss然后填充导航按钮.scss使用以下样式规则：//组件/导航按钮.scss.导航按钮{显示器：柔性；弯曲方向：立柱；调整内容：周围空间；对齐项目：居中；高度：100%；光标：指针；.图标{字号：20px；}.标签{字号：12px；文本转换：大写；}}在布局组件中导入按钮配置文件，并将其数据作为navButtons属性传递到NavBar组件：//组件/布局.js从"next/Head"导入Head；从"./Header"导入头；从"./NavBar"导入NavBar；进口"/布局.scss";进口"/索引.scss";从"../config/buttons"导入导航按钮；const Layout=道具=>{const appTitle=`>WHATABYTE`；返回(

{儿童道具}

);};导出默认布局；最好由Layout组件负责将按钮配置传递给NavBar组件，因为它负责为应用程序的每个页面强制执行一致的结构。如果您想保持Layout作为一个表示组件，那么您可以将其包装到一个容器组件中，该组件向它传递按钮配置数据。要呈现导航栏组件中的按钮，请更新导航栏.js文件如下：//组件/导航栏.js进口"/导航栏.scss";从"./NavButton"导入NavButton；const NavBar=道具=>(