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
This will install the necessary dependencies, and create
jux.config.ts
andpostcss.config.js
files in your project root. -
Configure your include files
Add the path to your source files in
jux.config.ts
. During the build process, Jux will scan these files to generate the CSS file. -
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
Reference pages are ideal for outlining how things work in terse and clear terms. Less concerned with telling a story or addressing a specific use case, they should give a comprehensive outline of what you’re documenting.
Further reading
- Read about reference in the Diátaxis framework