Next.js 12.1 版本發布 | Next.js

我們非常興奮地在 Next.js 12.1 中發布了最受期待的功能：

按需增量靜態再生 (ISR Beta 版)：立即使用 getStaticProps 重新驗證頁面
擴展的 SWC 支援：新增 styled-components、Relay 等轉換器
next/jest 插件：透過 SWC 實現零配置 Jest 支援
SWC 極速程式碼壓縮 (RC 版)：比 Terser 快 7 倍的壓縮速度
自託管改進：Docker 映像體積縮小約 80%
React 18 與伺服器元件 (Alpha 版)：穩定性和支援度提升
開發者問卷調查：用您的反饋幫助我們改進 Next.js

立即執行 npm i next@latest 進行更新。

按需增量靜態再生 (Beta 版)

Next.js 現在提供了 unstable_revalidate() 函數，讓您可以重新驗證使用 getStaticProps 的單一頁面。這是自 Next.js 9.5 推出增量靜態再生 (ISR) 功能以來最受期待的功能。

自 ISR 發布以來，我們看到 Tripadvisor、Parachute、HashiCorp 等公司大幅縮短了建置時間，同時保持了卓越的性能。然而，我們聽取了您對基於時間間隔重新驗證的意見，並很高興能提供更靈活的解決方案。

目前，如果您將 revalidate 時間設為 60，所有訪客在一分鐘內都會看到相同的靜態頁面版本。唯一使快取失效的方式是在一分鐘後有人訪問該頁面。現在您可以手動按需清除特定頁面的 Next.js 快取。

這讓以下情境的網站更新更加容易：

無頭 CMS 的內容被創建或更新時
電子商務元數據變更時（價格、描述、類別、評論等）

pages/api/revalidate.js

export default async function handler(req, res) {
  // 檢查密鑰以確認這是有效請求
  if (req.query.secret !== process.env.MY_SECRET_TOKEN) {
    return res.status(401).json({ message: '無效令牌' });
  }
 
  try {
    await res.unstable_revalidate('/path-to-revalidate');
    return res.json({ revalidated: true });
  } catch (err) {
    // 如果發生錯誤，Next.js 會繼續
    // 顯示最後成功生成的頁面
    return res.status(500).send('重新驗證時發生錯誤');
  }
}

在 getStaticProps 中，您不需要指定 revalidate 來使用按需重新驗證。如果省略 revalidate，Next.js 將使用預設值 false（不重新驗證），只有在呼叫 unstable_revalidate() 時才會按需重新驗證頁面。

增量靜態再生適用於所有支援 Next.js 建置 API (next build) 的服務提供商。從今天開始，當部署到 Vercel 時，按需重新驗證會在約 300 毫秒內將頁面推送到全球邊緣節點。

查看我們的示範了解按需重新驗證的實際運作並提供反饋。Svix（企業級 Webhooks）和 Clerk（身份驗證）也創建了一個示範展示按需 ISR。

SWC 支援增強

我們希望讓每個 Next.js 應用程式在生產環境中建置得更快，並在本地開發時獲得即時反饋。Next.js 12 引入了新的基於 Rust 的編譯器，利用原生編譯的優勢。

在 12.1 版本中，我們為 Next.js 編譯器新增了以下轉換器的支援：

新增上述六個轉換器後，我們已將最常見的 Babel 插件移植到使用新編譯器的 Rust 中。如果您希望看到其他插件，請在討論區告訴我們。此外，我們正在開發一個透過 SWC 啟用的高效能 WebAssembly 插件系統。

零配置 Jest 插件

Next.js 現在會自動為您配置 Jest (next/jest)，使用基於 Rust 的 Next.js 編譯器來轉換檔案，包括：

自動模擬樣式表 (.css、.module.css 及其 .scss 變體) 和圖片導入
將 .env (及其所有變體) 載入到 process.env
從測試解析和轉換中忽略 node_modules
從測試解析中忽略 .next
載入 next.config.js 以啟用 Next.js 編譯器轉換的標誌

查看文件了解更多，或從我們的 Jest 範例開始使用。

更快的圖片優化

內建的圖片優化 API 已更新，支援與 ISR 頁面相同的模式，圖片會先提供過期版本並在背景重新驗證（也稱為 stale-while-revalidate）。

這對圖片優化是重大的性能改進。詳見圖片快取行為。

自託管 Next.js 改進

Next.js 現在可以自動創建一個 standalone 資料夾，僅複製生產部署所需的檔案。這使得自託管 Next.js 應用程式的 Docker 映像體積縮小了約 80%。

