Next.js integration guide

Next.js Music API

Next.js developers who want a generate-music feature backed by their own API routes rather than a third-party widget.

The approach

Use the official @musicapi/sdk inside Route Handlers. Submit the generation from a POST route and return the task_id right away, then poll from a GET route. Keeping the minute-long poll out of a single request avoids serverless execution limits and keeps the UI responsive.

Install

npm install @musicapi/sdk

How it works

  1. 1

    Install @musicapi/sdk and set MUSICAPI_KEY in a server environment variable, never in client code.

  2. 2

    Construct one MusicAPI client at module scope so it is reused across invocations.

  3. 3

    In a POST Route Handler, call client.sonic.create and return the task_id to the browser immediately.

  4. 4

    In a GET Route Handler, call client.sonic.getTask with that id. It reports not ready until the audio is done.

  5. 5

    Poll the GET route from the client, or use a webhook, then use audio_url from the finished response.

Full working example

Copy this, set the MUSICAPI_KEY environment variable, and run it. It is a real request against the live API.

ts
// app/api/music/route.ts  -- submit a generation
import { MusicAPI } from "@musicapi/sdk"
import { NextResponse } from "next/server"

const client = new MusicAPI({ apiKey: process.env.MUSICAPI_KEY! })

export async function POST(req: Request) {
  const { description } = await req.json()
  const { task_id } = await client.sonic.create({
    custom_mode: false,
    mv: "sonic-v5",
    gpt_description_prompt: description,
  })
  return NextResponse.json({ task_id })
}

// app/api/music/[id]/route.ts  -- poll a generation
import { MusicAPI } from "@musicapi/sdk"
import { NextResponse } from "next/server"

const client = new MusicAPI({ apiKey: process.env.MUSICAPI_KEY! })

export async function GET(
  _req: Request,
  { params }: { params: Promise<{ id: string }> }
) {
  const { id } = await params
  const res = await client.sonic.getTask(id)
  return NextResponse.json(res)
}

Pricing

MusicAPI is pay-as-you-go with credit packs, plus predictable monthly subscriptions. The per-credit rate is the same across packs and subscriptions. See the pricing page for current rates, free credits, and volume options.

FAQ

Why not await the whole generation in one route?

A generation can take a couple of minutes. Holding one serverless invocation open that long risks platform execution limits and a slow request. Submit then poll, or use a webhook, is the robust pattern.

Where does the API key go?

In a server-only environment variable read inside a Route Handler or Server Component. It is never shipped to the browser because the SDK runs server-side here.

Does this work with the Pages Router too?

Yes. The example uses App Router Route Handlers. The same client works in Pages API routes or server actions. Only the file location and handler signature change.

Build it in 5 minutes

Get free credits on signup and run real generations before any payment. No credit card required to start.

Start free

API details verified 2026-05-18. The API surface evolves; the pricing page always has current rates.