Next.js 10.1

我們很高興推出 Next.js 10.1，其特色包含

• 3 倍更快的重新整理：更快速 200 毫秒的重新整理，無需任何變更。
• 改善的安裝時間：安裝大小減少 58%，依賴項目減少 56%。
• next/image 改善：Apple Silicon (M1) 支援，以及更多版面配置和載入器選項。
• Next.js Commerce Shopify 整合：適用於可組合電子商務應用程式的彈性資料層。
• 自訂 500 頁面：將您自己的標誌和品牌新增至錯誤頁面。
• 嚴格的 PostCSS 設定載入：透過 Webpack 5 改善快取。
• 在 tsconfig.json 中支援 extends：適用於大型 TypeScript 應用程式的可擴充設定。
• 偵測預覽模式何時啟用：在檢視預覽時有條件地顯示內容。
• 路由器方法捲動至頂端：自動捲動至頂端，現在所有路由皆一致。
• 文件改善：漸進式採用、遷移和 Docker 部署。

3 倍更快的重新整理

從 v9.4 開始，Next.js 將 Facebook 的 Fast Refresh 引入開源，以便針對您對 React 元件所做的編輯提供即時回饋。

這表示 Next.js 只會更新您編輯的檔案中的程式碼，並且只會重新渲染該元件，而不會遺失元件狀態。這包括樣式（內嵌、CSS-in-JS 或 CSS/Sass 模組）、標記、事件處理常式和效果（透過 useEffect）。

今天，我們在每次編輯時都使其速度加快 200 毫秒，而且您無需變更任何程式碼。平均而言，這使得 Fast Refresh 速度加快了 3 倍。

想要更快的效能和更佳的建置時間嗎？立即使用新的 future 旗標選擇加入 Webpack 5。此旗標是候選版本 (RC)，而 Webpack 5 即將成為預設版本。啟用此旗標後，請與我們分享任何意見反應。

module.exports = {
  future: {
    webpack5: true,
  },
};

若要深入瞭解 Webpack 5 如何以回溯相容的方式部署到您的應用程式，請查看文件。

改善的安裝時間

我們已最佳化 Next.js 的依賴項目圖，以縮短安裝時間並減少依賴項目大小。現在，無論是在本機還是在 CI/CD 流程中，建立 Next.js 專案都比以往更快。

為了達成最佳化依賴項目的目標，我們也更新和/或取代了被作者標記為已棄用的 npm 套件，即使它們深層巢狀於依賴項目樹狀結構中。全新安裝 Next.js 10.1 現在將不會產生套件警告。

next/image 改善

Apple Silicon 支援

在 Next.js 10 發佈時，影像最佳化是由原生依賴項目所驅動。這導致安裝時間變慢，原生依賴項目佔用 Next.js 總安裝大小的 50%。此外，這也移除了安裝後執行指令碼並導致隨需編譯。

我們很高興分享透過 next/image 進行的自動影像最佳化現在由 WebAssembly 驅動。此最佳化可透過 next dev 和 next start 開箱即用。透過使用 WASM，我們已將安裝大小減少約 30MB，並新增對 Apple Silicon M1 MacBook 的支援。

我們透過利用 SIMD 擴充功能和多執行緒，持續改善 WebAssembly 效能。

其他版面配置

根據您的意見反應，我們為 next/image 新增了各種新的版面配置和選項

• layout=fill：您不需要提供 width 和 height。( 示範 )
• layout=fixed：原生 img 行為。( 示範 )
• layout=responsive：彈性寬度，具有固定的長寬比。( 示範 )
• layout=intrinsic：不會成長，但可以縮小，具有固定的長寬比。( 示範 )
• objectFit=cover：背景影像。( 示範 )

如需更多資訊，請查看 layout 文件。

改善的影像最佳化支援

我們擴展了 next/image 的內建影像載入器，能夠新增任何自訂載入器。透過使用新的 loader 屬性，您可以使用任何供應商或 CDN 最佳化影像。

import Image from 'next/image';
 
const myLoader = ({ src, width, quality }) => {
  return `https://example.com/${src}?w=${width}&q=${quality || 75}`;
};
 
const MyImage = (props) => {
  return (
    <Image
      loader={myLoader}
      src="/me.png"
      alt="Picture of the author"
      width={500}
      height={500}
    />
  );
};

