Project template

A new project contains these files. The model knows them and builds on them.

app/
  layout.tsx            Root layout: fonts, metadata, global styles
  page.tsx              Home page — lists items from the database
  globals.css           Tailwind v4 entry
  api/
    items/route.ts      GET lists items, POST adds one
components/
  add-item-form.tsx     Client component posting to /api/items
lib/
  db.ts                 pg pool from DATABASE_URL + query<T>() helper
  items.ts              listItems / addItem; creates the table on first use
.env                    Managed by Qyant — DATABASE_URL, PORT; add your own below
.env.example            The variable names, for running elsewhere
.gitignore              node_modules, .next, .env
next.config.ts
package.json            next 16, react 19, pg, tailwindcss 4, typescript
postcss.config.mjs
tsconfig.json
README.md

lib/db.ts

import { Pool } from "pg";

const pool = new Pool({ connectionString: process.env.DATABASE_URL });

export async function query<T>(text: string, params: unknown[] = []): Promise<T[]> {
  const result = await pool.query(text, params);
  return result.rows as T[];
}

Every database access in generated code goes through this helper. It's deliberately small so it's easy to review and easy to swap for an ORM if you want one.

lib/items.ts

Creates items (id serial, name text, created_at timestamptz) if it doesn't exist and exposes listItems() and addItem(name). New tables the model adds follow the same shape: a module in lib/ that owns one table.

Scripts