Next 16 Social Media "Drop"

A dev-flavored social network 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 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. Per-user reads use 'use cache: private'.
• 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 for profiles, posts, and tags until the pointer or focus reaches a link, avoiding a separate prefetch for every destination in view.
• Server Functions run mutations such as posting a drop or following someone 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 the tab underline as a shared element, transition rows as the lists change, and cross-fade content as it streams in from Suspense.
• Async React keeps the UI interactive during server work with Suspense, useOptimistic, useTransition, useActionState, useFormStatus, and use.

Getting started

Drop runs on Postgres, so set DATABASE_URL in .env.local and then run the following commands.

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 Drop 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/prisma-client.ts and prisma/seed.ts, using new PrismaBetterSqlite3({ url }) where url is process.env.DATABASE_URL with the file: prefix stripped. Remove the mode: 'insensitive' Prisma filter options since SQLite does not 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.

pnpm test:e2e

Stack

• Next.js 16: App Router, Cache Components, Server Functions
• React 19 with React Compiler: Suspense, View Transitions, useOptimistic
• TypeScript and Tailwind CSS v4
• Prisma 7 on PostgreSQL (Neon)
• Ariakit for accessible dialogs and popovers
• Shiki for server-side syntax highlighting

License

MIT