用过去的智慧引导 AI 变革,《架构师 2024 年(第二季)》开放下载。 了解详情
写点什么

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

作者:Shamim Ahmed

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

    阅读完需:约 8 分钟

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

6 月 17 日,极客时间《企业级 Agents 开发实战营》正式上线,10 周掌握企业级 Agents 从设计、开发到部署全流程。

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:1413357

评论

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

帮师姐把100个Excel中符合条件的数据,汇总到1个Excel里

程序员晚枫

Python Excel 自动化办公

一文总结Java的23种设计模式

做梦都在改BUG

Java 设计模式

阿里资深架构师三年整理分享:java面试核心知识点原理篇文档

三十而立

Java 程序员 面试 IT java面试

教你用华为云玩转物联网开发

程思扬

华为 物联网 华为云

矢量绘图UI设计:Sketch 95.3中文激活版

真大的脸盆

Mac UI Mac 软件 ui设计

1658 页的《Java 面试突击核心讲》在牛客网火了,完整版 PDF 开放下载!

采菊东篱下

Java 面试

ZBC新一轮流动性收益计划迎来新通缩,APR高达100%

鳄鱼视界

终于拿到了阿里2023年度九大Java技术文档——面试题+文档+白皮书

三十而立

Java 面试 java面试

存储容量启动会圆满召开

科技热闻

这可能是2023最全的Java面试八股文!共计1658页,Java技术手册的天花板

架构师之道

Java 面试

Spring、Spring MVC、Spring Boot三者的关系还傻傻分不清楚?

三十而立

Java 程序员 面试 IT java面试

GitHub置顶神作开源!世界名著《Spring实战(第6版)》全彩文档

做梦都在改BUG

Java spring 框架

多功能代码编辑器:CodeRunner激活版

真大的脸盆

代码编辑器 代码编辑 编辑代码

如何选择合适的智慧公厕设备厂家?

光明源智慧厕所

智慧城市

Nacos心跳机制实现快速上下线

做梦都在改BUG

Java Spring Cloud nacos

ZBC新一轮流动性收益计划迎来新通缩,APR高达100%

西柚子

工赋Meetup | 价值驱动的技术交流Call你来!4月2日上海见

工赋开发者社区

PyTorch 深度学习实战 | DIEN 模拟兴趣演化的序列网络

TiAmo

深度学习 迭代跟进

明道云在制造行业的五个实施案例与建议

明道云

工赋开发者社区 | 做好生产线的规划与布局,能给工厂带来什么好处?

工赋开发者社区

ZBC新一轮流动性收益计划迎来新通缩,APR高达100%

威廉META

“阿里爸爸”最新产出:Java面试突击核心讲(1658页),转载40W+

做梦都在改BUG

Java java面试 Java八股文 Java面试题 Java面试八股文

阿里巴巴独家的SpringCloud Alibaba学习笔记,面面俱到,太全了

架构师之道

编程 微服务 计算机 程序眼

浅析 python 一切皆对象

黑客不够黑

Python python对象 一切皆对象

Java面试题大全(2023最新版)1500+大厂面试题附答案详解

采菊东篱下

Java 编程 面试

阿里资深架构师三年整理分享:java面试核心知识点原理篇文档

三十而立

Java 程序员 IT java面试

IDEA 热部署,修改代码不用重启项目

源字节1号

软件开发 开源治理 小程序开发

架构实战营-模块六作业(拆分电商系统为微服务)

🐢先生

架构实战营

两个比较容易混淆的函数

Joseph295

CDC工具之Canal

数新网络官方账号

阿里内部总结的微服务笔记,从入门到精通小白也能学的会

做梦都在改BUG

Java 微服务 Spirng Cloud

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