爲什麼 Next-js 13 會改變遊戲規則？

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，如。

底層的 Suspense 和 error.js，如果主組件無法加載，則顯示一個組件。由於現在每個路徑都有自己的目錄，我們可以在路徑目錄中並排放置源文件。

2.React 服務器組件

關於 Next.js 新版本最令人興奮的是對 React 服務器組件的擴展支持。服務器組件允許我們在服務器端運行和渲染 React 組件，以實現更快的傳輸、更小的 JavaScript 包和更便宜的客戶端渲染。

此外，根據生成路由所需的數據類型，服務器組件會在構建時或運行時自動緩存，以獲得額外的性能優勢。

結合服務器和客戶端組件，你可以將服務器組件用於程序的快速加載、非交互式部分，而將客戶端組件用於交互、瀏覽器 API 和其他功能。

在爲你的 Next.js 應用程序構建客戶端組件時，你可以在文件頂部使用'use client'; 指令將它們標記爲客戶端組件。然而，如果你使用了任何第三方軟件包，你可能需要創建一個客戶端包裝器。

  1. 異步組件和數據獲取

此外，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 請求已被簡化，其非常直觀和容易理解，現在在較新的版本。

  1. 流媒體

以前，用戶可能不得不等待整個頁面的生成。現在，服務器將在 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.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 應用程序的一個不錯的選擇，特別是對於那些希望提高性能並提高用戶體驗的開發者來說。

原文：https://blog.bitsrc.io/why-next-js-13-is-a-game-changer-2167658d9de2

本文由 Readfog 進行 AMP 轉碼，版權歸原作者所有。
來源：https://mp.weixin.qq.com/s/ZdhrSJG2vrMPIZ2792dAvw

猜你喜歡