Next.js 10.2

我們很高興推出 Next.js 10.2，主要功能包括：

• 更快的建置速度：透過快取，後續建置速度提升最高達 60%。
• 更快的重新整理速度：重新整理速度提升 100 毫秒到 200 毫秒。
• 更快的啟動效能：next dev 速度提升最高達 24%。
• 提升的無障礙功能：螢幕閱讀器現在會播報路由變更。
• 更彈性的重新導向和重寫規則：可比對任何標頭、Cookie 或查詢字串。
• 自動網頁字體優化：透過內嵌字體 CSS 提升效能。

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

Webpack 5

在 Next.js 10.1 中，我們改進了快速重新整理 (Fast Refresh)並縮短了安裝時間。我們很高興分享透過 webpack 5 實現的更多效能提升。

今天，我們將 webpack 5 的應用範圍擴展到 Next.js 應用程式。從 Next.js 10.2 開始，所有在 next.config.js 中未使用自訂 webpack 設定的應用程式將自動使用 webpack 5。

啟用 webpack 5 後，您將自動獲得新的功能和改進，例如：

• 改進的磁碟快取：磁碟快取允許編譯器在 next build 執行之間保存工作成果。只有變更的檔案才會重新編譯，從而提高效能。Vercel 客戶 Scale 觀察到後續建置速度提升了 63%。
• 改進的快速重新整理：Next.js 現在優先處理與快速重新整理相關的編譯，每次重新整理速度提升 100 毫秒到 200 毫秒。
• 改進的資源長期快取：多次 next build 執行之間的輸出現在是確定的，從而改善了生產環境中 JavaScript 資源的瀏覽器快取。當頁面內容不變時，雜湊值保持不變。
• 改進的程式碼刪除 (Tree Shaking)：CommonJS 模組現在可以進行程式碼刪除 (Tree Shaking)來自動移除未使用的程式碼。靜態分析用於確定無副作用的模組。export * 追蹤更多資訊，不再將預設匯出標記為已使用。模組內程式碼刪除也已啟用，允許刪除僅在未使用匯出中使用的匯入。

我們努力確保從 webpack 4 到 5 的順利過渡。Next.js 核心測試套件包含超過 3,400 個整合測試，在每次提取請求 (Pull Request) 時都會啟用 webpack 5 支援並執行。

如果您的應用程式使用自訂的 webpack 設定，我們建議您按照文件說明啟用 webpack 5。在 Next.js 中升級到 webpack 5 後，請與我們分享任何意見回饋。

提升啟動效能

我們改進了 Next.js CLI 的初始化，讓 next dev 在第一次執行後的啟動速度提升了高達 24%。例如，vercel.com 的 next dev 啟動時間從 3.3 秒縮短到 2.5 秒。

我們的目標是讓您的本地開發體驗達到即時（速度提升 20 倍）。敬請期待後續版本中更多啟動效能的提升。

無障礙功能改進

現在，路由變更會預設播報給螢幕閱讀器和其他輔助技術。

以下範例顯示在客戶端導覽時，macOS VoiceOver 會播報標題「Real Data. Real Performance」。頁面名稱的尋找方式是先尋找 <h1> 元素，如果找不到，則使用 document.title，最後使用路徑名稱。

感謝 Kyle Boss 和 Kitty Giraudel 協助完成此功能。

基於標頭和查詢字串參數的路由

Next.js 的 重寫(rewrites)、重新導向(redirects) 和 標頭(headers) 現在支援新的 has 屬性，允許您比對傳入的標頭、Cookie 和查詢字串。

Vercel 的客戶 Joyn 使用 has 來優化內容的可發現性和效能。例如，您可以根據 使用者代理(User-Agent) 將舊版瀏覽器重新導向

module.exports = {
  async redirects() {
    return [
      {
        source: '/:path((?!old-browser$).*)',
        has: [
          {
            type: 'header',
            key: 'User-Agent',
            value:
              'Mozilla/5.0 (compatible; MSIE 10.0; Windows Phone 8.0; Trident/6.0; IEMobile/10.0; ARM; Touch; Microsoft; Lumia 950)',
          },
        ],
        destination: '/old-browser',
        permanent: false,
      },
    ];
  },
};

另一個例子是根據使用者所在位置重新導向

module.exports = {
  async redirects() {
    return [
      {
        source: '/:path((?!uk/).*)',
        has: [
          {
            type: 'header',
            key: 'x-vercel-ip-country',
            value: 'GB',
          },
        ],
        destination: '/uk/:path*',
        permanent: true,
      },
    ];
  },
};

最後，如果使用者已經登入，您可以重新導向他們

module.exports = {
  async redirects() {
    return [
      {
        source: '/',
        has: [
          {
            type: 'header',
            key: 'x-authorized',
            value: '(?<authorized>yes|true)',
          },
        ],
        destination: '/dashboard?authorized=:authorized',
        permanent: false,
      },
    ];
  },
};

要了解更多資訊並探索更多範例，請查看重新導向說明文件。

自動網頁字型優化

82% 的桌面網頁 都使用網頁字型。自訂字型對於您網站的品牌、設計和跨瀏覽器/裝置的一致性至關重要。然而，使用網頁字型不應以犧牲效能為代價。

Next.js 現在在使用網頁字型時支援自動網頁字型優化。預設情況下，Next.js 會在建置時自動將字型 CSS 內嵌，省去額外的往返行程來擷取字型宣告。這會改善「首次內容繪製」(FCP) 和「最大內容繪製」(LCP)。例如：

// Before
<link href="https://fonts.googleapis.com/css2?family=Inter" rel="stylesheet" />
 
// After
<style data-href="https://fonts.googleapis.com/css2?family=Inter">
  @font-face {
    font-family: 'Inter';
    font-style: normal;
    <!-- ... -->
  }
</style>

自動網頁字型優化目前支援 Google Fonts，我們正努力將支援範圍擴展到其他字型供應商。我們也計劃增加對 載入策略 和 font-display 值的控制。透過預設優化字型，我們可以幫助開發人員發佈更快的網站並改善其 核心網頁指標，而無需任何額外的工作。

感謝我們的合作夥伴 Google 和 Janicklas Ralph 協助我們推出這項功能。

團隊擴編

我們很高興地宣布，webpack 的作者 Tobias Koppers 已加入 Vercel 的 Next.js 團隊。

社群

我們非常感謝我們的社群，包括所有幫助我們塑造此版本發行的外部回饋和貢獻。

此版本由以下人士貢獻：@rpxs、@lemarier、@RayhanADev、@janicklas-ralph、@devknoll、@felipeptcho、@rishabhpoddar、@sokra、@m-leon、@turadg、@PierreBerger、@divmain、@dominikwilkowski、@pranavp10、@ijjk、@santidalmasso、@HaNdTriX、@jamesgeorge007、@garmeeh、@leerob、@shuding、@feute、@timneutkens、@alexvilchis、@Timer、@malixsys、@sahilrajput03、@marcvangend、@steven-tey、@julienben、@umarsenpai、@Mzaien、@merceyz、@AntelaBrais、@SystemDisc、@M1ck0、@jbmoelker、@jaisharx、@amannn、@vkarpov15、@gaelhameon、@4ortytwo、@Simply007、@styxlab、@xCloudzx、@wodCZ、@emmanuelgautier、@leosuncin、@ludder、@geritol、@vassbence、@vvo、@portenez、@arshad、@tarunama、@flybayer、@Hanaffi、@SokratisVidros、@chibicode、@kylemarshall18 和 @jarrodwatts。