Next 16 Calendar "Flow"

A calendar and booking-link workspace that demonstrates Instant Navigations in Next.js 16.3.

Live demo →

---

The architecture follows the Next.js App Architecture skill and the Component Architecture for React Server Components blog post.

Features

• Cache Components cache calendar weeks and booking-link data 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. Calendar and booking links with prefetch={true} also resolve their date or view, including the cached content behind it while uncached data streams after navigation.
• Hover-triggered prefetch upgrades only the mini-calendar date reached by pointer, keyboard focus, or touch intent, avoiding a separate prefetch for every date in view.
• Server Functions run mutations — moving, creating, editing, and deleting events, and booking a slot — on the server and invalidate only the tags they change with updateTag.
• React Compiler memoizes components automatically, so the code needs no manual useMemo/useCallback.
• View Transitions cross-fade booking content and keep persistent calendar chrome stable as data streams in from Suspense.
• Async React keeps the UI interactive with Suspense, useOptimistic, useTransition, useActionState, useFormStatus, and use.

Getting started

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

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

Open http://localhost:3000 in your browser. You can browse the data with pnpm run prisma.studio, or wipe and re-seed the database with pnpm run prisma.reset.

Run locally without Postgres

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

Set up Flow to run locally on SQLite instead of Postgres. Keep both database adapter stacks installed so the production Postgres setup remains available. 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. Write DATABASE_URL=file:./prisma/dev.db to .env.local, then run pnpm run prisma.push and pnpm run prisma.seed.

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
• Ariakit for accessible dialogs and popovers

License

MIT