跳至內容
返回部落格

2022 年 2 月 17 日，星期四

Next.js 12.1

發佈者
Balázs Orbán
Balázs Orbán@balazsorban44
DongYoon Kang
DongYoon Kang@kdy1dev
Gerald Monaco
Gerald Monaco@devknoll
Javi Velasco
Javi Velasco@javivelasco
Jiachi Liu
Jiachi Liu@huozhi
JJ Kasper
JJ Kasper@_ijjk
Joe Haddad
Joe Haddad@timer150
Kara Erickson
Kara Erickson@karaforthewin
Maia Teegarden
Maia Teegarden@padmaia
Shu Ding
Shu Ding@shuding_
Steven
Steven@styfle
Tim Neutkens
Tim Neutkens@timneutkens
Tobias Koppers
Tobias Koppers@wSokra

我們很高興在 Next.js 12.1 中發佈最受大家期待的功能之一

立即更新，執行 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) {
  // Check for secret to confirm this is a valid request
  if (req.query.secret !== process.env.MY_SECRET_TOKEN) {
    return res.status(401).json({ message: 'Invalid token' });
  }
 
  try {
    await res.unstable_revalidate('/path-to-revalidate');
    return res.json({ revalidated: true });
  } catch (err) {
    // If there was an error, Next.js will continue
    // to show the last successfully generated page
    return res.status(500).send('Error revalidating');
  }
}

在 getStaticProps 裡面，您不需要指定 revalidate 即可使用隨需重新驗證。如果省略 revalidate，Next.js 將使用預設值 false（不重新驗證），並且只在呼叫 unstable_revalidate() 時隨需重新驗證頁面。

增量靜態再生適用於任何支援 Next.js 建置 API (next build) 的供應商。從今天開始，當部署到 Vercel 時，隨需重新驗證將在推送頁面到邊緣節點時，於約 300 毫秒內全域傳播。

觀看我們的展示以了解隨需重新驗證的實際運作方式並提供意見回饋。Svix（企業級 Webhook）和 Clerk（驗證）也建立了一個隨需 ISR 的展示。

改進的 SWC 支援

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

在 12.1 版本中，我們為 Next.js 編譯器增加了對以下內容的支援：

隨著以上六種轉換的加入，我們現在已經使用新的編譯器將最常用的 Babel 插件移植到 Rust。如果您還有其他想看到的插件，請在討論區告訴我們。此外，我們正在開發一個高效能 WebAssembly 插件系統，透過 SWC 來啟用。

零配置 Jest 插件

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

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

查看文檔以了解更多資訊，或從我們的 Jest 範例開始。

使用 SWC 更快地進行程式碼壓縮

在 Next.js 12 中，我們引入了使用 SWC 進行程式碼最小化的 Next.js 編譯器。初步結果顯示，它的速度比 Terser 快 7 倍。使用 SWC 進行最小化的功能現已在 12.1 版本中進入候選發佈 (RC) 階段，並將在 12.2 版本中成為預設選項。

您可以在 next.config.js 中選擇使用 SWC 進行最小化。

next.config.js
module.exports = {
  swcMinify: true,
};

歡迎在 討論區 中提供您的意見回饋。

更快的圖片優化

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

這對於圖片優化來說是一項顯著的效能提升。詳情請參閱 圖片快取行為。

自行託管 Next.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 Runtime，以便在準備就緒時逐步從 Node.js 遷移頁面。

我們很快就會發布另一篇文章，更深入地探討 Edge Runtime。我們的兩個示範專案 (next-server-components 和 next-rsc-demo) 已更新為最新版本。

其他錯誤修正和改進

  • 使用 <a> 且設定 target="blank" 時，ESLint 不再發出使用 next/link 的警告。
  • .d.ts 檔案不再被視為頁面。
  • 在向螢幕閱讀器宣告頁面變更時，document.title 現在優先於 h1。
  • 現在可以建立 pages/index/[...dynamic].js，之前由於 index 是保留關鍵字而無法建立。
  • 使用 dynamic(() => import('./some-component'), { ssr: false }) 時，匯入的內容將會自動從伺服器程式碼中移除 (treeshaken)。
  • 為了縮小安裝大小並提高安全性，我們正致力於預先編譯更多依賴項。最新加入的是 node-fetch。
  • 使用中介軟體時，快速重新整理 (Fast Refresh) 的改進。
  • 我們內建的 ESLint 整合支援 ESLint 8。
  • styled-jsx 已升級至 5.0 版，所有 styled-jsx 編譯錯誤現在都包含新的錯誤連結，方便除錯。
  • Edge Runtime：支援 AbortController 和 AbortSignal。
  • Edge Runtime：新增 CryptoKey 和 globalThis.CryptoKey。
  • 近期改進後，大型 Next.js 應用程式 (重新載入超過 1,000 個模組) 的快速重新整理時間提升了約 60%。
  • 如果快速重新整理失敗並導致整個頁面重新載入，現在會顯示通知。
  • 使用 React 18 嚴格模式時，已宣告的路由現在會正確地跳過初始頁面載入時的宣告。
  • 與 2021 年 12 月相比，我們已將 Next.js 儲存庫中的未解決問題數量減少了近 300 個(已解決近 1000 個問題)。

Next.js 開發者問卷調查

透過我們的首份開發者問卷調查分享您的意見回饋，協助我們改進 Next.js。

此問卷調查分為兩個部分：一份包含八個問題的快速問卷，以及一份深入探討個別功能意見回饋的延伸問卷。如果您有時間，我們希望您能填寫兩個部分，但如果沒有時間，您也可以在填寫完第一部分後提交答案。

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

感謝您協助我們改進 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。