Vercel with Neon Postgres

Neon Postgres Vercel Marketplace Template

A minimal template for building full-stack React applications using Next.js, Vercel, and Neon, shipping with Tailwind CSS, Shadcn UI and better-auth.

Getting Started

Click the "Deploy" button to clone this repo, create a new Vercel project, setup the Neon integration, and provision a new Neon database:

Once the process is complete, you can clone the newly created GitHub repository and start making changes locally.

Demo

View live demo: vercel-marketplace-neon.vercel.app

Local Setup

Installation

Install the dependencies:

1
npm install

You can use the package manager of your choice. For example, Vercel also supports bun install out of the box.

Development

Create a .env file in the project root

1
cp .env.example .env

Get your database URL

Run vercel env pull to fetch the environment variables from your Vercel project.

Alternatively, obtain the database connection string from the Connection Details widget on the Neon Dashboard and add it to the .env file:

1
DATABASE_URL=<postgres://user:pass@host/db>

Set the Better Auth environment variables

Run openssl rand -base64 32 to generate a secret and add it to .env:

1
BETTER_AUTH_SECRET=<generated-secret>

Set the base URL of your application to your local development URL:

1
BETTER_AUTH_URL=http://localhost:3000

Note: Make sure to set the base URL to your production Vercel URL for your production environment.

Start the development server

1
npm run dev

Open http://localhost:3000 with your browser to see the result.

You can start editing the page by modifying app/page.tsx. The page auto-updates as you edit the file.

Neon MCP Server & Agent Skill

This project includes the Neon MCP server and neon-postgres agent skill for AI-assisted development with Neon Postgres. Both are configured for Cursor, Claude Code, VS Code, OpenCode, and Codex.

Shadcn/ui

This project uses shadcn/ui for building accessible and customizable UI components.

Configuration

Shadcn/ui is configured in components.json. The project uses:

• Style: New York
• Base Color: Neutral
• Icon Library: Lucide React
• CSS Variables: Enabled for theming

Adding Components

To add new shadcn/ui components:

1
npx shadcn@latest add [component-name]

For example:

1
npx shadcn@latest add card
2
npx shadcn@latest add dialog

Theme Support

The project includes a theme provider and selector:

• Theme Provider: src/components/themes/provider.tsx
• Theme Selector: src/components/themes/selector.tsx

Themes are managed using next-themes and support light, dark, and system preferences.

Existing Components

• Button - src/components/ui/button.tsx
• DropdownMenu - src/components/ui/dropdown-menu.tsx

Learn More

• shadcn/ui Documentation
• shadcn/ui Components

Drizzle ORM

This project uses Drizzle ORM for type-safe database operations with PostgreSQL.

Configuration

Drizzle is configured in drizzle.config.ts. The database client is set up in src/lib/db/client.ts.

Schema

Database schemas are co-located with their features. Auth-related schemas (auto-generated by better-auth) are in src/lib/auth/schema.ts. You can add additional schema files for other features and they will be automatically detected by Drizzle Kit.

Database Scripts

• npm run db:generate - Generate migration files from your schema
• npm run db:migrate - Apply migrations to your database
• npm run db:studio - Open Drizzle Studio (visual database browser)

Usage Example

1
import { db } from "@/db/client";
2
import { user } from "@/auth/schema";
3
import { eq } from "drizzle-orm";
4

5
// Select all users
6
const allUsers = await db.select().from(user);
7

8
// Insert a user
9
await db.insert(user).values({
10
  id: "123",
11
  name: "John Doe",
12
  email: "john@example.com",
13
});
14

15
// Update a user
16
await db.update(user)
17
  .set({ name: "Jane Doe" })
18
  .where(eq(user.id, "123"));

Running Migrations

1. Update your schema files (e.g., src/lib/auth/schema.ts or other feature-specific schema files)
2. Generate migrations: npm run db:generate
3. Review the generated SQL in the drizzle/ folder
4. Apply migrations: npm run db:migrate

Learn More

• Drizzle ORM Documentation
• Drizzle with PostgreSQL
• Drizzle Kit

Learn More

To learn more about Neon, check out the Neon documentation:

• Neon on Vercel Fluid Compute - learn about differnet datatabase connection methods on Fluid.
• Neon Documentation - learn about Neon's features and SDKs.
• Neon Discord - join the Neon Discord server to ask questions and join the community.
• ORM Integrations - find Object-Relational Mappers (ORMs) that work with Neon.

To learn more about Next.js, take a look at the following resources:

• Next.js Documentation - learn about Next.js features and API.
• Learn Next.js - an interactive Next.js tutorial.

Deploy on Vercel

Commit and push your code changes to your GitHub repository to automatically trigger a new deployment.