Next.js + Purgecss = ๐ฅ
Next.js makes it easy to create SSR and static React applications.
Purgecss helps you remove unused CSS.
๐ Check out the examples folder to see examples for your specific setup.
next-purgecss
requires one of the following css next plugins :
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
// next.config.js
const withCss = require('@zeit/next-css')
const withPurgeCss = require('next-purgecss')
module.exports = withCss(withPurgeCss())
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
})
)
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
]
})
)
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 overwritepurgeCssPaths