AI 从业者都在关注的 NVIDIA GTC 2023 China AI Day 来了!报名戳 了解详情
写点什么

为什么说 Next.js 13 是一个颠覆性版本

作者:Shamim Ahmed

  • 2023-02-15
    北京
  • 本文字数:2435 字

    阅读完需:约 8 分钟

为什么说Next.js 13是一个颠覆性版本

Next.js 是一个基于 React(一个用来构建用户界面的流行库)之上而构建的 JavaScript 框架。这意味着你可以使用 React 来构建应用程序,而 Next.js 提供了更多的工具和功能来使这个过程更简单。


Next.js 的主要优点之一是它支持服务器端渲染。这意味着服务器可以为页面生成 HTML 并将它发送到客户端,而不是在客户端使用 JavaScript 生成 HTML。这可以提升性能和应用程序的 SEO(搜索引擎优化)。


Next.js 还包括一些在构建和部署 Web 应用程序时非常有用的其他功能。例如,它具有自动代码拆分功能,应用程序只会加载当前页面所需的代码,而不是一次性加载所有代码。这可以提升应用程序的性能。Next.js 还有一个内置的开发服务器和用来部署应用程序到生产环境的工具链。


通过上面的介绍,你对 Next.js 应该有了更多了解。现在让我们一起看看 Next.js 13 又带来了哪些新功能。


Next.js 13 有哪些新功能?


Next.js 13 是集成 React 的两个身份(UI 库和框架)的第一次全面尝试。那么,它有哪些新功能?


1. 可选的 App 目录用于基于文件的路由


Next.js 最佳特性之一就是基于文件的路由。它可以使用项目目录结构来指定路由,而不是在诸如 react-router 之类的程序中处理复杂的路由设置。通过在目录页中增加入口点,你可以创建一个新路径。


Next.js 13 通过新目录更新了文件路由。可选的 app 目录引入了新的布局结构以及一些新功能和改进。


由于新的路由机制,目录结构发生了微小的变化。路由中的每个路径都有一个包含 page.js 文件的专用目录,这个 page.js 文件是 Next.js 13 中的内容入口点。


路由上的差异



由于采用了新的结构,我们现在可以在每个路径目录中包含其它文件。例如,page.js 针对一个路由:


  • layout.js — 一个路径及其子路径系统。

  • loading.js — 一个基于 React 的即时加载系统。


基于底层机制和 error.js,如果主组件不能加载,则会显示一个异常组件。


我们现在可以在路径目录中定位源文件,因为每个路径就是它的目录。


2. React 服务器端组件


Next.js 新版本中最令人兴奋的就是对 React 服务器端组件的扩展支持。服务器端组件使我们可以在服务器端运行和渲染 React 组件,从而实现更快的交付、更小的 JavaScript 包以及开销更少的客户端渲染。


此外,根据生成路由所需的数据类型,服务器端组件会在构建时或运行时自动缓存来提高性能。


结合服务器端组件和客户端组件,你可以将服务器端组件用于程序中快速加载、非交互性的部分,将客户端组件用于交互、浏览器 API 和其它功能。


在为 Next.js 应用程序构建客户端组件时,你可以在文件顶部使用’use client’指令将其指定为客户端组件。如果你使用了任何第三方包,则可能需要创建一个客户端包装器。


3. 异步组件和数据获取


此外,Next.js 13 引入了异步组件,这是一种为服务器端渲染的组件收集数据的新方案。当使用异步组件时,我们可以通过 async & await 使用 Promises 来渲染系统。


当从返回 Promise 的外部服务或 API 请求数据时,我们将组件声明为 async 并等待响应:


async func getData() {  const res = await fetch ('https://api.shamim.com/...');  return res.json();}
export default async function About() { const name = await getData(); return '...';}
复制代码


下面的例子演示了 Next.js 12 从第三方服务获取数据的方法:



