Integrating Jux with Next.js
This guide will walk you through setting up Jux in a Next.js project, from creating a new Next.js app to configuring Jux as a PostCSS plugin.
-
Create a new Next.js project (Skip if using an existing project)
First, let’s create a new Next.js project using create-next-app:
-
Install Jux CLI
-
Initialize a new project
More information
This will install the necessary dependencies, and createjux.config.ts
andpostcss.config.js
files in your project root.Under the hood
The previous step created
jux.config.ts
, which specifies the paths to your source files. Jux will scan and parse these files to generate the CSS. -
Add Jux’s @layer directive to your main CSS file
In your
app/layout.tsx
orpages/_app.tsx
(depending on whether you’re using the App Router or Pages Router), import your global CSS: -
Start using Jux in your project