NextBeats

A Next.js 16.3 music player demo showcasing 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 one shared App Shell per route. Links with prefetch={true} also resolve dynamic params and searchParams, including the cached content behind them while uncached data streams after navigation.
• Hover-triggered prefetch delays URL-specific prefetches in long track lists until the pointer or focus reaches a link, avoiding a separate prefetch for every destination in view.
• 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

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