为什么Next.js 13会改变游戏规则？

微信搜索 【大迁世界】, 我会第一时间和你分享前端行业趋势，学习途径等等。
本文 GitHub https://github.com/qq449245884/xiaozhi 已收录，有一线大厂面试完整考点、资料以及我的系列文章。

Next.js是一个建立在React之上的JavaScript框架，React是一个用于构建用户界面的流行库。这意味着你可以使用React来构建你的应用程序，而Next.js提供了额外的工具和功能，使这个过程更容易。

Next.js的主要好处之一是，它可以实现服务器端渲染。这意味着服务器可以生成页面的HTML并将其发送给客户端，而不是由客户端使用JavaScript生成HTML。这可以提高你的应用程序的性能和SEO。

Next.js 还包括许多其他在构建和部署网络应用程序时有用的功能。例如，它具有自动代码拆分功能，这意味着您的应用程序只会加载当前页面所需的代码，而不是一次性加载所有代码。这可以提高应用程序的性能。Next.js 还内置了一个开发服务器和一个用于将应用程序部署到生产环境的工具链。

现在你对Next.js有了更多的了解，让我们来探索Next.js 13版本给我们带来了什么。

Next.js 13有什么新内容？

Next.js 13 是首个全面尝试整合 React 的两个身份 —— UI 库和架构的版本。那么，它有哪些新特性呢？

1.用于文件式路由的 App/目录

Next.js 的最佳功能之一是基于文件的路由。与在像 react-router 这样的程序中处理复杂的路由设置相比，可以使用目录项目结构来指定路由。通过在目录页面添加一个入口点，你可以创建一个新路径。

Next.js 13包括更新的文件路由与新目录。可选的应用程序目录引入了一个新的布局结构以及一些新的功能和改进。

由于新的路由机制，目录结构发生了微小的变化。路由中的每个路径都有一个专门的目录，其中有一个page.js文件，作为Next.js 13的内容入口点。

路由方面的差异

由于采用了新的结构，我们现在可以在每个路径目录中包含额外的文件。此外，一个路由的page.js，如。

• layout.js- 一个路径及其子路径系统。
• loading.js- 一个基于React的即时加载系统。

底层的 Suspense 和 error.js，如果主组件无法加载，则显示一个组件。由于现在每个路径都有自己的目录，我们可以在路径目录中并排放置源文件。

2.React服务器组件

关于 Next.js 新版本最令人兴奋的是对 React 服务器组件的扩展支持。服务器组件允许我们在服务器端运行和渲染 React 组件，以实现更快的传输、更小的 JavaScript 包和更便宜的客户端渲染。

此外，根据生成路由所需的数据类型，服务器组件会在构建时或运行时自动缓存，以获得额外的性能优势。

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

在为你的 Next.js 应用程序构建客户端组件时，你可以在文件顶部使用 ‘use client’; 指令将它们标记为客户端组件。然而，如果你使用了任何第三方软件包，你可能需要创建一个客户端包装器。

3.异步组件和数据获取

此外，Next.js 13引入了async组件，这是一种用于服务器渲染组件的数据收集的全新方法。在使用async组件时，我们可以使用async & await的Promises来渲染系统。

当从外部服务或API请求数据并返回一个Promise时，我们将组件声明为同步，并等待响应。

asyncfuncgetData() {
constres =awaitfetch('https://api.shamim.com/...')。
返回res.json()。
}

export default async function About() {
constname =await getData();
返回 '...'。
}

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

export default function About({data}) {
返回 "..."。
}

函数 getServerSideProps(){
   // 从外部API获取数据
   constres =await fetch(https://.../data)
   constdata =awaitres.json()

   // 通过props将数据传递给页面 return
   返回{ 
       props: { data } 
    }
}

这种方式的API请求已被简化，其非常直观和容易理解，现在在较新的版本。

4.流媒体

以前，用户可能不得不等待整个页面的生成。现在，服务器将在UI生成时向客户端传送小块的内容。这意味着大的片段不会妨碍小的片段。当然，就目前而言，这个功能只支持应用目录，而且这似乎不会改变。

这项新功能不会像那些连接较弱的人那样，让拥有强大网络连接或快速Wi-Fi的个人受益。事实上，这样的人比你想象的要多。更快的网站加载时间将改善用户体验，这很好。

5.Turbopack

Next.js 13版本引入的最后一个重要变化是一个新的JavaScript捆绑器，名为Turbopack，它被称为 “Webpack的继承者”。Webpack是最常用的JavaScript构建工具之一，它具有强大的功能和可配置性，但有时可能会很慢很复杂。

Turbopack是由Webpack的创造者开发的，用Rust构建，承诺比原来的Webpack快700倍（比更现代的替代品Vite快10倍）。

其他升级

next/image

Next.js中的新图像组件包括更少的客户端 JavaScript、样式和配置，并改进了可访问性。在代码变化方面，next/legacy/image的导入已被重新命名为next/image，next/future/image的导入已被改为next/image。有一个codemod可用来实现快速迁移。

next/font

你可以用新的@next/font来使用谷歌字体（或任何其他自定义字体），而无需浏览器提交任何查询。除了其他静态资产外，CSS和字体文件也会在构建时下载。

next/link:

它是一个新颖的字体系统，通过提供自动字体优化、整合自定义字体的可能性，以及所有这些功能而不使用任何外部网络请求，提高了效率和隐私。

总结

最近推出的Next.js 13带来了很多新功能和升级，如新路由、新的数据获取方式（React suspense）、Vercel字体、og图片生成、布局等[2]。它们可以改变游戏规则并承诺速度极快，但是它们也有一些权衡[2]。然而，需要注意的是，尽管这些创新性的功能引入了最新的React，但许多重要的功能仍处于RFC阶段，因此在Next.js 13中可能无法使用[1]。

Next.js 13还具有其他新功能和升级，如文件基础路由的应用/目录[3]、React服务器组件、异步组件数据获取、流式传输、Turbopack等[3]。这些升级带来了显著的性能提升，使Next.js成为构建现代Web应用程序的理想选择。

总的来说，Next.js 13的新功能和升级是非常有前途的，具有极大的潜力，但由于其中许多功能还在开发中，因此可能会存在一些问题。尽管如此，Next.js 13仍然是现代Web应用程序的一个不错的选择，特别是对于那些希望提高性能并提高用户体验的开发者来说。

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

代码部署后可能存在的BUG没法实时知道，事后为了解决这些BUG，花了大量的时间进行log 调试，这边顺便给大家推荐一个好用的BUG监控工具 Fundebug。

交流

有梦想，有干货，微信搜索 【大迁世界】 关注这个在凌晨还在刷碗的刷碗智。

本文 GitHub https://github.com/qq449245884/xiaozhi 已收录，有一线大厂面试完整考点、资料以及我的系列文章。