在选择软件库或框架时,通常会考虑开发人员的经验。
当我提到“开发人员体验”时,我指的是开发人员实际上是如何完成工作的。 开发人员选择使用愉快的库或框架。
这是我们现在拥有最流行的库和框架的主要原因之一。 作为开发人员,当已经创建了现有工具来帮助我们完成任务时,我们不必从头开始。
框架是开发人员创建和使用以构建应用程序的软件片段,NextJS 就是其中之一。
在这篇文章中,我们将介绍 Nextjs、它的主要特性以及我们如何使用它来构建应用程序。 让我们直接跳进去。
Next.js 是什么?
Next.js 是一个 JavaScript 框架,用于快速轻松地构建静态网页和基于 React 的在线应用程序。 它允许您为各种平台(包括 Windows、Linux 和 Mac)设计出色的 Web 应用程序。
如果您对 React 不太熟悉,并且想了解有关 React 生态系统的更多信息,那么您应该熟悉 Next.js 框架。
尽管 Next.js 附带了您入门所需的一切,但您可以在 NPM 和 Yarn、JavaScript 和 TypeScript、CSS 和 SCSS、静态导出和无服务器部署之间进行选择。
特征
- 路由是自动完成的——您不需要配置任何东西,因为任何 URL 都映射到文件系统,映射到 pages 文件夹中的文件(当然,您有自定义选项)。
- 单个文件的组件 – 使用 styled-jsx 向组件添加样式很简单,它完全由同一个团队集成和制作。
- 重新加载热代码 – 当 Next.js 检测到保存到磁盘的修改时,它会重新加载页面。
- 动态组件——您可以动态加载 JavaScript 模块和 React 组件。
- 静态导出 – Next.js 允许您使用下一个导出命令从您的应用中导出一个完全静态的站点。
- 与环境的兼容性——Next.js 与 JavaScript、Node 和 React 生态系统无缝集成。
- 自动拆分代码——仅使用所需的库和 JavaScript 来呈现页面。 Next.js 不是创建包含所有应用程序代码的单个 JavaScript 文件,而是智能地将应用程序划分为许多资源。
如何创建 next.js 应用程序?
装置
您可以使用 node npx 命令安装和构建 Next.js 项目。
这将生成一个文件夹以及运行 Next.js 项目所需的所有文件、配置和其他项目。
您可以在生成应用程序后启动该应用程序。
页面和路由
要使用 Next.js 处理路由,我们不需要使用路由框架。 使用 Next.js 进行路由设置起来很容易。 当您使用 create-next-app 命令构建新的 Next.js 应用程序时,该应用程序默认创建一个名为“pages”的文件夹。
这个“页面”文件夹是您维护路线的地方。 因此,子目录中的每个反应组件文件都将作为单独的路由处理。
例如,如果文件夹包含这些文件:
- index.js
- 关于.js
- 文章.js
该文件将以三种方式自动转换:
- 索引页面 localhost/index
- 关于页面 localhost/about
- 博客页面 localhost/articles
about.js 页面的示例如下所示。 如您所见,没有提供有关该页面的任何内容。 它只是一个标准的 React 功能组件。
路线
要制作嵌套路由,您必须首先建立一个子文件夹。 例如:页面/文章。 在该文件夹中创建您的“contact.js”反应组件,它将生成页面 localhost/articles/contact。
如果您将一个文件放在 pages/articles.js 中,将另一个文件放在 pages/articles/index.js 中。 两者都反映了相同的路径 localhost/blog。 在这种情况下,Next.js 只会渲染 article.js 文件。 动态路由呢,每篇博文都有自己的路径:
- 本地主机/博客/第一篇文章
- 本地主机/博客/-第二篇文章
使用方括号表示法,您可以在 Next.js 中定义动态路由。 例如:pages/article/[slug].js
链接路线
您现在已经完成了您的第一条路线。 我猜你在问如何将页面连接到这些路线。 您需要“下一个/链接”来执行此操作。
下面是一个主页示例,其中包含指向“关于”页面的链接:
如果您希望设置链接样式,请使用以下语法:
重定向路线
如果您需要强制重定向到某个页面怎么办? 例如,当按下按钮时? 您可以通过使用“router.push”来完成此操作:
SEO
除了 HTML 正文中的数据之外,Web 应用程序中的页面还需要元(头)元素。 这将需要在 React 应用程序中安装一个名为 React Helmet 的额外需求。
我们可以使用 Next/head 中的 Head 组件轻松将元数据添加到我们的网页中,这些元数据将显示在搜索结果和嵌入中:
平台组件
您经常需要开发组件或布局文件。 例如,呈现导航栏的组件。 到目前为止,我们刚刚使用了 pages 文件夹。 如果你的组件不是一个路由页面怎么办?
您不希望用户导航到诸如 localhost/navbar 之类的页面。 如果将 Navbar.js 组件放在 pages 文件夹中,就会发生这种情况。 在这种情况下你应该怎么做?
只需将所有“非页面”组件存储在单独的文件夹中。 大多数 Next.js 项目使用绰号“组件”,并且此文件夹在项目的根文件夹中生成。
头部组件
初始页面加载由服务器端的 Next.js 呈现。 它通过修改页面的 HTML 来做到这一点。 包括标题部分。
Next.js Head 组件用于提供标题和元数据等标题部分标签。 在这个 Layout 组件示例中使用了 Head 组件。
未找到创建 404 页面
制作自己的404错误页面是可行的。 您可能希望自定义消息或添加您自己的页面设计。 在 pages 文件夹中,创建 404.js 文件。
当发生 404 错误时,Next.js 会自动重定向到该页面。 以下是个性化 404 页面的示例:
从服务器端获取数据
Next.js 允许您执行初始数据填充,而不是在客户端下载数据,这意味着发送已从服务器填充的数据的页面。
实现服务器端数据获取有两种选择:
- 应在每个请求上获取数据。
- 整个构建过程只获取一次数据(静态站点)
获取每个请求的数据
getServerSideProps 方法用于在服务器端呈现每个请求。 此函数可以包含在组件文件的末尾。 如果组件文件中存在该函数,Next.js 将使用 getServerSideProps 对象自动填充您的组件道具。
在构建时获取数据
getStaticProps 方法用于在构建时呈现服务器端。 此函数可以包含在组件文件的末尾。 此方法运行服务器代码并向服务器发送 GET 请求,但仅在我们的项目完成时执行一次。
为什么要学习 Next.js?
原因之一是因为 Next.js 构建在 React 之上,这是一个前端开发工具包,用于 创建用户界面 这是我设计 Web 应用程序时最喜欢的选择。
但是,如果 Next.js 不擅长它所做的事情,那还不够……对吧?
那么,它究竟是做什么的呢?
我们必须首先定义一些概念才能理解它。 Next.js 之所以受欢迎,是因为它解决了许多 Web 开发人员在使用客户端 Web 应用程序(在浏览器中)时遇到的问题。 这些单页应用程序 (SPA) 具有更好的体验,因为它们不需要用户重新加载页面并允许更多的交互性。
然而,由于像这样的应用程序中的大部分材料只有在浏览器中执行时才可见,因此网络爬虫很难理解此类应用程序的文本内容。
结果,尽管它们很受欢迎,但许多 SPA 在很大程度上对谷歌等大型搜索引擎来说仍然是匿名的。 Next.js 现在包含更强大的内置机制,用于 React 组件的服务器端渲染 (SSR)。
Next.js 允许开发人员在构建过程中在服务器上构建 JavaScript 代码,并向用户提供基本的、可索引的 HTML。
优点
- 非常适合用户体验
- 非常适合SEO
- 构建一个像动态一样的超快速静态网站
- 构建 UI 和 UX 的灵活性。
- 诸多发展优势
- 强大的社区支持
缺点
- 网站或应用程序有一定的时间来构建或开发。
- 对于某些任务,Next.js 是不够的。 开发人员应该能够使用 Node.js 工具构建动态路由。
结论
如您所见,Next.js 简化了 React 应用程序开发,并允许您专注于最重要的事情——您的应用程序逻辑和 UI。 它包括创建现代、前端丰富和 API 驱动的应用程序所需的一切。
由于它能够构建静态 HTML 页面,因此它也适用于纯内容项目,例如博客和商业网站。
在当前版本中,Next.js 不仅保持了高水平的开发人员体验,还提供了提高视觉性能和用户体验的工具,确保了该框架的光明前景。
发表评论