自訂 Webpack 設定

須知事項：webpack 設定的變更不受 semver 規範保障，請自行承擔風險

在繼續為您的應用程式新增自訂 webpack 設定之前，請先確認 Next.js 是否已支援您的使用情境：

一些常見需求可透過外掛程式實現：

若要擴展我們對 webpack 的使用，您可以在 next.config.js 中定義一個擴充其設定的函式，如下所示：

next.config.js

module.exports = {
  webpack: (
    config,
    { buildId, dev, isServer, defaultLoaders, nextRuntime, webpack }
  ) => {
    // 重要：回傳修改後的設定
    return config
  },
}

webpack 函式會執行三次，兩次用於伺服器端 (nodejs / edge runtime)，一次用於客戶端。這讓您可以透過 isServer 屬性區分客戶端與伺服器端設定。

webpack 函式的第二個參數是一個包含以下屬性的物件：

buildId: String - 建置 ID，作為建置之間的唯一識別符。
dev: Boolean - 表示是否在開發環境中進行編譯。
isServer: Boolean - 伺服器端編譯時為 true，客戶端編譯時為 false。
nextRuntime: String | undefined - 伺服器端編譯的目標執行環境；可能是 "edge" 或 "nodejs"，客戶端編譯時為 undefined。
defaultLoaders: Object - Next.js 內部使用的預設載入器：
- babel: Object - 預設的 babel-loader 設定。

使用 defaultLoaders.babel 的範例：

// 新增依賴於 babel-loader 的載入器設定範例
// 此原始碼取自 @next/mdx 外掛程式原始碼：
// https://github.com/vercel/next.js/tree/canary/packages/next-mdx
module.exports = {
  webpack: (config, options) => {
    config.module.rules.push({
      test: /\.mdx/,
      use: [
        options.defaultLoaders.babel,
        {
          loader: '@mdx-js/loader',
          options: pluginOptions.options,
        },
      ],
    })

    return config
  },
}

`nextRuntime`

請注意，當 nextRuntime 為 "edge" 或 "nodejs" 時，isServer 會是 true。目前 nextRuntime "edge" 僅用於中介軟體和邊緣執行環境中的伺服器元件。

nextRuntime

On this page

`nextRuntime`