Add PostgreSQL and Prisma to Your Slik Dev App

Database setup in Slik Dev is opt-in. When the CLI asks whether to include a database, you can say yes or skip it entirely — the rest of your app works either way. If you opt in, Slik configures Prisma ORM with a PostgreSQL connection and generates a schema.prisma file with a starter data model already in place. Supabase is the recommended hosted PostgreSQL provider, though any PostgreSQL-compatible database works.

What Gets Scaffolded

When you include the database option, Slik Dev adds the following to your project:

prisma/schema.prisma — A Prisma schema file with a datasource block pointing to DATABASE_URL and a starter User model.
lib/prisma.ts — A singleton Prisma Client instance safe to use in Next.js Server Components and API routes.
DATABASE_URL — A placeholder in your .env file ready for your connection string.
Prisma dependencies — prisma and @prisma/client added to package.json.

Enabling Database at Scaffold Time

Run the scaffolding command

npx create-slik@latest my-app

Select your stack and theme

Choose Next.js as your stack and Bento as your theme (or whichever options become available for your version).

Opt in to the database when prompted

? Include PostgreSQL + Prisma database setup?
❯ Yes
  No

Select Yes to have Slik Dev generate the Prisma configuration alongside your app.

Complete the install

cd my-app
npm install

Prisma and its client are now installed. Before running the dev server, you need to connect a database.

Post-Scaffold Database Setup

Create a PostgreSQL database

The recommended option is Supabase — it provides a free hosted PostgreSQL instance with a connection string you can copy immediately.

Sign in at supabase.com and create a new project.
Go to Project Settings → Database.
Copy the Connection string under the URI tab. It looks like:

postgresql://postgres:[YOUR-PASSWORD]@db.abcdefghijkl.supabase.co:5432/postgres

Any other PostgreSQL provider (Railway, Neon, PlanetScale-compatible, self-hosted) also works — just use its connection string.

Set DATABASE_URL in your .env file

Open .env in your project root and replace the placeholder:

DATABASE_URL="postgresql://postgres:[YOUR-PASSWORD]@db.abcdefghijkl.supabase.co:5432/postgres"

Never commit your .env file. It is already listed in .gitignore in your generated project — verify this before your first push.

Push your schema to the database

Run prisma db push to apply your schema to the connected database without generating a migration file. This is the recommended flow for early development:

npx prisma db push

You should see output confirming each model was synchronized:

Environment variables loaded from .env
Prisma schema loaded from prisma/schema.prisma
Datasource "db": PostgreSQL database "postgres"

🚀  Your database is now in sync with your Prisma schema.

Start your dev server

npm run dev

Your app is now running at http://localhost:3000 with a live database connection.

Working with Prisma

The basic Prisma development loop is: edit your schema, push to the database, and use the generated client.

1. Edit your schema

Open prisma/schema.prisma and define your models:

datasource db {
  provider = "postgresql"
  url      = env("DATABASE_URL")
}

generator client {
  provider = "prisma-client-js"
}

model User {
  id        String   @id @default(cuid())
  email     String   @unique
  name      String?
  createdAt DateTime @default(now())
}

model Post {
  id        String   @id @default(cuid())
  title     String
  content   String?
  author    User     @relation(fields: [authorId], references: [id])
  authorId  String
  createdAt DateTime @default(now())
}

2. Push changes to the database

npx prisma db push

Run this every time you update your schema. It syncs the database structure and regenerates the Prisma Client types.

3. Use the Prisma Client in your app

Your generated project includes a singleton client at lib/prisma.ts. Import it directly in any Server Component or API route:

import { prisma } from "@/lib/prisma";

// Fetch all users
const users = await prisma.user.findMany();

// Create a new record
const newUser = await prisma.user.create({
  data: {
    email: "user@example.com",
    name: "Jane Doe",
  },
});

// Query with a filter
const user = await prisma.user.findUnique({
  where: { email: "user@example.com" },
});

Always use the singleton from lib/prisma.ts rather than instantiating new PrismaClient() directly. Next.js hot-reload can create too many concurrent database connections if the client is re-instantiated on every module evaluation.

Recommended: Supabase

Supabase is the recommended hosted PostgreSQL option for Slik Dev projects because it:

Provides a free tier suitable for development and small production workloads
Gives you a PostgreSQL connection string compatible with Prisma out of the box
Includes a table editor and SQL runner in its dashboard for inspecting your data
Supports Row Level Security (RLS) if you later want database-level access control

You can open the Prisma Studio UI to browse and edit your database records locally — no need to log into Supabase for quick data inspection:

npx prisma studio

This opens a browser-based database explorer at http://localhost:5555.

Get Started

Configuration

Guides

Reference

Add PostgreSQL and Prisma to Your Slik Dev App

What Gets Scaffolded

Enabling Database at Scaffold Time

Post-Scaffold Database Setup

Working with Prisma

1. Edit your schema

2. Push changes to the database

3. Use the Prisma Client in your app

Recommended: Supabase

​What Gets Scaffolded

​Enabling Database at Scaffold Time

​Post-Scaffold Database Setup

​Working with Prisma

​1. Edit your schema

​2. Push changes to the database

​3. Use the Prisma Client in your app

​Recommended: Supabase

What Gets Scaffolded

Enabling Database at Scaffold Time

Post-Scaffold Database Setup

Working with Prisma

1. Edit your schema

2. Push changes to the database

3. Use the Prisma Client in your app

Recommended: Supabase