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ノードモジュール内にあります。PurgeCSSがこれらのスタイルを削除しないようにするには、`safelist:["html", "body"]`を追加します。

デフォルト設定に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`関数は2つの引数を受け取ります。

引数	型	説明
`dev`	`ブール値`	開発モード（`next`実行時）では`true`、本番モード（`next start`実行時）では`false`。
`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`