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.

  1. 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
  2. Install Jux CLI
    Terminal
    npm install -D @juxio/cli postcss autoprefixer
  3. Initialize a new project
    Terminal
    npx jux init --postcss

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

    postcss.config.js
    module.exports = {
    plugins: {
    '@juxio/postcss': {},
    'autoprefixer': {}
    }
    }
  4. 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.

    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: {},
    };
  5. Add Jux’s @layer directive to your main CSS file
    main.css
    @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:

    app/layout.tsx
    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>
    )
    }
  6. 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 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>
    );
    };

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