https://github.com/aurorascharff/next16-social-media
A dev-flavored social network demo exploring Async React, Cache Components, streaming, and runtime prefetch with Next.js 16, React 19, Tailwind CSS v4, and Shiki.
https://github.com/aurorascharff/next16-social-media
app-router async-react cache-components nextjs optimistic-ui react19 rsc server-actions shiki suspense tailwindcss-v4 view-transitions
Last synced: 10 days ago
JSON representation
A dev-flavored social network demo exploring Async React, Cache Components, streaming, and runtime prefetch with Next.js 16, React 19, Tailwind CSS v4, and Shiki.
- Host: GitHub
- URL: https://github.com/aurorascharff/next16-social-media
- Owner: aurorascharff
- License: mit
- Created: 2026-05-18T12:37:46.000Z (25 days ago)
- Default Branch: main
- Last Pushed: 2026-05-25T20:35:27.000Z (18 days ago)
- Last Synced: 2026-05-25T21:29:13.496Z (18 days ago)
- Topics: app-router, async-react, cache-components, nextjs, optimistic-ui, react19, rsc, server-actions, shiki, suspense, tailwindcss-v4, view-transitions
- Language: TypeScript
- Homepage: https://next16-social-media.vercel.app
- Size: 674 KB
- Stars: 0
- Watchers: 0
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
- Agents: AGENTS.md
Awesome Lists containing this project
README
# Next 16 Social Media "Drop"
A dev-flavored social network built with Next.js 16, React 19, Tailwind CSS v4, Prisma 7 on Neon Postgres, and Shiki for server-side syntax highlighting.
The architecture follows the [Next.js App Architecture](.agents/skills/nextjs-app-architecture/SKILL.md) skill and the [Component Architecture for React Server Components](https://aurorascharff.no/posts/component-architecture-for-react-server-components/) blog post.
## Architecture
- **Feature-sliced structure**: `drop/`, `user/`, `tag/` each own queries, actions, and components
- **Components own their data**: ``, ``, `` fetch on the server. Move them between pages freely
- **Pages compose, they don't fetch**: each page is a synchronous blueprint of async components wrapped in Suspense
- **Client boundaries as leaf nodes**: `'use client'` pushed deep. Server content flows into client components as children
## Caching and Navigation
- **Cache Components**: `'use cache'` per query, not per page. A feed caches for seconds, trending tags for minutes, user-specific data with `'use cache: private'`. `cacheTag` names data, `updateTag` invalidates both server and browser cache
- **Runtime prefetching**: all pages export `unstable_prefetch = 'force-runtime'` so the framework prefetches cached dynamic data ahead of time, making even database-driven pages instant on click
## Getting Started
```bash
pnpm install
pnpm run prisma.push
pnpm run prisma.seed
pnpm run dev
```
Open [http://localhost:3000](http://localhost:3000) in your browser.
## Project Structure
```
app/ Pages and layouts
components/ui/ Visual primitives
features/
drop/ Queries, actions, and components for drops
user/ Queries, actions, and components for users
tag/ Queries and components for tags
search/ Components for search
types/ Shared types
lib/ Prisma client, utilities
tests/ Playwright E2E tests
```
## E2E Tests
Uses `@next/playwright` with the `instant()` API to assert loading states:
```bash
pnpm test:e2e
```
## Database
Uses Prisma with PostgreSQL (Neon).
```bash
pnpm run prisma.push # Push schema to DB
pnpm run prisma.seed # Seed with sample data
pnpm run prisma.studio # Open Prisma Studio
pnpm run prisma.reset # Reset and re-seed
```