Next.js 5.1：更快速的頁面解析、環境配置及更多功能

我們很高興推出 Next.js 5.1，它支援環境配置、階段、原始碼地圖和新的 Next.js 外掛程式。

導入了重大的效能改進：頁面解析速度提升了 102 倍，並且錯誤頁面的載入效率更高。

若要升級或安裝，請執行

npm i next@latest react@latest react-dom@latest

除了升級 Next.js 之外，我們還升級了對等相依性 react 和 react-dom

請務必同時升級 next-plugins，例如 @zeit/next-css、@zeit/next-sass、@zeit/next-less 或 @zeit/next-typescript。

更快速的頁面解析

由於 Next.js 5.0 的架構變更，我們得以簡化邏輯，該邏輯根據 URL 路徑解析頁面。這些變更是基於 研究，該研究來自 @oliviertassinari。先前解析頁面平均耗時 2.347 毫秒。使用新的邏輯解析同一個頁面平均耗時 0.023 毫秒。這對於 Next.js 應用程式中最常調用的方法之一來說，速度提升了 102 倍。

環境配置

典型的 Node.js 環境通常依賴於將環境變數傳遞給應用程式，例如：API_URL=https://api.vercel.com node index.js，然後您可以在應用程式的任何位置使用 process.env.API_URL。

使用通用渲染時，用戶端無法使用 process.env。因此，在 Next 5.1 中，我們引入了一個新功能：publicRuntimeConfig 和 serverRuntimeConfig。這些可以在 next.config.js 中設定，然後可以使用 next/config 模組來存取。

module.exports = {
  serverRuntimeConfig: {
    // Will only be available on the server side
    mySecret: 'secret',
  },
  publicRuntimeConfig: {
    // Will be available on both server and client
    staticFolder: '/static',
  },
};

serverRuntimeConfig 和 publicRuntimeConfig 都在 next.config.js 中定義

import getConfig from 'next/config';
const { serverRuntimeConfig, publicRuntimeConfig } = getConfig();
 
console.log(serverRuntimeConfig.mySecret); // Will only be available on the server side
console.log(publicRuntimeConfig.staticFolder); // Will be available on both server and client
 
export default function Index() {
  return (
    <div>
      <img src={`${publicRuntimeConfig.staticFolder}/logo.png`} />
    </div>
  );
}

next/config 模組中的 getConfig 方法用於取得配置值

改進的錯誤處理

先前，Next.js 具有特殊的錯誤處理機制，用於偵測載入頁面 bundle 時的伺服器錯誤。頁面 bundle 是在用戶端載入以載入頁面的 javascript 檔案，例如 /_next/-/page/index.js。

如果發生錯誤（例如建置 ID 不符），頁面 bundle 仍將以 200 HTTP 狀態提供，但內容將是 Next.js 伺服器產生的錯誤的 JSON 表示形式。這樣做的原因是，用戶端錯誤處理不僅依賴於頁面為 404 狀態。此解決方案效果很好，直到您嘗試將資產上傳到不支援 fallback 的靜態檔案主機或 CDN。

在 Next.js 5.1 中，我們完全重構了錯誤處理邏輯，當頁面 bundle 返回 404 HTTP 狀態時，路由器將自動偵測到它並重新載入頁面，以確保 多區域 之間的導航成為可能。

在重寫此邏輯時，我們移除了 Router.onAppUpdated hook；它主要用於觸發頁面重新載入。現在頁面將自動重新載入

除此之外，我們還在開發模式中新增了一組新的 整合測試，以避免未來版本中錯誤恢復出現回歸問題。

階段 / 配置函數

某些 next-plugins，例如 @zeit/next-css，僅在 Next.js 處於開發模式或執行 next build 時才需要。

您現在可以導出一個返回配置物件的函數，而不是立即導出物件。

module.exports = (phase, { defaultConfig }) => config;

next.config.js 導出一個返回用戶配置的函數

導出函數將使您可以存取 Next.js 正在運行的 phase，例如開發、生產、建置、導出。這允許僅在需要時載入外掛程式，並且還可以存取預設配置。

我們引入了一個名為 next/constants 的新模組，其中包含常用的常數，包括階段。

const {PHASE_DEVELOPMENT_SERVER} = require('next/constants')
module.exports = (phase, {defaultConfig}){
  if(phase === PHASE_DEVELOPMENT_SERVER) {
    return { /* development only config options here */ }
  }
 
  return { /* config options for all phases except development here */ }
}

檢查開發階段的 next.config.js

改進的生產原始碼地圖生成

隨著 Next.js 5 中通用 webpack 的引入，將原始碼地圖新增到您的生產環境變得非常簡單，只需在 next.config.js 中新增幾行程式碼即可

module.exports = {
  webpack(config, { dev }) {
    if (!dev) {
      config.devtool = 'source-map';
      for (const plugin of config.plugins) {
        if (plugin['constructor']['name'] === 'UglifyJsPlugin') {
          plugin.options.sourceMap = true;
          break;
        }
      }
    }
    return config;
  },
};

在 next.config.js 中手動啟用原始碼地圖

可以將 @zeit/next-source-maps 新增到專案中，以自動為您啟用生產原始碼地圖，將以下內容新增到 next.config.js

const withSourceMaps = require('@zeit/next-source-maps');
module.exports = withSourceMaps();

使用 @zeit/next-source-maps 在 next.config.js 中啟用原始碼地圖

這啟用了除一個檔案 app.js 之外的所有檔案的原始碼地圖輸出，原因是 app.js 由多個檔案（manifest.js 和 commons.js）與 webpack 外掛程式組合而成。這樣做的副作用是 webpack 無法為組合檔案生成原始碼地圖。

感謝來自 pull request，該 pull request 來自 @ptomasroos，app.js 檔案已替換為 main.js。此檔案將保存先前編譯為 manifest.js 和 commons.js 的程式碼，並且 webpack 將為 main.js 生成原始碼地圖。原始碼地圖將自動提供，允許外部錯誤追蹤工具在偵測到錯誤時顯示實際的檔案和行號。

新的外掛程式 / 現有外掛程式的改進

我們推出了兩個新的官方外掛程式。@zeit/next-bundle-analyzer 允許輕鬆設定 webpack-bundle-analyzer 以分別分析伺服器端和用戶端 bundle。

此外，官方的 css、less 和 sass 外掛程式在熱重新載入和 bundle 方面進行了許多改進。例如，在開發模式下不再會出現樣式未套用的內容閃爍。並且子元件中的樣式也會被識別出來。

社群

您現在可以在 GitHub 上找到 Next.js 社群。最近在那裡發布了 使用 Next.js 的知名公司列表。歡迎在該討論串中發布專案。

感謝您

我們要感謝所有為此版本 Next.js 做出貢獻的每個人。無論是為核心做出貢獻，還是擴展和改進我們不斷增長的 範例目錄。

如果您想開始為 Next.js 做出貢獻，您可以找到標有 good first issue 或 help wanted 標籤的問題。

特別感謝 Trulia 對於環境配置和新的錯誤頁面處理提供的寶貴意見回饋。