Using Stylify CSS in Next.js

Next.js offers you to create production grade React applications that scale.

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

Try it on StackBlitz

How to integrate the Stylify CSS 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 { stylifyWebpack } = require('@stylify/unplugin');

const stylifyPlugin = (dev) => stylifyWebpack({
	dev: dev,
	bundles: [{ outputFile: './styles/stylify.css', files: ['./pages/**/*.js'] }],
	// Optional
	// Compiler config info https://stylifycss.com/en/docs/stylify/compiler#configuration
	compiler: {
		// https://stylifycss.com/en/docs/stylify/compiler#variables
		variables: {},
		// https://stylifycss.com/en/docs/stylify/compiler#macros
		macros: {},
		// https://stylifycss.com/en/docs/stylify/compiler#components
		components: {},
		// ...
	}
});

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.