export default function About({data}) { return '...';}
function getServerSideProps(){ // Fetch data from external API const res = await fetch(https://.../data) const data = await res.json()
// Pass data to the page via props return return { props: { data } }}
复制代码


这种方式简化了 API 请求,并且在新版本中非常直观且易于理解。


4. 流式加载


以前,用户可能需要等待生成完整的页面。现在,服务器会在生成 UI 小片段时直接传送给客户端。这意味着较大的片段不会阻碍较小的片段。当然,到目前为止,该功能只支持 app 目录,而且这一点看起来不会改变。


这项新功能给具有强信号网络连接或快速 Wi-Fi 的人所带来的好处比不上给那些弱信号网络连接的人带来的好处。事实上,它们所带来的好处比你想象的要多得多。更快的站点加载时间将提升用户体验,这点是非常棒的。


5. Turbopack


Next.js 13 版本中引入的最后一个重要变化是一个名为 Turbopack 的新 JavaScript 包,它被称为“Webpack 的继任者”。Webpack 是最常用的 JavaScript 构建工具之一,功能强大且可配置,但有时会非常慢且复杂。


Turbopack 是由 Webpack 的创建者开发,用 Rust 创建,其速度有望比最初的 Webpack 快 700 倍(比更现代的替代品 Vite 快 10 倍)。


其他升级

next/image


Next.js 中的新 Image 组件包括更少的客户端 JavaScript、样式和配置,改进了可访问性。在代码层面的变化,next/legacy/image 导入变成了 next/image,next/future/image 导入变成了 next/image。有一个 codemod 可以用来进行快速迁移。


next/font


你可以将 Google Fonts(或者任何其它自定义字体)与 @next/font 一起使用,无需浏览器提交任何查询。除了其它静态资源外,CSS 和字体文件都是在构建时下载。


next/link


这是一种新颖的字体系统,通过提供自动字体优化、集成自定义字体以及所有这些功能无需使用任何外部网络请求,从而提高了效率和隐私。


结论


Next.js 13 无疑包含了几个很酷的功能和显著的更新。但是由于它的很多功能给人感觉是未完成的半成品,所以只能算是一个预览测试版本。甚至最新的 React 中一些尖端功能(这些功能被大量使用但仍处于 RFC 阶段)也经常不包括在内。


虽然我不建议在生产环境中使用 Next.js 13,但你上手应该试一试。


原文链接:

https://blog.bitsrc.io/why-next-js-13-is-a-game-changer-2167658d9de2

相关阅读:

Next.js 13 新的实验性特性,实现 App“动态无限制”

我们如何使用 Next.js 将 React 加载时间缩短 70%

前端食堂技术周刊第 57 期:Turbopack、Next.js13、Chrome107、Vite3.2、图解 TLS 1.3

Next.js 在 Serverless 中从踩坑到破茧重生

2023-02-15 15:143393

评论

发布
暂无评论
发现更多内容

坐标东京,诚招IT工程师~

马农驾驾驾

软件 软件开发 日本 IT 日语

spark2.0笔记

Clarke

大会回顾丨游戏用户体验优化如何实践,看大咖怎么说(附PPT下载)

WeTest

TMF国际大奖技术揭秘:5G智能动态步长

鲸品堂

5G 计费模式 通信运营商

Linux学习方法,《Linux一学就会》教你如何学习Linux

侠盗安全

Linux 运维 linux运维 云计算架构师 linux电子书

大数据开发之如何用Scala进行spark开发

@零度

scala 大数据 spark

35岁程序员创业,为何选择云原生赛道

行云创新

云计算 创业 程序员 云原生 CEO

Hadoop企业级生产调优手册(一)

大数据技术指南

11月日更

鸿蒙智联生态服务平台——智能硬件伙伴的最佳拍档|HDC2021技术分论坛

HarmonyOS开发者

HarmonyOS

《新程序员》走进微软亚洲研究院

刘旭东

微软 hololens

面试官问:mysql中时间日期类型和字符串类型的选择

华为云开发者联盟

MySQL timestamp 时间日期 字符串类型

Remix.run 新手教程

程序员铮铮

JavaScript 大前端 React SSR 教程分享

智能楼宇管理系统开发,智慧楼宇管控系统开发

电微13828808271

Hadoop、Spark、Hive到底是什么,做算法要不要学?

编程江湖

大数据

Flutter 异常监控、符号解析及聚合分流实践

贝壳大前端技术团队

flutter 监控 异常 符号化

“元宇宙”究竟是什么

华为云开发者联盟

云计算 AI AR vr 云宇宙

盘点分布式软总线数据传输技术中的黑科技|HDC2021技术分论坛

HarmonyOS开发者

HarmonyOS

拿捏这10点,玩转云原生应用

WorkPlus

连续 14 年!IBM 荣获 2021 年 Gartner 主存储魔力象限领导者

WorkPlus

Android C++系列:Linux信号(一)

轻口味

c++ android jni 11月日更

Webpack 性能之使用 Cache 提升构建性能

编程江湖

大前端 webpack

Java开发之集成开发环境

@零度

JAVA开发 Java学习 IED

还有人不知道鸿蒙智联设备认证咋搞?|HDC2021技术分论坛

HarmonyOS开发者

HarmonyOS

人脸检测实战进阶:使用 OpenCV 进行活体检测

AI浩

50强诞生!2021 OceanBase 数据库大赛百所高校争霸!

OceanBase 数据库

数据库 开源 开发者 比赛 oceanbase

质量基础设施“一站式”服务信息平台建设,NQI一站式线上搭建

电微13828808271

使用MRS CDL实现实时数据同步的极致性能

华为云开发者联盟

延迟 实时数据 MRS CDL 吞吐 实时数据复制

Java中对象的初始化生成过程

编程江湖

Java JAVA开发 java编程

HBase 调优详细剖析

五分钟学大数据

11月日更

前端开发环境搭建在内网是如何搭建的

@零度

大前端

为什么说Next.js 13是一个颠覆性版本_前端_InfoQ精选文章