要使用此自動複製功能，您可以在 next.config.js 中啟用：

next.config.js

module.exports = {
  experimental: {
    outputStandalone: true,
  },
};

這將在 .next/standalone 創建一個資料夾，無需安裝 node_modules 即可獨立部署。

查看文件或從 Docker 範例開始使用。我們現在還提供了一個多環境 Docker 範例，支援根據環境載入不同的 .env 檔案。

React 18、伺服器元件與 SSR 串流 (Alpha 版)

如 Next.js Conf 所示，我們一直在努力將 React 18、伺服器端 Suspense、串流 SSR 以及最終的伺服器元件引入 Next.js。

伺服器元件是 React 的新功能，可讓您通過分離伺服器和客戶端代碼來減少 JavaScript 包大小。伺服器元件允許開發人員構建跨越伺服器和客戶端的應用程式，結合客戶端應用的豐富互動性和傳統伺服器渲染的改進性能。

對於關注 Next.js 中伺服器元件從 Alpha 到 Beta 進展的開發者，以下是最近的一些更新：

我們正在努力讓您能在 Edge 運行時完全伺服器渲染整個 Next.js 應用程式。您可以選擇哪些頁面應選擇加入 Edge 運行時，這樣您就可以在準備好時從 Node.js 逐步遷移頁面。

我們將很快發布另一篇文章更深入地介紹 Edge 運行時。我們的兩個示範 (next-server-components 和 next-rsc-demo) 都已更新為最新變更。

其他錯誤修復與改進

使用帶有 target="blank" 的 <a> 標籤時，ESLint 不再警告需使用 next/link
.d.ts 檔案不再被視為頁面
當向屏幕閱讀器宣布頁面變更時，document.title 現在優先於 h1
現在可以創建 pages/index/[...dynamic].js，之前由於 index 是保留關鍵字而無法實現
當使用 dynamic(() => import('./some-component'), { ssr: false }) 時，導入將自動從伺服器代碼中樹搖優化
為了減小安裝體積並提高安全性，我們正在努力預編譯更多依賴項。最新新增的是 node-fetch
使用中介軟體時改進了快速刷新
支援 ESLint 8 與我們的內建 ESLint 整合
styled-jsx 已升級至 5.0，包括所有 styled-jsx 編譯錯誤的新幫助鏈接
Edge 運行時：支援 AbortController 和 AbortSignal
Edge 運行時：新增 CryptoKey 和 globalThis.CryptoKey
大型 Next.js 應用程式在快速刷新時間上看到了約 60% 的改進（超過 1,000 個模組重新載入）
如果快速刷新失敗並導致完整頁面重新載入，現在會顯示通知
使用 React 18 嚴格模式時，現在會正確跳過宣布初始頁面載入
與 2021 年 12 月相比，我們已將 Next.js 存儲庫的未解決問題數量減少了近 300 個（解決了近 1000 個問題）

Next.js 開發者問卷調查

分享您的反饋，幫助我們通過首次開發者問卷調查改進 Next.js。

本次問卷分為兩部分：包含八個問題的快速調查和深入探討各功能反饋的擴展調查。如果您有時間，我們希望您能填寫兩部分，但如果時間有限，完成第一部分後即可提交。

您的回答將完全匿名，但如果您願意，可以選擇與我們分享您的應用程式網址。

感謝您幫助我們改進 Next.js！

感謝貢獻者

Next.js 是 超過 2,000 名獨立開發者、Google 和 Facebook 等行業合作夥伴以及我們核心團隊共同努力的成果。

為了讓貢獻更容易，我們已將 Next.js 存儲庫遷移到使用 Turborepo 以提高建置性能。我們還添加了測試腳手架和錯誤鏈接，讓開始編寫測試更加容易。最後，我們錄製了一段 40 分鐘的教學視頻，展示如何為 Next.js 做出貢獻。

