Show docs navigation

Next.js integration

Stylify can be easily integrated into the Next.js using @stylify/unplugin.

Edit on StackBlitz
Integration example for the Next.js can be found in integrations examples repository .

How to integrate the Stylify into the Next.js

First install the @stylify/bundler package using NPM or Yarn:

npm i -D @stylify/unplugin
yarn add -D @stylify/unplugin

Next add a configuration into the next.config.js:

const { webpackPlugin } = require('@stylify/unplugin');

const stylifyPlugin = (dev) => webpackPlugin({
    dev: dev,
    transformIncludeFilter: (id) => id.endsWith('js'),
    bundles: [{
        outputFile: './styles/stylify.css',
        files: ['./pages/**/*.js'],
    }],
    extend: {
        bundler: {
            compiler: {
                selectorsAreas: [
                    '(?:^|\\s+)className="([^"]+)"',
                    '(?:^|\\s+)className=\'([^\']+)\'',
                    '(?:^|\\s+)className=\\{`((?:.|\n)+)`\\}'
                ]
            }
        }
    }
});

module.exports = {
  reactStrictMode: true,
  webpack: (config, { dev }) => {
    config.plugins.push(stylifyPlugin(dev));
    return config;
  }
}

And the last step is to add the stylify.css into the _app.js:

import '../styles/globals.css';
import '../styles/stylify.css';

function MyApp({ Component, pageProps }) {
  return <Component {...pageProps} />
}

export default MyApp;

Now you can use the Next.js commands to build your assets. In production, it will mangle selectors.

Where to go next?

Edit this page on Github