Skip to content

README.md

Latest commit

 

History

History
65 lines (42 loc) · 3.86 KB

README.md

File metadata and controls

65 lines (42 loc) · 3.86 KB
Raw
NextBeats

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

License

MIT