為什么Next.js 13會(huì)改動(dòng)游戲規(guī)則？

2023版RN從0到1系統(tǒng)精講與小紅書APP實(shí)戰(zhàn)

download：https://www.51xuebc.com/thread-542-1-1.html

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

Next.js的主要益處之一是，它能夠完成效勞器端渲染。這意味著效勞器能夠生成頁(yè)面的HTML并將其發(fā)送給客戶端，而不是由客戶端運(yùn)用JavaScript生成HTML。這能夠進(jìn)步你的應(yīng)用程序的性能和SEO。

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

如今你對(duì)Next.js有了更多的理解，讓我們來探究Next.js 13版本給我們帶來了什么。

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

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

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

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

Next.js 13包括更新的文件路由與新目錄?？蛇x的應(yīng)用程序目錄引入了一個(gè)新的規(guī)劃構(gòu)造以及一些新的功用和改良。

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

路由方面的差別

由于采用了新的構(gòu)造，我們?nèi)缃衲軌蛟诿總€(gè)途徑目錄中包含額外的文件。此外，一個(gè)路由的page.js，如。

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

底層的 Suspense 和 error.js，假如主組件無(wú)法加載，則顯現(xiàn)一個(gè)組件。由于如今每個(gè)途徑都有本人的目錄，我們能夠在途徑目錄中并排放置源文件。

2.React效勞器組件

關(guān)于 Next.js 新版本最令人興奮的是對(duì) React 效勞器組件的擴(kuò)展支持。效勞器組件允許我們?cè)谛谄鞫诉\(yùn)轉(zhuǎn)和渲染 React 組件，以完成更快的傳輸、更小的 JavaScript 包和更廉價(jià)的客戶端渲染。

此外，依據(jù)生成路由所需的數(shù)據(jù)類型，效勞器組件會(huì)在構(gòu)建時(shí)或運(yùn)轉(zhuǎn)時(shí)自動(dòng)緩存，以取得額外的性能優(yōu)勢(shì)。

分離效勞器和客戶端組件，你能夠?qū)⑿谄鹘M件用于程序的快速加載、非交互式局部，而將客戶端組件用于交互、閱讀器API和其他功用。

在為你的 Next.js 應(yīng)用程序構(gòu)建客戶端組件時(shí)，你能夠在文件頂部運(yùn)用 'use client'; 指令將它們標(biāo)志為客戶端組件。但是，假如你運(yùn)用了任何第三方軟件包，你可能需求創(chuàng)立一個(gè)客戶端包裝器。

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

此外，Next.js 13引入了async組件，這是一種用于效勞器渲染組件的數(shù)據(jù)搜集的全新辦法。在運(yùn)用async組件時(shí)，我們能夠運(yùn)用async & await的Promises來渲染系統(tǒng)。

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

asyncfuncgetData() { constres =awaitfetch('https://api.shamim.com/...')。 返回res.json()。 } export default async function About() { constname =await getData(); 返回 '...'。 }

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

export default function About({data}) { 返回 "..."。 } 函數(shù) getServerSideProps(){ // 從外部API獲取數(shù)據(jù) constres =await fetch(https://.../data) constdata =awaitres.json() // 經(jīng)過props將數(shù)據(jù)傳送給頁(yè)面 return 返回{ props: { data } } }

這種方式的API懇求已被簡(jiǎn)化，其十分直觀和容易了解，如今在較新的版本。

4.流媒體

以前，用戶可能不得不等候整個(gè)頁(yè)面的生成。如今，效勞器將在UI生成時(shí)向客戶端傳送小塊的內(nèi)容。這意味著大的片段不會(huì)阻礙小的片段。當(dāng)然，就目前而言，這個(gè)功用只支持應(yīng)用目錄，而且這似乎不會(huì)改動(dòng)。

這項(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的發(fā)明者開發(fā)的，用Rust構(gòu)建，承諾比原來的Webpack快700倍（比更現(xiàn)代的替代品Vite快10倍）。

其他晉級(jí)

next/image

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

next/font

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

next/link:

它是一個(gè)新穎的字體系統(tǒng)，經(jīng)過提供自動(dòng)字體優(yōu)化、整合自定義字體的可能性，以及一切這些功用而不運(yùn)用任何外部網(wǎng)絡(luò)懇求，進(jìn)步了效率和隱私。

總結(jié)

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

Next.js 13還具有其他新功用和晉級(jí)，如文件根底路由的應(yīng)用/目錄[3]、React效勞器組件、異步組件數(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ò)的選擇，特別是關(guān)于那些希望進(jìn)步性能并進(jìn)步用戶體驗(yàn)的開發(fā)者來說。