共计 3239 个字符，预计需要花费 9 分钟才能阅读完成。
微信搜寻【大迁世界】, 我会第一工夫和你分享前端行业趋势，学习路径等等。
本文 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-21676…
代码部署后可能存在的 BUG 没法实时晓得，预先为了解决这些 BUG，花了大量的工夫进行 log 调试，这边顺便给大家举荐一个好用的 BUG 监控工具 Fundebug。
交换
有幻想，有干货，微信搜寻 【大迁世界】 关注这个在凌晨还在刷碗的刷碗智。
本文 GitHub https://github.com/qq449245884/xiaozhi 已收录，有一线大厂面试残缺考点、材料以及我的系列文章。