Next.js 是一個(gè)構(gòu)建在 React 之上的 JavaScript 框架，而 React 是一個(gè)用于構(gòu)建用戶界面的流行庫(kù)。這意味著可以使用 React 來(lái)構(gòu)建應(yīng)用程序，而 Next.js 提供了額外的工具和功能來(lái)簡(jiǎn)化這一開發(fā)過(guò)程。

Next.js 的主要優(yōu)勢(shì)之一是它支持服務(wù)器端渲染。意味著服務(wù)器可以為頁(yè)面生成 HTML 并將其發(fā)送給客戶端，而不是客戶端使用 JavaScript 生成 HTML，這樣可以提高應(yīng)用程序的性能和 SEO。

Next.js 還包括許多其他功能，這些功能在構(gòu)建和部署 Web 應(yīng)用程序時(shí)很有用。例如，它具有自動(dòng)代碼拆分功能，這樣有利于提升應(yīng)用性能，因?yàn)閼?yīng)用程序?qū)⒅患虞d當(dāng)前頁(yè)面所需的代碼，而不是一次加載所有代碼。Next.js 還有一個(gè)內(nèi)置的開發(fā)服務(wù)器和一個(gè)用于將應(yīng)用程序部署到生產(chǎn)環(huán)境的工具鏈。

下面來(lái)看看 Next.js 13 版本將帶來(lái)什么樣的驚喜。

Next.js 13 有什么新功能？

Next.js 13 第一次全面嘗試整合 React 的兩個(gè)角色（UI 庫(kù)和架構(gòu)）。那么，它有什么新意呢？

1. 基于文件路由的應(yīng)用程序/目錄

Next.js 的最佳功能之一是基于文件的路由，無(wú)需再像 react-router 這樣的在程序中處理復(fù)雜的路由設(shè)置，可以使用目錄項(xiàng)目結(jié)構(gòu)來(lái)指定路由。通過(guò)向目錄頁(yè)面添加一個(gè)入口點(diǎn)，可以創(chuàng)建一個(gè)新路徑。

Next.js 13 包括使用新目錄更新的文件路由，可選的應(yīng)用程序目錄引入了新的布局結(jié)構(gòu)以及一些新功能和改進(jìn)。

路由差異

路由	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

由于新結(jié)構(gòu)，現(xiàn)在可以在每個(gè)路徑目錄中包含其他文件。此外，路由的 page.js，例如：

• layout.js：路徑及其子路徑系統(tǒng)。
• loading.js ：一個(gè)基于 React 的即時(shí)加載邏輯。

2. React 服務(wù)器組件

新版 Next.js 最令人興奮的是對(duì) React 服務(wù)器組件的擴(kuò)展支持。服務(wù)器組件可以在服務(wù)器端運(yùn)行和渲染 React 組件，以實(shí)現(xiàn)更快的交付、更小的 JavaScript 包和更便宜的客戶端渲染。

此外，根據(jù)生成路由所需的數(shù)據(jù)類型，服務(wù)器組件會(huì)在構(gòu)建時(shí)或運(yùn)行時(shí)自動(dòng)緩存以增加性能優(yōu)勢(shì)。

結(jié)合服務(wù)器和客戶端組件，可以將服務(wù)器組件用于程序的快速加載、非交互部分，同時(shí)將客戶端組件用于交互、瀏覽器 API 和其他功能。

在為 Next.js 應(yīng)用程序構(gòu)建客戶端組件時(shí)，可以使用 use client 指定它們文件頂部的指令。但是，如果使用任何第三方包，可能需要?jiǎng)?chuàng)建一個(gè)客戶端包裝器。

3. 異步組件和數(shù)據(jù)獲取

此外，Next.js 13 引入了異步組件，這是一種為服務(wù)器渲染組件收集數(shù)據(jù)的全新方法。當(dāng)使用異步組件時(shí)，可以使用 async 和 await 渲染使用 Promises 的功能。

當(dāng)從返回 Promise 的外部服務(wù)或 API 請(qǐng)求數(shù)據(jù)時(shí)，將組件聲明為異步并等待響應(yīng)：

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 中從第三方服務(wù)獲取數(shù)據(jù)的方法：

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

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

    return { 
        props: { data } 
    }
}

通過(guò)這種方式，API 請(qǐng)求得到了簡(jiǎn)化，并且在新版本中非常直觀且易于理解。

4. 流媒體

過(guò)去，用戶可能必須等待完整的頁(yè)面生成。現(xiàn)在，服務(wù)器將在生成 UI 時(shí)向客戶端傳輸一小段 UI。這意味著較大的碎片不會(huì)妨礙較小的碎片。當(dāng)然，目前這個(gè)功能只支持app目錄。

這項(xiàng)新功能對(duì)擁有強(qiáng)大互聯(lián)網(wǎng)連接或高速 Wi-Fi 的個(gè)人的好處不如對(duì)那些網(wǎng)絡(luò)連接較弱的人有利。事實(shí)上，它們的數(shù)量比想象的要多。更快的網(wǎng)站加載時(shí)間將改善用戶體驗(yàn)真是太好了。

5. Turbopack

Next.js 13 版本引入的最后一個(gè)重要變化是一個(gè)名為 Turbopack 的新 JavaScript 打包器，它被稱為 Webpack 的繼承者。Webpack 是最常用的 JavaScript 構(gòu)建工具之一，非常強(qiáng)大且可配置，但有時(shí)可能會(huì)很慢且很復(fù)雜。

Turbopack 由 Webpack 的創(chuàng)建者開發(fā)并在 Rust 中構(gòu)建，承諾比原始 Webpack 快 700 倍（并且比 Vite 快 10 倍，這是一種更現(xiàn)代的替代方案）。

 

其他升級(jí)變化

next/image

Next.js 中的新圖像組件包括更少的客戶端 JavaScript、樣式和配置，以及改進(jìn)的可訪問(wèn)性。在代碼更改方面，next/image 導(dǎo)入已重命名為 next/legacy/image，而 next/future/image 導(dǎo)入已更改為 next/image，codemod 可用于啟用快速遷移。

next/font

可以將 Google 字體（或任何其他自定義字體）與新的 @next/font 一起使用，而無(wú)需瀏覽器提交任何查詢。除了其他靜態(tài)資產(chǎn)外，CSS 和字體文件也會(huì)在構(gòu)建期間下載。

要試用它，需要安裝軟件包：

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

使用 next/link 時(shí)，不再需要包含 <a> 標(biāo)記。

結(jié)論

Next.js 13 無(wú)疑包含了幾個(gè)很酷的功能和升級(jí)。