微信搜索【GreatMovetotheWorld】，第一时间和大家分享前端行业趋势、学习路径等。本文已收录到GitHubhttps://github.com/qq449245884/xiaozhi，里面有完整的测试站点、资料和我的一线厂商访谈系列文章。Next.js是一个建立在React之上的JavaScript框架，React是一个用于构建用户界面的流行库。这意味着您可以使用React来构建您的应用程序，而Next.js提供了额外的工具和功能来简化该过程。Next.js的主要优势之一是它支持服务器端渲染。这意味着服务器可以为页面生成HTML并将其发送给客户端，而不是客户端使用JavaScript生成HTML。这可以提高应用程序的性能和SEO。Next.js还包括许多在构建和部署Web应用程序时有用的其他功能。例如，它具有自动代码拆分功能，这意味着您的应用程序只加载当前页面所需的代码，而不是一次加载所有代码。这可以提高应用程序性能。Next.js还带有一个内置的开发服务器和一个用于将应用程序部署到生产环境的工具链。现在您对Next.js有了更多的了解，让我们来探讨一下Next.js13版本给我们带来了什么。Next.js13有什么新功能？Next.js13是第一次全面尝试整合React的两个身份——UI库和架构。那么，它有哪些新特点呢？1.基于文件的路由的app/目录Next.js最好的特性之一是基于文件的路由。您可以使用目录项目结构来指定路由，而不是在像react-router这样的程序中处理复杂的路由设置。您可以通过向目录页面添加入口点来创建新路径。Next.js13包括更新的文件路由和新目录。可选的应用程序目录引入了新的布局结构以及一些新功能和改进。由于新的路由机制，目录结构略有变化。路由中的每个路由都有一个专用目录，其中包含一个page.js文件，用作Next.js13的内容入口点。路由的差异由于采用了新结构，我们现在可以在每个路由目录中包含其他文件。此外，路由page.js，例如。layout.js-路径及其子路径系统。loading.js-基于React的即时加载系统。底层Suspense和error.js，在主组件加载失败时显示组件。由于每个路径现在都有自己的目录，我们可以将源文件并排放置在路径目录中。2.React服务器组件新版本的Next.js最令人兴奋的是对React服务器组件的扩展支持。服务器组件允许我们在服务器端运行和渲染React组件，以实现更快的传输、更小的JavaScript包和更便宜的客户端渲染。此外，根据生成路由所需的数据类型，服务器组件会在构建时或运行时自动缓存以获得额外的性能优势。结合服务器和客户端组件，您可以将服务器组件用于程序的快速加载、非交互部分，将客户端组件用于交互、浏览器API和其他功能。在为Next.js应用程序构建客户端组件时，您可以使用“使用客户端”将它们标记为客户端组件；文件顶部的指令。但是，如果您使用任何第三方包，您可能需要创建一个客户端包装器。3.异步组件和数据采集此外，Next.js13引入了异步组件，这是一种全新的服务端渲染组件数据采集方式。在使用async组件时，我们可以使用async&awaitPromises来渲染系统。当从外部服务或API请求数据并返回Promise时，我们将组件声明为同步的，并等待响应。asyncfuncgetData(){constrs=awaitfetch('https://api.shamim.com/...')。返回res.json()。}exportdefaultasyncfunctionAbout(){constname=awaitgetData();返回“...”。下面的示例演示了Next.js12从第三方服务获取数据的方法。导出默认函数About({data}){返回“...”。}FunctiongetServerSideProps(){//从外部API获取数据constres=awaitfetch(https://.../data)constdata=awaitres.json()//通过props向页面传递数据returnreturn{props:{data}}}这种方式的API请求已经被简化，它非常直观和易于理解，现在在新版本中。4.在流式传输之前，用户可能需要等待整个页面生成。现在，服务器将在生成UI时向客户端传送小块内容。这意味着大片段不会妨碍小片段。当然，目前此功能仅支持应用程序目录，而且似乎不会改变。新功能对互联网连接或Wi-Fi速度快的个人的好处不如网络连接较弱的人多。事实上，这样的人比你想象的要多。更快的网站加载时间将改善用户体验，这很棒。5.TurbopackNext.js13版本引入的最后一个重要变化是新的JavaScript打包器Turbopack，被称为“Webpack的继任者”。Webpack是最常用的JavaScript构建工具之一，它功能强大且可配置，但有时速度缓慢且复杂。由Webpack的创建者开发，Turbopack是用Rust构建的，并承诺比原始Webpack快700倍（比更现代的替代品Vite快10倍）。其他升级next/imageNext.js中的新图像组件包括更少的客户端JavaScript、样式和配置，以及改进的可访问性。代码改动方面，next/legacy/image的导入改名为next/image，next/future/image的导入改为next/image。有一个codemod可用于快速迁移。next/font您可以使用新的@next/font来使用谷歌字体（或任何其他自定义字体），而无需浏览器提交任何查询。与其他静态资产一起，CSS和字体文件在构建时下载。next/link：这是一个新颖的字体系统，通过提供自动字体优化、合并自定义字体的可能性以及所有这些都无需使用任何外部网络请求来提高效率和隐私。总结最近上线的Next.js13带来了很多新特性和升级，比如新路由、新数据获取方式（React悬念）、Vercel字体、og图片生成、布局等[2]。它们可以改变游戏规则并承诺极快的速度，但它们也有一些权衡取舍[2]。然而，值得注意的是，尽管这些创新特性被引入到最新的React中，但许多重要特性仍处于RFC阶段，因此可能无法在Next.js13[1]中使用。Next.js13还有其他新特性和升级，例如用于基于文件的路由的app/directory[3]、React服务器组件、异步组件数据获取、流式处理、Turbopack等[3]。这些升级带来了显着的性能改进，使Next.js成为构建现代Web应用程序的理想选择。总的来说，Next.js13的新特性和升级非常有前途，潜力巨大，但由于很多还在开发中，可能会存在一些问题。尽管如此，Next.js13仍然是现代Web应用程序的可靠选择，尤其是对于希望提高性能和改善用户体验的开发人员而言。原文：https://blog.bitsrc.io/why-next-js-13-is-a-game-changer-21676...无法实时知道代码部署后可能出现的bug。之后为了解决这些bug，我花了很多时间在日志调试上。顺便推荐一个好用的BUG监控工具，Fundebug。交流有梦想，有干货，微信搜索【大千世界】关注这位凌晨还在洗碗的洗碗智者。本文已收录到GitHubhttps://github.com/qq449245884/xiaozhi，里面有完整的测试站点、资料和我的一线厂商访谈系列文章。
