NextBeats

A Next.js 16.3 music player demonstrating Instant Navigations.

Live demo →

---

Features

• Cache Components cache each query with 'use cache', name the data with cacheTag, and set its lifetime with cacheLife, so repeated reads come from the cache until a tag is invalidated.
• Partial Prefetching prefetches the shared App Shell of links as they enter the viewport, so navigation commits instantly and the data streams in behind it.
• Runtime prefetching lets a page prefetch its per-request data by exporting prefetch = 'allow-runtime', which resolves searchParams and dynamic params ahead of the click.
• Hover-triggered prefetch defers a link's runtime prefetch until the pointer or focus reaches it, so a long list of tracks does not prefetch every destination on render.
• Server Functions run mutations such as favoriting a track or creating a playlist on the server, and invalidate only the tags they change with updateTag, which re-prefetches the affected routes so they stay instant and reflect the change.
• React Compiler memoizes components and hooks automatically, so the code needs no manual useMemo or useCallback.
• View Transitions animate content updates and route changes as you move through the player.
• Async React keeps the UI interactive during server work with Suspense, useOptimistic, useTransition, useActionState, useFormStatus, and use.

Getting started

NextBeats runs on Postgres. Set DATABASE_URL in .env.local, then:

pnpm install
pnpm run prisma.push
pnpm run prisma.seed
pnpm run dev

Run locally without Postgres

Drop this prompt into your agent to swap the datasource for SQLite:

Set up NextBeats to run locally on SQLite instead of Postgres. Swap provider = "postgresql" to provider = "sqlite" in prisma/schema.prisma. Replace @prisma/adapter-pg with @prisma/adapter-better-sqlite3 in lib/db.ts and prisma/seed.ts, using new PrismaBetterSqlite3({ url }) where url is process.env.DATABASE_URL with the file: prefix stripped. Remove any mode: 'insensitive' Prisma filter options since SQLite doesn't support them. Install @prisma/adapter-better-sqlite3 and better-sqlite3, uninstall @prisma/adapter-pg, pg, and @types/pg. Write DATABASE_URL=file:./prisma/dev.db to .env.local.

The schema is otherwise identical, so the rest of the app behaves the same as production.

Testing

The end-to-end tests use @next/playwright with the instant() API to assert that loading states appear and that navigations stay instant, and they run in CI.

pnpm test:e2e

Analyze

Inspect the client and server bundles with Next.js's built-in Turbopack analyzer:

pnpm analyze

Stack

• Next.js 16.3: App Router, Cache Components, Server Functions
• React 19 with React Compiler: Suspense, View Transitions, useOptimistic
• TypeScript and Tailwind CSS v4
• Prisma 7 on PostgreSQL
• Web Audio API for procedural per-genre synthesis

License

MIT