下一个.Js是闪电般的速度 反应 这个框架受到Hulu和Netflix等数据密集型流媒体网站的信任. 如果你已经精通反应, 您一定要了解这种日益流行的技术.
尽管反应和下一个.Js帮助创建有效的web用户界面,它们有一些关键的区别: 下一个.js是 更多的 功能丰富的 比反应更固执己见. 它特别适合于网站专注于搜索引擎优化(搜索引擎优化)或 呈现前.
下一个.js和. 反应
反应于2013年首次亮相,比下一个更成熟.js. 但在2016年发布的更年轻的框架越来越受欢迎,有超过1000个 113K GitHub星 截至2023年10月,每周数百万次 npm下载. 让我们来看看两者在四个主要方面的比较:
-
发展速度: 下一个.js提供了开箱即用的特性,简化了制作高级反应应用程序的开发过程. 在下一个中引入了自己的编译器.Js 12框架还提高了构建速度. 与反应相比,下一个.Js减少了工程师等待代码刷新所需的时间, 最大限度地减少开发人员的挫败感和速度减慢.
-
数据获取和加载时间: 下一个.js可以遍历反应树并查询服务器中的数据,从而允许预加载页面数据. 这通常会降低由下一个提供服务的页面的应用程序加载时间.与用普通反应编写的页面相比.
-
渲染和搜索引擎优化: 下一个.js提供预渲染,而反应使用客户端渲染. 预渲染页面启用有效 搜索引擎优化策略 这在一个普通的反应应用中是很难实现的.
-
路由: 下一个.Js为路由提供了结构化的、预定义的文件系统. 与反应的各种库选项(如.g., 反应的路由器),但简化了页面设置和路由.
反应可以很好地服务于各种项目类型, 包括用户仪表板, 后端系统, 内部组织工具, 和 数据可视化系统. 下一个.Js是用于增强的理想工具包 反应的应用 这得益于预渲染的力量, 包括电子商务商店, 社交媒体应用, 票务代理系统, 以及教育平台. 让我们更详细地探讨一下它的一些用例.
下一个中的渲染.js
渲染是将反应代码转换为HTML的过程,然后浏览器将其显示为页面的用户界面. 下一个.js提供了三种呈现方法——客户端呈现(CSR), 服务器端呈现(SSR), 和静态站点生成(SSG),以及额外的好处 增量静态再生(ISR). ISR将服务器端呈现与半静态缓存机制结合起来,减轻了服务器负载,并提供了与静态站点相似的速度.
服务器端呈现和静态站点生成属于预呈现的范畴, 其中HTML页面在发送到客户端之前生成. 使用下一个的一大优势.它为预渲染反应应用增加了强大的支持.
客户端渲染
客户端渲染是普通反应应用程序的默认方式. 该方法在客户端生成页面的HTML. 换句话说, 呈现工作在用户的浏览器中进行, 和来自用户设备的JavaScript生成HTML. UI在渲染完成后出现,此时网页也是交互式的.e., 水化).
CSR在下一个中是可行的.使用反应的。js组件 useEffect
or useSWR
.
服务器端呈现
下一个.js还支持在服务器上生成页面的HTML. 在这种情况下, 生成的HTML被发送到客户端,以便网页的UI在水化之前出现. 然后, 在客户端完成JavaScript初始化之后,可查看的网页就可以进行交互了.
在我们想要的页面上.Js来执行服务器端呈现,有些简单 配置功能 添加到页面.
静态站点生成
下一个.Js还提供静态站点生成功能, 其中所有静态HTML页面都是在构建时由JavaScript呈现的. 与反应单页面应用程序相比,从反应代码库生成静态站点需要更多的前期构建时间. 然而, 这里的回报是拥有静态内容,这些内容可以以站点内容允许的最大速度提供和缓存,而不需要SSR的计算开销.
我们可以表演 下一页.js页面 我们想用它静态生成 getStaticProps ()
和 getStaticPaths ()
,后者定义静态页面的路由.
下一个.js搜索引擎优化
下一个.Js的速度和预渲染网站所有页面的能力使搜索引擎能够快速轻松地抓取和索引网站, 改善搜索引擎优化. 搜索引擎优化对许多企业和网站来说是至关重要的,因为搜索引擎优化好的网站在搜索结果中会出现更高的位置. 用户更有可能点击排名较高的网站, 排名靠前的结果平均点击率为 27.6%,其点击率是第10个结果的点击率(2)的10倍.4%.
反应网站与大量的内容和结果 JavaScript代码 用于渲染-面临搜索引擎优化挑战 在处理谷歌抓取和索引时.
下一个的能力.js轻松执行服务器端渲染(SSR)不仅提高了搜索引擎优化排名, 但也提高了网站的感知和实际加载时间,以获得最佳的用户体验.
从下一步开始.js
现在我们来看看下一个的要点.js设置、路由、页面和导航,以便您可以获得预渲染和搜索引擎优化的好处. 在开始下一步之前.. Js教程,确保你有最新版本的 节点.js下载 在您的系统中. 您可以验证节点.. Js版本在您的机器上 节点——版本
.
设置下一个有两种方法.js项目:
我们将按照自动设置更容易地开始我们的项目. 的 create-next-app
CLI工具管理自动设置,并使快速构建应用程序成为可能. 让我们用内置的下一个创建项目.js对TypeScript的支持 严格的语法超集 ,以确保正确的类型结构:
NPX create-next-app@latest——typescript
create-next-app
会询问您的应用程序的名称吗. 项目名称必须由小写字母组成,并使用连字符代替空格. 例如,我已经命名了我的应用程序 next-js-tutorial
. 安装完成后,您将在终端上看到一条成功提示.
在我们的新项目中,可以看到下一个.Js要求严格的文件结构系统:
- 该网站的
页面
和 风格
都有自己的文件夹吗.
- api存储在
页面/ api
文件夹.
- 可公开获得的资产存放在
公共
文件夹.
< / div >
下一个.js路由和页面
下一个.. Js中使用它的文件结构 页面
目录来定义应用程序路由.
中定义了所有路由 页面
文件夹. 默认的 页/索引.tsx
文件是应用程序的入口点,我们在这里定义自定义字体, 应用程序跟踪代码, 以及其他需要全球访问的项目.
添加新路由有两种方法:
- 添加以。结尾的文件
.tsx
直接在 页面
.
- 添加一个
指数.tsx
的新子文件夹下的文件 页面
(指数
文件被自动路由到目录root).
接下来让我们来看看一些具体的例子.Js路由示例. 我们将在本教程中实现一个简单的页面路由, 然后介绍嵌套路由和动态路由概念.
页面的路线
我们可以添加一个基本的页面路由,例如 关于我们
,用… 关于我们.tsx
文件:
| - - - - - -页面
| | - _app.tsx
| | - 关于我们.tsx
| | - API
| | -索引.tsx
或者我们可以用an 指数.tsx
按a 页面/关于我们
文件夹:
| - - - - - -页面
| | - _app.tsx
| | - 关于我们
| | | -索引.tsx
| | - API
| | -索引.tsx
继续添加 关于我们.tsx
到项目的页面路由.
从'导入样式'../风格/家.模块.css的
const 关于Us: 全心全意地 = () => {
回报(
关于我们示例页
)
}
关于我们
当我们将它与下一个结合使用时,我们将看到页面路由的作用.js导航. 现在,我们将返回一个占位符 全心全意地
带有标题字符串,这样导航就能正常工作.
嵌套的路线
嵌套的路线 允许在一个页面上重用和有选择地更新多个布局(例如, 当用户单击URL时, 您可能想要更新正文内容,但保留页眉和页脚布局).
| - - - - - -页面
| | - _app.tsx
| | - API
| | -索引.tsx
| | -父级
| | | -孩子.tsx
我们定义了嵌套路由 /父/子
与一个 家长
文件夹和嵌套 孩子
文件夹或文件(我们的示例显示了一个文件).
动态路由
动态路由 允许布局响应实时变化的情况下,预定义的路径不够. 假设我们想创建一个 /产品/ [产品Id]
路线(我.e.,当单击产品时,展开其组件). 假设 产品Id
定义中的变量是否可访问 产品
,我们可以通过创建一个 产品
文件夹和包装 产品Id
括号内的页面:
| - - - - - -页面
| | - _app.tsx
| | - API
| | -索引.tsx
| | -积
| | | - [产品Id].tsx
这样,一条路线就像 产品/ testId
将其查询参数设置为(i.e., 产品Id
设为 testId
).
最后,也可以进行组合 路由技术. 例如,我们可以创建嵌套的动态路由 页面/ post / [postId] /[意见].tsx
.
下一个.js导航
下一个.Js使用自己的自定义 Link
组件,而不是
在客户端页面之间导航时使用HTML标记来允许下一个.Js来优化导航和数据预取. Link
操作方式与
标签和用途 href
作为要开通的路线. 你必须使用 的 passHref
道具 强迫 Link
将它的路由值传递给子组件(例如.e.,当使用自定义样式的组件时).
使用的主要好处 Link
而不是
当用户将鼠标悬停在链接上方或附近时,它会在后台预加载数据. 这使得内容更容易被客户端处理, 提高应用程序性能. 你仍然可以使用
下一个中的标签.当链接到应用程序外部的外部页面时.
从下一个链接到我们的关于我们页面.. Js项目蓝图,打开 页/索引.tsx
主应用程序文件. 我们将首先导入 Link
组件从 下一个/链接
,然后在标题下面添加一个链接段落
组件:
Here's our example 关于我们 page
现在我们可以使用 NPM运行dev
Shell命令,访问 http://localhost:3000,并查看我们添加的文本和关于我们的页面 http://localhost:3000/About我们 (点击关于我们后返回的路线).
< / div >
< / div >
下一个助力网络应用.js
在为你的下一个网站选择框架之前,有很多因素需要考虑. 尽管下一个.js比反应更固执己见,更不灵活, 该框架为针对搜索引擎优化或预渲染功能的高级项目提供了出色的开箱即用功能. 下一个的基础.在你的工具包中加入js,你可以让你的站点比普通的反应应用更有优势.
Toptal工程博客的编辑团队向 理查德·普罗金 查看本文中提供的代码示例和其他技术内容.
< / div >< / div >< / div >
了解基本知识
为什么使用下一个.js?
下一个.js使构建某些web用户界面变得更容易,在反应的基础上添加功能. 它拥有强大的社区和文档, 并且在前端web开发人员中越来越受欢迎.
< / div >< / div >
反应比下一个好吗.js?
不,反应并不比下一个好.js. 开发人员应该根据最适合其项目和优先级的框架来选择框架. (专注于搜索引擎优化的网站可能会受益于下一个.例如,Js,因为它减少了应用程序的加载时间.)
< / div >< / div >
为什么是下一个 ?.js比反应好?
下一个.Js提供了更高的开发速度、更短的应用程序加载时间和预渲染功能.
< / div >< / div >
下一个和下一个有什么区别.js和反应?
下一个.js是一个添加了开箱即用功能的反应框架. 反应是一个常用的JavaScript库,用于构建交互式用户界面, 特别是对于web应用程序.
< / div >< / div >
接下来是什么问题?.js解决?
下一个.js提供预渲染,可以通过减少应用程序加载时间来提高搜索引擎优化性能.
< / div >< / div >
为什么选择反应 ?.js?
反应不那么固执己见,而且比下一个更成熟.Js,为开发人员提供了更大的灵活性和广泛的资源.
< / div >< / div >< / div >< / div >
标签
< / div >< / div >< / div >< / div >
聘请Toptal这方面的专家.< / div >
现在雇佣< / div >< / div >