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.

$3

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
`

$3

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

module.exports = withCss(withPurgeCss())
`

Options

$3

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 |

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

$3

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

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

$3

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

`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`