- Cache Components cache each query with
'use cache', name the data withcacheTag, and set its lifetime withcacheLife, 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 resolvessearchParamsand dynamicparamsahead 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
useMemooruseCallback. - 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, anduse.
NextBeats runs on Postgres. Set DATABASE_URL in .env.local, then:
pnpm install
pnpm run prisma.push
pnpm run prisma.seed
pnpm run devRun 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"toprovider = "sqlite"inprisma/schema.prisma. Replace@prisma/adapter-pgwith@prisma/adapter-better-sqlite3inlib/db.tsandprisma/seed.ts, usingnew PrismaBetterSqlite3({ url })whereurlisprocess.env.DATABASE_URLwith thefile:prefix stripped. Remove anymode: 'insensitive'Prisma filter options since SQLite doesn't support them. Install@prisma/adapter-better-sqlite3andbetter-sqlite3, uninstall@prisma/adapter-pg,pg, and@types/pg. WriteDATABASE_URL=file:./prisma/dev.dbto.env.local.
The schema is otherwise identical, so the rest of the app behaves the same as production.
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:e2eInspect the client and server bundles with Next.js's built-in Turbopack analyzer:
pnpm analyze- 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