作者 | Bruno Couriol
譯者 | 明知山
策劃 | 丁曉昀
Next.js 大會(huì)介紹了 Next.js 13，一個(gè) React App 框架的最新版本驼壶。Next.js 13 希望通過(guò)提供創(chuàng)新的特性開(kāi)發(fā)出“動(dòng)態(tài)無(wú)限制”的 App，其中許多特性仍處于 Alpha 或 Beta 階段喉酌。新特性對(duì)編譯器热凹、路由和渲染基礎(chǔ)設(shè)施進(jìn)行了更新，并改進(jìn)了組件工具包泪电。
Next.js 團(tuán)隊(duì)在最近的主題演講中解釋了 Next.js 最新版本背后的邏輯般妙。
Next.js 最初是用于構(gòu)建動(dòng)態(tài)服務(wù)器端渲染網(wǎng)站的 React 框架。在設(shè)計(jì) Next.js 時(shí)歪架，我們沒(méi)有針對(duì)單頁(yè)應(yīng)用進(jìn)行優(yōu)化股冗，而是考慮幫助開(kāi)發(fā)團(tuán)隊(duì)構(gòu)建復(fù)雜的應(yīng)用程序霹陡。但是和蚪，動(dòng)態(tài)總是伴隨著許多限制止状。
動(dòng)態(tài)意味著要以高成本、始終在線的基礎(chǔ)設(shè)施為代價(jià)攒霹，需要手動(dòng)配置和大量的運(yùn)維怯疤。
動(dòng)態(tài)也意味著要同時(shí)處理兩組運(yùn)行時(shí) API，在服務(wù)器端沒(méi)有 JS催束，而瀏覽器端有 Web 標(biāo)準(zhǔn) API集峦。
想要?jiǎng)討B(tài)，通常只在一個(gè)單一的區(qū)域抠刺，其伸縮性取決于遺留塔淤、靜態(tài)和 CDN 緩存。
我們發(fā)布 Next.js 13速妖，讓你們能夠?qū)崿F(xiàn)無(wú)限制的動(dòng)態(tài)高蜂。
新版本對(duì)工具包進(jìn)行了改進(jìn)（改進(jìn)的 Link 組件、新的 Image 組件和新的 @next/font 庫(kù)）罕容。Alpha/Beta 版特性提供了未來(lái)的服務(wù)器端渲染預(yù)覽备恤，正如 Vercel 所設(shè)想的那樣。
新的 Image 組件旨在改善用戶體驗(yàn)锦秒，采用本地延遲加載露泊，減少客戶端 JavaScript 交付，沒(méi)有了布局漂移旅择。在開(kāi)發(fā)者體驗(yàn)方面惭笑，新組件力求簡(jiǎn)化設(shè)置樣式和配置。
改進(jìn)后的 Link 組件不再需要錨標(biāo)記（即）作為子元素∑鲎螅現(xiàn)在脖咐，下面的錨鏈接 Next.js 代碼是有效的：
// Next.js 13: <Link> always renders <a>
<Link href="/about">
About
</Link>
@next/font（在 Beta 版中發(fā)布）將自動(dòng)優(yōu)化字體（包括自定義字體），并刪除外部網(wǎng)絡(luò)請(qǐng)求汇歹，以提高隱私性和性能屁擅。文檔中提到的細(xì)節(jié)：
@next/font 包含了內(nèi)置的自動(dòng)自托管任意字體文件，你可以在零布局漂移的情況下加載網(wǎng)頁(yè)字體产弹，這要得益于使用了底層的 size-adjust CSS 屬性派歌。
Next.js 13 引入了 Turbopack（在 Alpha 版中發(fā)布），作為基于 Rust 的 Webpack 替代方案痰哨，為開(kāi)發(fā)人員帶來(lái)數(shù)量級(jí)的速度改進(jìn)胶果。與之前的 Parcel 一樣，Turbopack 可以增量構(gòu)建和捆綁源文件斤斧。Next.js 團(tuán)隊(duì)宣稱：
Turbopack 只打包開(kāi)發(fā)所需的最小資產(chǎn)文件早抠，因此啟動(dòng)速度非常快撬讽。一個(gè)包含 3000 個(gè)模塊的應(yīng)用程序蕊连，Turbopack 啟動(dòng)只需要 1.8 秒悬垃，而 Vite 耗時(shí) 11.4 秒，Webpack 則需要 16.5 秒甘苍。
Turbopack 對(duì) Server Component尝蠕、TypeScript、JSX载庭、CSS 等都提供了開(kāi)箱即用的支持看彼。
Vite 的作者尤雨溪最近對(duì) Vite 和 Next/Turbo 進(jìn)行了基準(zhǔn)測(cè)試。他發(fā)現(xiàn)囚聚，當(dāng)使用類似的配置執(zhí)行基準(zhǔn)測(cè)試時(shí)靖榕，二者的速度是相近的。截至本文發(fā)布顽铸，Vercel 的基準(zhǔn)測(cè)試方法和結(jié)果也已經(jīng)發(fā)布序矩，糾正了一些錯(cuò)誤，但這仍然是一個(gè)存在爭(zhēng)議的話題跋破。
雖然開(kāi)發(fā)者體驗(yàn)的改善得到了許多積極評(píng)價(jià)簸淀，但一位開(kāi)發(fā)者仍然指出了可能存在的缺點(diǎn)和局限性：
因?yàn)辇嫶蟮?Webpack 插件生態(tài)系統(tǒng)，這可能會(huì)使現(xiàn)有應(yīng)用程序的遷移變得非常困難毒返。Vercel 可能需要依靠社區(qū)的貢獻(xiàn)開(kāi)發(fā)某種插件系統(tǒng)租幕，這可能很困難，因?yàn)橄裎疫@樣的 JavaScript 開(kāi)發(fā)人員愚蠢又懶惰拧簸，不愿意學(xué)習(xí) Rust劲绪。
此外，對(duì)于大多數(shù)項(xiàng)目來(lái)說(shuō)盆赤，帶有 esbuild 的 Vite 已經(jīng)足夠快了贾富，它提供了無(wú)與倫比的體驗(yàn)。
你還應(yīng)該知道的是牺六，Vercel 有意希望通過(guò)在云端遠(yuǎn)程緩存構(gòu)建來(lái)賺錢(qián)颤枪。
Next.js 13 還對(duì)路由和渲染基礎(chǔ)設(shè)施進(jìn)行了重大更改，其中一些直接與 React 核心團(tuán)隊(duì)合作淑际，以便更好地利用 React 的 Server Component畏纲、Suspense 和流。文檔中提到：
新的路由器支持春缕。
布局：在路由之間輕松共享 UI盗胀，同時(shí)保留狀態(tài)，避免昂貴的重新渲染锄贼。
Server Component：將服務(wù)器優(yōu)先作為大多數(shù)動(dòng)態(tài)應(yīng)用程序的默認(rèn)設(shè)置票灰。
流渲染：渲染時(shí)在 UI 單元中顯示即時(shí)加載狀態(tài)和流。
數(shù)據(jù)抓取：async 的 Server Component 和擴(kuò)展的 fetchAPI 支持組件級(jí)抓取屑迂。
要了解更多細(xì)節(jié)强品，可以查看發(fā)布說(shuō)明。
雖然有很多開(kāi)發(fā)者對(duì)該版本做出了積極的反應(yīng)屈糊，但一位開(kāi)發(fā)者指出：
如何使用 Server Component 相關(guān)的規(guī)則不直觀，也很難理解琼了。我認(rèn)為這對(duì) React 的負(fù)面名聲也不會(huì)帶來(lái)什么幫助逻锐。在同一個(gè)代碼庫(kù)中處理客戶端 JS 和 Node 運(yùn)行時(shí)就很麻煩了，而在舊范式中雕薪，至少兩端之間只有一個(gè)交互點(diǎn)（getServerSideProps/getStaticProps）昧诱，但現(xiàn)在可以出現(xiàn)在每個(gè)組件邊界上。
另一名開(kāi)發(fā)者對(duì)一些新特性提出了警告：
Next.js 涵蓋了 React 團(tuán)隊(duì)正在研究的一些實(shí)驗(yàn)性的所袁、還不穩(wěn)定的 React 特性盏档，比如服務(wù)器端組件，或者在這些服務(wù)器端組件中支持 async/await燥爷。
因此蜈亩，Next.js 也包含了 React 的一些未來(lái)的概念。但你需要知道這些是不穩(wěn)定前翎、尚未完成的 API稚配，它們?nèi)栽谘芯亢蛯?shí)現(xiàn)當(dāng)中。
當(dāng)你嘗試在 Beta 版的文檔中搜索如何使用新的 /app 文件夾和構(gòu)建 Next.js 應(yīng)用程序的新方法時(shí)港华，你會(huì)發(fā)現(xiàn)許多相關(guān)特性仍然缺失道川、未完成、可能發(fā)生變更等警告和注釋立宜。
Next.js 基于 MIT 開(kāi)源許可冒萄。歡迎開(kāi)發(fā)者為 Next.js GitHub 代碼庫(kù)做出貢獻(xiàn)，并遵循 Next.js 貢獻(xiàn)指南和行為準(zhǔn)則橙数。
原文鏈接：https://www.infoq.com/news/2022/11/nextjs-13-released/
聲明：本文為InfoQ翻譯尊流，未經(jīng)許可禁止轉(zhuǎn)載。
