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}',

        // Or if using `src` directory:
        './src/**/*.{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: [
        // mandatory next.js plugins ...
        'postcss-atomizer',
    ],
}

Plugin options are available in the postcss-atomizer README.

Begin using Atomizer

Update the ./src/app/page.js file to start adding Atomizer classes to your code base.

export default function Home() {
    return (
        <h1 className="Fw(b) Fz(2rem)">Welcome!</h1>
    )
}

Start your build process

Run your build setup as configured in your project’s package.json.

npm run dev