前端框架

09 01月

Next.js 13 中的新功能

2023-01-09 前端框架

Next.js 13 中的新功能

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

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

Next.js 还包括许多其他功能，这些功能在构建和部署 Web 应用程序时很有用。例如，它具有自动代码拆分功能，这样有利于提升应用性能，因为应用程序将只加载当前页面所需的代码，而不是一次加载所有代码。Next.js 还有一个内置的开发服务器和一个用于将应用程序部署到生产环境的工具链。

下面来看看 Next.js 13 版本将带来什么样的惊喜。

Next.js 13 有什么新功能？

Next.js 13 第一次全面尝试整合 React 的两个角色（UI 库和架构）。那么，它有什么新意呢？

1. 基于文件路由的应用程序/目录

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

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

路由差异
路由 Next.js12 Next.js13
/ pages/index.js app/page.js
/about pages/about.js app/about/page.js
/about/new pages/about/new.js app/about/new/page.js

由于新结构，现在可以在每个路径目录中包含其他文件。此外，路由的 page.js，例如：

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

2. React 服务器组件

新版 Next.js 最令人兴奋的是对 React 服务器组件的扩展支持。服务器组件可以在服务器端运行和渲染 React 组件，以实现更快的交付、更小的 JavaScript 包和更便宜的客户端渲染。

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

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

在为 Next.js 应用程序构建客户端组件时，可以使用 use client 指定它们文件顶部的指令。但是，如果使用任何第三方包，可能需要创建一个客户端包装器。

3. 异步组件和数据获取

此外，Next.js 13 引入了异步组件，这是一种为服务器渲染组件收集数据的全新方法。当使用异步组件时，可以使用 async 和 await 渲染使用 Promises 的功能。

当从返回 Promise 的外部服务或 API 请求数据时，将组件声明为异步并等待响应：

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.js12 中从第三方服务获取数据的方法：

export default function About({data}) {
  return '...';
}

function getServerSideProps(){
    const res = await fetch("https://.../data")
    const data = await res.json()

    return { 
        props: { data } 
    }
}

通过这种方式，API 请求得到了简化，并且在新版本中非常直观且易于理解。

4. 流媒体

过去，用户可能必须等待完整的页面生成。现在，服务器将在生成 UI 时向客户端传输一小段 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 中的新图像组件包括更少的客户端 JavaScript、样式和配置，以及改进的可访问性。在代码更改方面，next/image 导入已重命名为 next/legacy/image，而 next/future/image 导入已更改为 next/image，codemod 可用于启用快速迁移。

next/font

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

要试用它，需要安装软件包：

npm install @next/font

然后，可以像这样使用它：

import { Montserrat } from "@next/font/google";
 
const montserrat = Montserrat();
 
export default function Page() {
  return (
    <article>
      <h1>Welcome DevPoint!</h1>
 
      <p className={montserrat.className}>I am using Montserrat font</p>
    </article>
  );
}

使用 next/link 时，不再需要包含 <a> 标记。

结论

Next.js 13 无疑包含了几个很酷的功能和升级。

 

Next.jsReactPromiseTurbopack