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) {
  // 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 Build API (`next build`) 的供應商。從今天開始，當部署到 Vercel 時，根據需求重新驗證會在將頁面推送至邊緣時，於約 300 毫秒內在全球範圍內傳播。

檢視我們的示範，以查看隨需應變重新驗證的實際運作情況並提供意見回饋。Svix (企業級 webhook) 和 Clerk (身份驗證) 也建立了一個隨需應變 ISR 的示範。

改善的 SWC 支援

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

在 12.1 中，我們為 Next.js 編譯器新增了對以下項目的支援：

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

零配置 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 範例開始。

更快速的圖片最佳化

內建的圖片最佳化 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) 都已使用最新的變更進行更新。

其他錯誤修正和改進

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

Next.js 開發者問卷調查

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

本次問卷調查分為兩個部分：快速問卷（共八個問題）和深入問卷（針對個別功能徵求意見回饋）。如果您時間允許，我們非常希望您能填寫兩個部分，但若時間有限，您也可以在完成第一部分後提交答案。

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

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

感謝貢獻者

Next.js 是超過 2,000 位個別開發者、Google 和 Facebook 等產業夥伴，以及我們核心團隊共同努力的成果。

為了讓貢獻更輕鬆，我們已將 Next.js 儲存庫遷移至使用 Turborepo，以提升建置效能。我們也新增了測試的 scaffolding 和錯誤連結，讓開始撰寫測試變得更容易。最後，我們錄製了一段 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。