2023版RN从0到1系统精讲与小红书APP实战-我有嘉宾，鼓瑟吹笙

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

2023版RN从0到1系统精讲与小红书APP实战

download：https://www.51xuebc.com/thread-542-1-1.html

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应用程序的一个不错的选择，特别是关于那些希望进步性能并进步用户体验的开发者来说。