如需更多資訊，請查看 next/image 文件。

Next.js Commerce Shopify 整合

電子商務是採用 Next.js 成長最快的產業之一。Apple、Wal-Mart、McDonald's 和 Nike 等公司都信任 Next.js。

我們希望為您提供一個高效能的起點，以建置電子商務應用程式，因此我們發佈了 Next.js Commerce。在收到數千個關於 Shopify 的要求後，我們已使用供應商不可知的 UI 更新 Next.js Commerce — 讓您能夠導入您選擇的任何無頭電子商務解決方案。

在供應商之間切換是組態中的單行變更。我們也建立了功能 API，讓您可以根據您的使用案例切換功能，同時保持最佳效能。

只需按幾下滑鼠，Next.js 開發人員即可複製、部署和完整自訂自己的電子商務商店。在 nextjs.org/commerce 瞭解更多資訊，並試用我們的 Shopify 示範。即將推出對更多商務供應商的支援。

自訂 500 頁面

您現在可以建立自訂 pages/500.js，以便在顯示錯誤時新增您自己的標誌和品牌。與 pages/404.js 類似，此檔案會在建置時靜態產生。

export default function Custom500() {
  return <h1>500 - Server-side error occurred</h1>;
}

嚴格的 PostCSS 設定載入

如果您使用 PostCSS 和 Webpack 5，您可以使用新的 future 旗標來改善效能（透過快取）。

module.exports = {
  future: {
    webpack5: true,
    strictPostcssConfiguration: true,
  },
};

立即試用並讓我們知道您的意見反應。如需更多資訊，請查看 PostCSS 設定文件。

在 tsconfig.json 中支援 extends

您現在可以在 Next.js 使用的 tsconfig.json 中使用 extends，以從專案中不同的 tsconfig.json 擴充。例如，您可以從專案中的 tsconfig.base.json 擴充，如下所示

{
  "extends": "./tsconfig.base.json"
}

如需更多資訊，請查看 TypeScript 文件。

偵測預覽模式何時啟用

您現在可以偵測預覽模式何時啟用，讓您可以僅為編輯器渲染特定元件。

import { useRouter } from 'next/router';
 
function MyComponent() {
  const { isPreview } = useRouter();
  return <>{isPreview ? <h1>Preview Mode Enabled</h1> : null}</>;
}

如需更多資訊，請查看 預覽模式文件。

路由器方法捲動至頂端

當使用 next/link 導覽時，Next.js 會自動捲動至頂端。在 Next.js 10.1 中，router.push 和 router.replace 也會自動捲動至頂端，以符合 next/link 行為。您可以使用 scroll 選項選擇停用自動捲動。

如需更多資訊，請查看 next/router 文件。

文件改善

我們也新增了各種新的指南、資源和文件，包括

• 漸進式採用 Next.js
• 從 Gatsby 遷移
• 從 Create React App 遷移
• 從 React Router 遷移
• 驗證
• 使用 Docker 部署

社群

我們很高興看到 Next.js 的採用持續成長

• 自 10.0 版本發佈以來，我們有超過 1,540 位獨立貢獻者，其中有超過 240 位新貢獻者
• 在 GitHub 上，此專案已獲得超過 64,950 次星號。

加入 GitHub Discussions 上的 Next.js 社群。Discussions 是一個社群空間，可讓您與其他 Next.js 使用者建立聯繫，並自由提問或分享您的作品。您也可以加入官方 Next.js Discord。

鳴謝

我們感謝我們的社群，包括所有協助塑造此版本的外部意見反應和貢獻。

