INSTALLATION · NEXT.JS

Using Next.js

Connect Coordiation to the PostCSS pipeline already used by Next.js, scan your application source, and import one global stylesheet from the root layout.

✓

Use @coordiation/postcss rather than the Vite adapter. The same setup works with Turbopack and production builds because Next.js owns the PostCSS runner.

Install the compiler and adapter

Install the core compiler, PostCSS 8, and the official Coordiation PostCSS adapter.

Terminal

npm install -D postcss @coordiation/css @coordiation/postcss

Configure PostCSS

Scan the directories that contain literal co-* classes. If your project uses a src directory, replace the content list with ["src"].

postcss.config.mjs

export default {
  plugins: {
    "@coordiation/postcss": {
      content: ["app", "components"],
      cwd: process.cwd(),
      toolchain: {
        minify: process.env.NODE_ENV === "production"
      }
    }
  }
};

Create the CSS entry

The top-level marker is replaced with the generated preflight, tokens, variants, and utilities found in your source files.

app/globals.css

@coordiation;

@co-theme {
  --co-color-brand-500: oklch(62.3% 0.214 259.815);
}

Import it once

Load the global stylesheet from the root layout. Pages Router projects should import it from pages/_app.tsx instead.

app/layout.tsx

import "./globals.css";

export default function RootLayout({ children }) {
  return (
    <html lang="en">
      <body>{children}</body>
    </html>
  );
}

Use literal utilities

Keep every candidate complete so server rendering, client components, the scanner, and AI tooling all observe the same class contract.

app/page.tsx

export default function Page() {
  return (
    <main className="co-grid co-min-h-screen co-place-items-center co-bg-black co-text-white">
      <h1 className="co-text-6xl co-font-bold">Built with Coordiation</h1>
    </main>
  );
}

Terminal

npm run dev
npm run build

PRODUCTION CHECKLIST

Ship predictable CSS

Keep the scanner boundary and generated stylesheet explicit so people, CI, and AI agents produce the same result.

Open Next.js CSS documentation →

Use content: ["src"] when both app and components live under src.
Import the global CSS only once from the root layout or pages/_app.
Do not add a second nesting, prefixing, or minification plugin unless that Coordiation toolchain stage is disabled.
Map conditional styles to complete literal class strings; do not concatenate co- candidates.

Previous← Using React NextUsing Astro →