為什麼Next.js 13會改變遊戲規則？

前端小智發表於2023-03-28
JS遊戲
微信搜尋 【大遷世界】, 我會第一時間和你分享前端行業趨勢，學習途徑等等。
本文 GitHub https://github.com/qq449245884/xiaozhi 已收錄，有一線大廠面試完整考點、資料以及我的系列文章。

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的內容入口點。

路由方面的差異

image.png

由於採用了新的結構，我們現在可以在每個路徑目錄中包含額外的檔案。此外，一個路由的page.js，如。

  • layout.js- 一個路徑及其子路徑系統。
  • loading.js- 一個基於React的即時載入系統。

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

2.React伺服器元件

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

此外，根據生成路由所需的資料型別，伺服器元件會在構建時或執行時自動快取，以獲得額外的效能優勢。

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

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

3.非同步元件和資料獲取

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

4.流媒體

以前，使用者可能不得不等待整個頁面的生成。現在，伺服器將在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/link:

它是一個新穎的字型系統，透過提供自動字型最佳化、整合自定義字型的可能性，以及所有這些功能而不使用任何外部網路請求，提高了效率和隱私。

總結

最近推出的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-21676...

程式碼部署後可能存在的BUG沒法實時知道，事後為了解決這些BUG，花了大量的時間進行log 除錯，這邊順便給大家推薦一個好用的BUG監控工具 Fundebug。

交流

有夢想，有乾貨，微信搜尋 【大遷世界】 關注這個在凌晨還在刷碗的刷碗智。

本文 GitHub https://github.com/qq449245884/xiaozhi 已收錄，有一線大廠面試完整考點、資料以及我的系列文章。

相關文章