next-purgecss

Next.js + Purgecss = 🔥

Next.js makes it easy to create SSR and static React applications.

Purgecss helps you remove unused CSS.

Installation

🏎 Check out the examples folder to see examples for your specific setup.

1. Install the packages

next-purgecss requires one of the following css next plugins :

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

Just pick the one that fits your needs. In the following steps, I will use next-css but it works the same for the other css next plugins.

For example, install next-css and next-purgecss :

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

or with npm :

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

2. Edit next.config.js.

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

module.exports = withCss(withPurgeCss())

Options

purgeCssEnabled

By default, next-purgecss will always remove unused CSS, regardless of build environment. You can change that by defining a function for the purgeCssEnabled option. The purgeCssEnabled function receives two arguments:

| Argument | Type | Description | | --- | --- | --- | | dev | Boolean | true in development mode (running next) or false in production mode (running next start) | | isServer | Boolean | true during server side compilation or false during client side compilation |

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

purgeCssPaths

By default, this plugin will scan components and pages directories for classnames. You can change that by defining purgeCssPaths.

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

purgeCss

You can pass custom options to Purgecss by defining purgeCss object in your next.config.js.

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

The list of available options are documented in purgecss-webpack-plugin docs.

⚠️ purgeCss.paths will overwrite purgeCssPaths