Next.js

Install and set up AudioUI in a Next.js project using the App Router.

This guide covers installing AudioUI in a Next.js project using the App Router (Next.js 13+). Next.js is a React framework optimized for production.

Prerequisites

  • Node.js 18.0 or higher
  • Next.js 13.0 or higher (App Router)
  • Basic familiarity with React and Next.js

Installation Steps

1

Create a Next.js Project

If you don't have a Next.js project yet, create one:

pnpm create next-app@latest my-audio-app
cd my-audio-app

When prompted, choose:

  • TypeScript: Yes
  • App Router: Yes
  • Other options as needed
2

Install AudioUI

Install AudioUI using your package manager:

pnpm add @cutoff/audio-ui-react
3

Import CSS

Import the AudioUI stylesheet in your root stylsheet. In Next.js, this is app/globals.css:

app/globals.css
@import url("@cutoff/audio-ui-react/style.css");
 
// Rest of your styles...
4

Create a Client Component

AudioUI components are client components. Create a client component for your audio controls:

components/AudioControls.tsx
"use client";
 
import { useState } from "react";
import { Knob } from "@cutoff/audio-ui-react";
 
export default function AudioControls() {
  const [value, setValue] = useState(0.5);
 
  return (
    <Knob
        value={value}
        onChange={(e) => setValue(e.value)}
        label="Cutoff"
        size="large"
      />
  );
}
5

Use in a Page

Use your component in a page:

app/page.tsx
import AudioControls from "../components/AudioControls";
 
export default function Home() {
    return (
        <main className="flex flex-col items-center">
            <h1>My Audio App</h1>
            <AudioControls />
        </main>
    );
}
6

Start Development Server

Start the Next.js development server:

pnpm run dev

Open your browser to http://localhost:3000. You should see your AudioUI component rendering.

Important Notes

Client Components

All AudioUI components must be used in client components. Always include the "use client" directive at the top of files that use AudioUI components.

Server Components

If you need to use AudioUI components in a server component, create a separate client component wrapper:

app/components/AudioPanel.tsx
"use client";
 
import { Knob, Slider } from "@cutoff/audio-ui-react";
// ... component implementation

Then import and use it in your server component.

Building for Production

Build your application for production:

pnpm run build

AudioUI styles are automatically included in the Next.js build output.

Next Steps