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:
Terminal npx create-next-app@latest my-jux-nextjs-appcd my-jux-nextjs-app -
Install Jux CLI
Terminal npm install -D @juxio/cliTerminal pnpm add -D @juxio/cliTerminal yarn add -D @juxio/cli -
Initialize a new project
Terminal npx jux init --postcssMore information
This will install the necessary dependencies, and createjux.config.ts
andpostcss.config.js
files in your project root.postcss.config.js module.exports = {plugins: {'@juxio/postcss': {},'autoprefixer': {}}}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.jux.config.ts export default {preflight: true,include: ['./src/**/*.{js,jsx,ts,tsx}', './pages/**/*.{ts,tsx}'],exclude: [],/* The core tokens of your design system */core_tokens: {},/* The themes for your design system */themes: {},}; -
Add Jux’s @layer directive to your main CSS file
globals.css @layer juxbase, juxtokens, juxutilities;In your
app/layout.tsx
orpages/_app.tsx
(depending on whether you’re using the App Router or Pages Router), import your global CSS:app/layout.tsx import type { Metadata } from 'next'// These styles apply to every route in the applicationimport './main.css'export const metadata: Metadata = {title: 'Create Next App',description: 'Generated by create next app',}export default function RootLayout({children,}: {children: React.ReactNode}) {return (<html lang="en"><body>{children}</body></html>)} -
Start using Jux in your project
index.tsx import { css, styled } from '@juxio/react-styled';const titleStyles = css({color: 'violet','&:hover': {color: 'darkviolet',},});const StyledDiv = styled('div', {root: {/*Strings in the brackets {} represent design tokensfrom your jux.config.ts*/border: '1px solid {color.core.grays_500}',borderRadius: '{core.dimension.spacing_100}',padding: '1.5rem',flexDirection: 'column',gap: 'clamp(0.5rem, calc(0.125rem + 1vw), 1rem)',[`.${titleStyles}`]: {marginBottom: '1rem',},},variants: [{props: { size: 'small' },style: {fontSize: '14px',padding: '4px 8px',},},{props: { size: 'medium' },style: {fontSize: '16px',padding: '8px 16px',},},],});export const MyStyledComponent = ({ children, title, size }) => {return (<StyledDiv size={size}><spanclassName={css({color: 'violet','&:hover': {color: 'darkviolet',},})}>{title}</span>{children}</StyledDiv>);};