Next.js

Next.js 是 React 框架，用於製作可擴充的生產級應用程式。全球領先的公司使用 Next.js 來建置伺服器端渲染應用程式、靜態網站等。

你可以使用 Next.js 組態中的 postCSS 外掛，將 PurgeCSS 與 Next.js 搭配使用

自訂 PostCSS 組態 (Next.js >= 9.3)

若要自訂 PostCSS 組態，請在專案根目錄建立 postcss.config.js 檔案。

警告：當你定義自訂 PostCSS 組態檔案時，Next.js 會完全停用預設行為。請務必手動組態所有你需要的編譯功能，包括 Autoprefixer在新視窗開啟。你也需要手動安裝自訂組態中包含的任何外掛程式，例如 npm install postcss-flexbugs-fixes postcss-preset-env。

預設情況下，包含 html 和 body 的外部文件位於 nextjs 節點模組中。加入 safelist:["html", "body"] 以確保 PurgeCSS 不會移除那些樣式。

將 PurgeCSS 加入預設組態

module.exports = {
  "plugins": [
    "postcss-flexbugs-fixes",
    [
      "postcss-preset-env",
      {
        "autoprefixer": {
          "flexbox": "no-2009"
        },
        "stage": 3,
        "features": {
          "custom-properties": false
        }
      }
    ],
    [
      '@fullhuman/postcss-purgecss',
      {
        content: [
            './pages/**/*.{js,jsx,ts,tsx}',
            './components/**/*.{js,jsx,ts,tsx}'
        ],
        defaultExtractor: content => content.match(/[\w-/:]+(?<!:)/g) || [],
        safelist: ["html", "body"]
      }
    ],
  ]
}

Next.js 外掛程式 (Next.js < 9.3)

安裝

next-purgecss 需要以下其中一個 css next 外掛程式

只要選擇一個符合你需求的即可。在以下步驟中，我將使用 next-css，但它對其他 css next 外掛程式 來說也一樣。

例如，安裝 next-css 和 next-purgecss

npm install @zeit/next-css next-purgecss --save-dev

yarn add @zeit/next-css next-purgecss --dev

安裝完套件後，你需要編輯 next.config.js。

// next.config.js
const withCss = require("@zeit/next-css");
const withPurgeCss = require("next-purgecss");

module.exports = withCss(withPurgeCss());

選項

`purgeCssEnabled`

預設情況下，next-purgecss 會移除所有未使用的 CSS，不論建置環境為何。你可以透過定義 purgeCssEnabled 選項的函數來變更此設定。purgeCssEnabled 函數會收到兩個參數

參數	類型	說明
`dev`	`布林值`	在開發模式下為 `true`（執行 `next`）或在生產模式下為 `false`（執行 `next start`）
`isServer`	`布林值`	在伺服器端編譯期間為 `true` 或在用戶端編譯期間為 `false`

// next.config.js
module.exports = withCss(
  withPurgeCss({
    purgeCssEnabled: ({ dev, isServer }) => !dev && !isServer, // Only enable PurgeCSS for client-side production builds
  })
);

`purgeCssPaths`

預設情況下，此外掛程式會掃描 components 和 pages 目錄以取得類別名稱。你可以透過定義 purgeCssPaths 來變更此設定。

// next.config.js
module.exports = withCss(
  withPurgeCss({
    purgeCssPaths: [
      "pages/**/*",
      "components/**/*",
      "other-components/**/*", // also scan other-components folder
    ],
  })
);

`purgeCss`

你可以透過在 next.config.js 中定義 purgeCss 物件，將自訂選項傳遞給 PurgeCSS在新視窗中開啟。

// next.config.js
module.exports = withCss(
  withPurgeCss({
    purgeCss: {
      whitelist: () => ["my-custom-class"],
    },
  })
);

可用選項清單記載於 purgecss-webpack-plugin 文件在新視窗中開啟中。

警告

purgeCss.paths 會覆寫 purgeCssPaths

# Next.js

# 自訂 PostCSS 組態 (Next.js >= 9.3)

# Next.js 外掛程式 (Next.js < 9.3)

# 安裝

# 選項

# purgeCssEnabled

# purgeCssPaths

# purgeCss