next-purgecss

Next.js + Purgecss = 🔥

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

Purgecss helps you remove unused CSS.

Installation

1. Install the packages

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 install @zeit/next-css next-purgecss --dev

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

2. Add the style to your application

next-css compiles your stylesheet to .next/static/style.css and make it available on the server at /_next/static/style.css, so you need to include it in your page.

Add a link tag to your pages/_document.js :

// ./pages/_document.js
import Document, { Head, Main, NextScript } from 'next/document'

export default class MyDocument extends Document {
  render() {
    return (
      <html>
        <Head>
          <link rel="stylesheet" href="/_next/static/style.css" />
        </Head>
        <body>
          <Main />
          <NextScript />
        </body>
      </html>
    )
  }
}

More information : next-css.

3. Edit `next.config.js`.

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

module.exports = withCss(withPurgeCss())

Options

By default, this plugin will scan components and pages directories for classnames.

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.