Next.js Starter

A Next.js 16 starter with Prisma, Tailwind CSS, and shadcn/ui (built on Base UI), with modern patterns for building demos and applications.

Features opt-in caching with "use cache" and Partial Pre-Rendering via cacheComponents.

Getting Started

bun install
bun run dev

Open http://localhost:3000 in your browser.

Prisma Setup

This project uses SQLite with a local database file (dev.db). No environment configuration needed.

bun run prisma.generate   # Generate the Prisma client
bun run prisma.push       # Push schema to database
bun run prisma.seed       # Seed initial data
bun run prisma.studio     # View data in Prisma Studio

Using Prisma Postgres instead: Change the provider in prisma/schema.prisma to postgresql, update db.ts to use @prisma/adapter-pg, and set your connection string in .env:

DATABASE_URL="postgres://..."

Project Structure

app/                      # Pages and layouts
  _components/            # Route-local components
components/
  design/                 # Action prop components
  ui/                     # shadcn/ui primitives
data/
  actions/                # Server Actions
  queries/                # Data fetching with cache()

• components/ui — shadcn/ui components. Add with bunx shadcn@latest add <component-name>
• components/design — Components that expose Action props and handle async coordination internally

Every page folder should contain everything it needs. Components and functions live at the nearest shared space in the hierarchy.

Naming: PascalCase for components, kebab-case for files/folders, camelCase for functions/hooks.

Development Flow

This project uses cacheComponents: true — data fetching is dynamic by default. Push dynamic data access (searchParams, cookies(), headers(), uncached fetches) as deep as possible in the component tree to maximize static content. Async components accessing dynamic data must be wrapped in <Suspense> with skeleton fallbacks.

• Fetching data — Create queries in data/queries/, call in Server Components. Wrap with cache() for deduplication.
• Mutating data — Create Server Actions in data/actions/ with "use server". Invalidate with updateTag() or revalidateTag(). Use useTransition or useFormStatus for pending states, useOptimistic for instant feedback.
• Navigation — Wrap state changes in useTransition to keep old content visible while loading.
• Caching — Add "use cache" to pages, components, or functions you want to pre-render or cache.

Development Tools

Uses ESLint and Prettier with format-on-save in VS Code. Configuration in eslint.config.mjs and .prettierrc. Open the .code-workspace file to ensure correct extensions are set.

Deployment

bun run build

Deploy to Vercel for the easiest experience. Use a production database instead of SQLite.

See the Next.js deployment docs for more details.