Next.js是一個(gè)建立在React之上的JavaScript框架，React是一個(gè)用于構(gòu)建用戶界面的流行庫。這意味著你可以使用React來構(gòu)建你的應(yīng)用程序，而Next.js提供了額外的工具和功能，使這個(gè)過程更容易。

Next.js的主要好處之一是，它可以實(shí)現(xiàn)服務(wù)器端渲染。這意味著服務(wù)器可以生成頁面的HTML并將其發(fā)送給客戶端，而不是由客戶端使用JavaScript生成HTML。這可以提高你的應(yīng)用程序的性能和SEO。

Next.js 還包括許多其他在構(gòu)建和部署網(wǎng)絡(luò)應(yīng)用程序時(shí)有用的功能。例如，它具有自動(dòng)代碼拆分功能，這意味著您的應(yīng)用程序只會(huì)加載當(dāng)前頁面所需的代碼，而不是一次性加載所有代碼。這可以提高應(yīng)用程序的性能。Next.js 還內(nèi)置了一個(gè)開發(fā)服務(wù)器和一個(gè)用于將應(yīng)用程序部署到生產(chǎn)環(huán)境的工具鏈。

現(xiàn)在你對(duì)Next.js有了更多的了解，讓我們來探索Next.js 13版本給我們帶來了什么。

Next.js 13有什么新內(nèi)容？

Next.js 13 是首個(gè)全面嘗試整合 React 的兩個(gè)身份 —— UI 庫和架構(gòu)的版本。那么，它有哪些新特性呢？

1.用于文件式路由的 App/目錄

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

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

由于新的路由機(jī)制，目錄結(jié)構(gòu)發(fā)生了微小的變化。路由中的每個(gè)路徑都有一個(gè)專門的目錄，其中有一個(gè)page.js文件，作為Next.js 13的內(nèi)容入口點(diǎn)。

路由方面的差異

由于采用了新的結(jié)構(gòu)，我們現(xiàn)在可以在每個(gè)路徑目錄中包含額外的文件。此外，一個(gè)路由的page.js，如。

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

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

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

關(guān)于 Next.js 新版本最令人興奮的是對(duì) React 服務(wù)器組件的擴(kuò)展支持。服務(wù)器組件允許我們?cè)诜?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ù)器組件用于程序的快速加載、非交互式部分，而將客戶端組件用于交互、瀏覽器API和其他功能。

在為你的 Next.js 應(yīng)用程序構(gòu)建客戶端組件時(shí)，你可以在文件頂部使用 'use client'; 指令將它們標(biāo)記為客戶端組件。然而，如果你使用了任何第三方軟件包，你可能需要?jiǎng)?chuàng)建一個(gè)客戶端包裝器。

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

此外，Next.js 13引入了async組件，這是一種用于服務(wù)器渲染組件的數(shù)據(jù)收集的全新方法。在使用async組件時(shí)，我們可以使用async & await的Promises來渲染系統(tǒng)。

當(dāng)從外部服務(wù)或API請(qǐng)求數(shù)據(jù)并返回一個(gè)Promise時(shí)，我們將組件聲明為同步，并等待響應(yīng)。

asyncfuncgetData() {
constres =awaitfetch('https://api.shamim.com/...')。
返回res.json()。
}

export default async function About() {
constname =await getData();
返回 '...'。
}

下面的例子演示了從第三方服務(wù)獲取數(shù)據(jù)的Next.js 12方法。

export default function About({data}) {
返回 "..."。
}

函數(shù) getServerSideProps(){
   // 從外部API獲取數(shù)據(jù)
   constres =await fetch(https://.../data)
   constdata =awaitres.json()

   // 通過props將數(shù)據(jù)傳遞給頁面 return
   返回{ 
       props: { data } 
    }
}

這種方式的API請(qǐng)求已被簡化，其非常直觀和容易理解，現(xiàn)在在較新的版本。

4.流媒體

以前，用戶可能不得不等待整個(gè)頁面的生成?，F(xiàn)在，服務(wù)器將在UI生成時(shí)向客戶端傳送小塊的內(nèi)容。這意味著大的片段不會(huì)妨礙小的片段。當(dāng)然，就目前而言，這個(gè)功能只支持應(yīng)用目錄，而且這似乎不會(huì)改變。

這項(xiàng)新功能不會(huì)像那些連接較弱的人那樣，讓擁有強(qiáng)大網(wǎng)絡(luò)連接或快速Wi-Fi的個(gè)人受益。事實(shí)上，這樣的人比你想象的要多。更快的網(wǎng)站加載時(shí)間將改善用戶體驗(yàn)，這很好。

5.Turbopack

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

Turbopack是由Webpack的創(chuàng)造者開發(fā)的，用Rust構(gòu)建，承諾比原來的Webpack快700倍（比更現(xiàn)代的替代品Vite快10倍）。

其他升級(jí)

next/image

Next.js中的新圖像組件包括更少的客戶端 JavaScript、樣式和配置，并改進(jìn)了可訪問性。在代碼變化方面，next/legacy/image的導(dǎo)入已被重新命名為next/image，next/future/image的導(dǎo)入已被改為next/image。有一個(gè)codemod可用來實(shí)現(xiàn)快速遷移。

next/font

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

next/link:

它是一個(gè)新穎的字體系統(tǒng)，通過提供自動(dòng)字體優(yōu)化、整合自定義字體的可能性，以及所有這些功能而不使用任何外部網(wǎng)絡(luò)請(qǐng)求，提高了效率和隱私。

總結(jié)

最近推出的Next.js 13帶來了很多新功能和升級(jí)，如新路由、新的數(shù)據(jù)獲取方式（React suspense）、Vercel字體、og圖片生成、布局等[2]。它們可以改變游戲規(guī)則并承諾速度極快，但是它們也有一些權(quán)衡[2]。然而，需要注意的是，盡管這些創(chuàng)新性的功能引入了最新的React，但許多重要的功能仍處于RFC階段，因此在Next.js 13中可能無法使用[1]。

Next.js 13還具有其他新功能和升級(jí)，如文件基礎(chǔ)路由的應(yīng)用/目錄[3]、React服務(wù)器組件、異步組件數(shù)據(jù)獲取、流式傳輸、Turbopack等[3]。這些升級(jí)帶來了顯著的性能提升，使Next.js成為構(gòu)建現(xiàn)代Web應(yīng)用程序的理想選擇。

總的來說，Next.js 13的新功能和升級(jí)是非常有前途的，具有極大的潛力，但由于其中許多功能還在開發(fā)中，因此可能會(huì)存在一些問題。盡管如此，Next.js 13仍然是現(xiàn)代Web應(yīng)用程序的一個(gè)不錯(cuò)的選擇，特別是對(duì)于那些希望提高性能并提高用戶體驗(yàn)的開發(fā)者來說。

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