Skip to content
Jux Docs
WelcomeDesignersDevelopers

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