Next.js
A simple guide to setup Atomizer with Next.js.
Create a new project
If you do not have a project setup already, you can create a new one using the Create Next App CLI.
npx create-next-app my-app
cd my-app
Install the plugin
For a Next.js project, the postcss-atomizer
library makes it easy to setup Atomizer. Install the dependency first.
npm i postcss-atomizer -D
Create your Atomizer config
Create an atomizer.config.js
config file so that Atomizer can parse your JS and JSX files.
module.exports = {
content: [
'./components/**/*.{js,ts,jsx,tsx}',
'./pages/**/*.{js,ts,jsx,tsx}',
],
}
Create the postcss config file
In order to add the PostCSS plugin, you must create a postcss.config.js
file at your project root. Be sure to follow the Customizing Plugins guide from Next.js as it requires additional steps to add non-Next.js plugins.
After following their guide, you will add the Atomizer PostCSS plugin like so.
module.exports = {
plugins: {
'postcss-atomizer': {},
// ...
},
}
Plugin options are available in the postcss-atomizer README.
Start your build process
Run your build setup as configured in your project’s package.json
.
npm run dev
Begin using Atomizer
Update the pages/index.js
file to start adding Atomizer classes to your code base.
export default function Home() {
return (
<h1 className="Fw(b) Fz(2rem)">Welcome!</h1>
)
}