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?
- 🚀 Learn how to get started
- 🔌 Checkout @stylify/unplugin configuration
- ⚙️ Or configure Stylify right away: