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

资讯

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 并等待响应：

1
2
3
4
5
6
7
8
9
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 从第三方服务获取数据的方法：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
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

涅槃快乐热爱生活，追求技术

个人简介。