Next.js

Next.js est un framework React pour des applications de qualité professionnelle qui passent à l'échelle. Les entreprises leaders mondiales utilisent Next.js pour construire des applications rendues côté serveur, des sites web statiques, et plus encore.

Vous pouvez utiliser PurgeCSS avec Next.js en utilisant le plugin PostCSS dans la configuration Next.js.

Personnaliser la configuration PostCSS (Next.js >= 9.3)

Pour personnaliser la configuration PostCSS, créez un fichier postcss.config.js à la racine de votre projet.

Attention : Lorsque vous définissez un fichier de configuration PostCSS personnalisé, Next.js désactive complètement le comportement par défaut. Assurez-vous de configurer manuellement toutes les fonctionnalités dont vous avez besoin, y compris Autoprefixer. Vous devez également installer manuellement tous les plugins inclus dans votre configuration personnalisée, c'est-à-dire npm install postcss-flexbugs-fixes postcss-preset-env.

Par défaut, le document externe contenant html et body se trouve dans le module node de Next.js. Ajoutez safelist:["html", "body"] pour vous assurer que PurgeCSS ne supprime pas ces styles.

Ajoutez PurgeCSS à la configuration par défaut :

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"]
      }
    ],
  ]
}

Plugin Next.js (Next.js < 9.3)

Installation

next-purgecss nécessite l'un des plugins css next suivants :

• next-css
• next-less
• next-sass

Choisissez simplement celui qui correspond à vos besoins. Dans les étapes suivantes, j'utiliserai next-css mais cela fonctionne de la même manière pour les autres plugins css next.

Par exemple, installez next-css et next-purgecss :

:::: code-group ::: code-group-item NPM

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

::: ::: code-group-item YARN

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

::: ::::

Une fois les packages installés, vous devez modifier next.config.js.

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

module.exports = withCss(withPurgeCss());

Options

purgeCssEnabled

Par défaut, next-purgecss supprimera toujours le CSS inutilisé, quel que soit l'environnement de build. Vous pouvez changer cela en définissant une fonction pour l'option purgeCssEnabled. La fonction purgeCssEnabled reçoit deux arguments :

// next.config.js
module.exports = withCss(
  withPurgeCss({
    purgeCssEnabled: ({ dev, isServer }) => !dev && !isServer, // Activer PurgeCSS uniquement pour les builds de production côté client
  })
);

purgeCssPaths

Par défaut, ce plugin analysera les répertoires components et pages pour les noms de classes. Vous pouvez changer cela en définissant purgeCssPaths.

// next.config.js
module.exports = withCss(
  withPurgeCss({
    purgeCssPaths: [
      "pages/**/*",
      "components/**/*",
      "other-components/**/*", // analyser également le dossier other-components
    ],
  })
);

purgeCss

Vous pouvez passer des options personnalisées à PurgeCSS en définissant l'objet purgeCss dans votre next.config.js.

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

La liste des options disponibles est documentée dans la documentation de purgecss-webpack-plugin.