本次發布由以下貢獻者促成：@shuding, @edazpotato, @laithyounes, @ijjk, @harshitsan, @selrond, @sromexs, @melono6, @timneutkens, @madou, @mottox2, @leerob, @divmain, @nblthree, @KennethKinLum, @KarthikeyanRanasthala, @alex-safian, @rishabhpoddar, @daviavmello, @jpalmieri, @merceyz, @Segolene-Alquier, @michrome, @janicklas-ralph, @Parnswir, @giraffesyo, @balazsorban44, @Cicada95, @vzaidman, @deniseyu, @eltociear, @unimprobable, @getspooky, @Timer, @armand1m, @alexknipfer, @elitan, @atcastle, @noahfschr, @amille44420, @laanayam333, @spidgorny, @devuxer, @Janpot, @nickbabcock, @rsipakov, @NkxxkN, @dominicfraser, @alevosia, @Kerumen, @CMeeg, @Pomaio, @tim-hanssen, @lachlanjc, @lebreRafael, @AryanBeezadhur, @guybedford, @petecorreia, @kaznak, @sam3d, @fwuensche, @rafaellaurindo, @sphilee, @styxlab, @rexxars, @smitbarmase, @maerzhase, @matamatanot, @lucleray, @jeremybalog, @tarunama, @zainfathoni, @destumme, @VictorAssis, @bhbs, @ciruz, @simnalamburt, @Almad, @frol, @ludofischer, @elliottsj, @Baheya, @Lalit2005, @vldmrkl, @AriFreyr, @kaykdm, @Sharcoux, @ramasilveyra, @devknoll, @botv, @pkellner, @sumanthratna, @sokra, @lfades, @thorwebdev, @berndartmueller, @davidspiessens, @ShashiSrinath, @elsigh, @MMT-LD, @hankandre, @maxnowack, @kmjennison, @darshkpatel, @mohsen1, @DylanRJohnston, @calmonr, @imrobinized, @justintemps, @ncarchedi, @btk, @faizanv, @chulkilee, @ryan-lustre, @dfelber, @Ymirke, @Robogeek95, @mcha-dev, @youngvform, @andrehsu, @Simply007, @rokobekavac0, @ja0n, @mattruby, @xom9ikk, @niko20, @LauraBeatris, @armspkt, @xiaooye, @sungpro, @awareness481, @joebernard, @jensmeindertsma, @donavon, @DaneTheory, @Zertz, @danielyefet, @lfender6445, @tajo, @jorrit, @tvler, @mustafaKamal-fe, @prateekbh, @gregrickaby, @enochndika, @zimv, @lharries, @JstnEdr, @zbialecki, @fredmontet, @leo, @kachkaev, @mongolyy, @justinphilpott, @mjr, @fireairforce, @jvarho, @gr-qft, @thomaswang, @c316, @benbender, @michael, @damusnet, @farhankk360, @smaktacular, @webda2l, @chibicode, @bar7b, @SiTaggart, @lolobosse, @jamesgeorge007, @nikosantis, @mikan3rd, @oshdev, @UnbearableBear, @tunesmith, @jamsinclair, @ivandotv, @Arthie, @louison, @FutureKode, @wesleytian, @dennismorello, @vispaduchuri, @styfle, @caulagi, @berekuk, @jescalan, @cascandaliato, @coetry, @PepijnSenders, @dkempner, @dlackty, @aralroca, @felixmeziere, @bmvantunes, @hideokamoto, @bram-l, @craigdanj, @ErikAugust, @joiglifberg, @blvdmitry, @bragle, @ykdojo, @vitorhsb, @TrySound, @mattfwood, @ka2jun8, @rfinkley, @bannier, @karlhorky, @shihabus, @yakovlevyuri, @dav-is, @lundgren2, @NoobTW, @Cow258, @toshi1127, @jorisw, @rifaidev, @willianjusten, @willheslam, @alexvilchis, @vitordino, @matthewlilley, @Prottoy2938, @brunocrosier, @OriginalEXE, @sidthesloth92, @davidsonsns, @saitolume, @tolfino, @iczero, @WestonThayer, @galanggg, @davidgolden, @weichienhung, @ashconnell, @callumbooth, @lyderichti59, @lukyth, @FredyC, @danielstocks, @valse, @MrJmpl3, @Sm1t, @lucas-varela, @jose-donato, @chr-ge, @pocorschi, @jflayhart, @aried3r, @LittleboyHarry, @Akumzy, @xeust, @tonyspiro, @yordis, @AmrSaber, @Mzaien, @PaulPCIO, @quinnturner, @SebastianTroc, @JipSterk, @developit, @yokinist, @queq1890, @oriverk, @ospira, @danielivert, @huv1k, @minhtule, @shunkakinoki, @khades, @eric-burel, @turadg, @huozhi, and @scottmacdonnell！