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

• 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-2167658d9de2