Skip to content

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-app
cd my-jux-nextjs-app
```

Install Jux CLI

npm install -D @juxio/cli

pnpm add -D @juxio/cli

yarn add -D @juxio/cli

Initialize a new project

npx jux init --postcss

More information

This will install the necessary dependencies, and create jux.config.ts and postcss.config.js files in your project root.

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.

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

@layer juxbase, juxtokens, juxutilities;

In your app/layout.tsx or pages/_app.tsx (depending on whether you’re using the App Router or Pages Router), import your global CSS:

import type { Metadata } from 'next'

// These styles apply to every route in the application
import './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

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 tokens
      from 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}>
      <span
        className={css({
          color: 'violet',
          '&:hover': {
            color: 'darkviolet',
          },
        })}
      >
        {title}
      </span>
      {children}
    </StyledDiv>
  );
};