此版本由以下貢獻者共同實現：@MaedahBatool, @mutebg, @sokra, @huozhi, @hanford, @shuding, @sean6bucks, @jameshfisher, @devknoll, @yuta-ike, @zh-lx, @amandeepmittal, @alunyov, @stefanprobst, @leerob, @balazsorban44, @kdy1, @brittanyrw, @jord1e, @kara, @vvo, @ismaelrumzan, @dlindenkreuz, @MohammadxAli, @nguyenyou, @thibautsabot, @hanneslund, @vertti, @KateKate, @stefee, @mikinovation, @Leticijak, @mohsen1, @ncphillips, @ehowey, @lancechentw, @krychaxp, @fmacherey, @pklawansky, @RyanClementsHax, @lakbychance, @sannajammeh, @oliviertassinari, @alexander-akait, @u-yas, @Cheprer, @msp5382, @chrispat, @getspooky, @Ryz0nd, @klaasman, @midgleyc, @kumard3, @jesstelford, @neeraj3029, @glenngijsberts, @pie6k, @wouterraateland, @timneutkens, @11koukou, @thesyedbasim, @aeneasr, @ijjk, @lfades, @JuniorTour, @xavhan, @mattyocode, @padmaia, @Skn0tt, @gwer, @Nutlope, @styfle, @stipsan, @xhoantran, @eolme, @sespinosa, @zenorocha, @hjaber, @benmvp, @T-O-R-U-S, @dburrows, @atcastle, @kiriny, @molebox, @Vienio99, @kyliau, @PepijnSenders, @krystofex, @PizzaPete, @souljuse, @Schniz, @Nelsonfrank, @Mhmdrza, @hideokamoto-stripe, @Emrin, @gr-qft, @delbaoliveira, @redbar0n, @lxy-yz, @Divlo, @kachkaev, @teleaziz, @OgbeniHMMD, @goncy, @bennettdams, @hsynlms, @callumgare, @jonrosner, @karaggeorge, @rpie3, @MartijnHols, @bashunaimiroy, @NOCELL, @rishabhpoddar, @omariosouto, @theMosaad, @javivelasco, @pierrenel, @lobsterkatie, @tharakabimal, @saevarb, @nbouvrette, @paulnbrd, @ecklf, @renbaoshuo, @chozzz, @tbezman, @karlhorky, @j-mendez, @ffan0811, @arthurfiorette, @chimit, @joperron, @moh12594, @rasmusjp, @bryanrsmith, @TrySound, @josharsh, @thecrypticace, @arturparkhisenko, @segheysens, @thevinter, @AryanBeezadhur, @xiaohp, @tknickman, @oriolcp, @smakosh, @jorrit, @mix3d, @Clecio013, @michielvangendt, @intergalacticspacehighway, @jbraithwaite, @marcelocarmona, @benmerckx, @haykerman, @steven-tey, @jaredpalmer, @pi-guy-in-the-sky, @JuanM04, @apollisa, @D-Pagey, @Kikobeats, @ramosbugs, @dan-weaver, @chris-stytch, @MikevPeeren, @janpio, @emw3, @nubpro, @cmdcolin, @joostdecock, @sgallese, @housseindjirdeh, @minervabot, @cjboco, @Ryuurock, @dm430, @mkarkachov, @nvh95, @gfortaine, @zifeo, @vicente-s, @Rohithgilla12, @brookton, @skirsten, @davidfateh, @DavidBabel, @mannybecerra, @pveyes, @kaykdm, @xhiroga, @mzaien, @losfair, @ykzts, @knezevicdev, @yang-feng-yfeng, @xuchaobei, @elkevinwolf, @fabienheureux, @nilskaspersson, @Andarist, @mathcrln, @dferber90, @FranciscoMoretti, @benschwarz, @wendellhu95, @gazdagergo, @imabp, @ljosberinn, @samuliasmala, @ka2jun8, @monsonjeremy, @pqt, @leoortizz, @michel-kraemer, @ntkoopman, @iicdii, @chentsulin, @ericmatthys, @lennym, @balogunkeji, @wnr, @chemicalkosek, @KittyGiraudel, @OKinane, @KonstHardy, @BrandonRomano, @furcan, @dusanralic, @elliottsj, @hi-ogawa, @panva, @genetschneider, @thundermiracle, @stefano-rainieri, @ericbiewener, @vordgi, @stevejarvis, @ihmpavel, @matamatanot, @dyarfaradj, @iheyunfei, @ascorbic, @fytriht, @emzoumpo, @onurtemiz, @a-ursino, @mxschmitt, @bywo, @OArnarsson, @TurekBot, @gish, @vadymshymko, @kamsar, @skhaz, @Prashoon123, @IrisvanOllefen, @evan-bradley, @ntltd, @EzequielDM, @oBusk, @martpie, @BruceRodrigues, @luke-h1, @lucasvazq, @velocity23, @AkiraTsuboi, @mitheelgajare, @JamiesWhiteShirt, @leroydev, @JulienZD, @leotaku, @mattfwood, 和 @kripod。