--- title: "Vercel with Neon Postgres" description: "A minimal template for building full-stack React applications using Next.js, Vercel, and Neon." url: "https://vercel.com/templates/next.js/vercel-with-neon-postgres" links: repository: "https://github.com/neondatabase-labs/vercel-marketplace-neon" demo: "https://vercel-marketplace-neon.vercel.app/" deploy: "https://vercel.com/new/clone?demo-title=Vercel+with+Neon+Postgres&demo-description=A+minimal+template+for+building+full-stack+React+applications+using+Next.js%2C+Vercel%2C+and+Neon.&demo-url=https%3A%2F%2Fvercel-marketplace-neon.vercel.app%2F&demo-image=%2F%2Fimages.ctfassets.net%2Fe5382hct74si%2F1C5qjoXApiKj8hFdKy55bp%2Fbcf64203cf35dccf71e0a59f7535876d%2Fhome.png&project-name=Vercel+with+Neon+Postgres&repository-name=vercel-with-neon-postgres&repository-url=https%3A%2F%2Fgithub.com%2Fneondatabase-labs%2Fvercel-marketplace-neon&from=templates&skippable-integrations=1&products=%5B%7B%22type%22%3A%22integration%22%2C%22protocol%22%3A%22storage%22%2C%22productSlug%22%3A%22neon%22%2C%22integrationSlug%22%3A%22neon%22%7D%5D" --- # Vercel with Neon Postgres A minimal template for building full-stack React applications using Next.js, Vercel, and Neon. Neon Logo # 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: [![Deploy to Vercel](https://vercel.com/button)](https://vercel.com/new/clone?repository-url=https%3A%2F%2Fgithub.com%2Fneondatabase-labs%2Fvercel-marketplace-neon%2Ftree%2Fmain&project-name=my-vercel-neon-app&repository-name=my-vercel-neon-app&products=[{%22type%22:%22integration%22,%22integrationSlug%22:%22neon%22,%22productSlug%22:%22neon%22,%22protocol%22:%22storage%22}]) 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](https://vercel-marketplace-neon.vercel.app/) ![Vercel with Neon](https://github.com/neondatabase-labs/vercel-marketplace-neon/blob/main/docs/home.png?raw=true) ## Local Setup ### Installation Install the dependencies: ```bash 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 ```bash 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](https://console.neon.tech/) and add it to the `.env` file: ```txt DATABASE_URL= ``` #### Set the Better Auth environment variables Run `openssl rand -base64 32` to generate a secret and add it to `.env`: ```txt BETTER_AUTH_SECRET= ``` Set the base URL of your application to your local development URL: ```txt 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 ```bash npm run dev ``` Open [http://localhost:3000](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](https://github.com/neondatabase/mcp-server-neon) and [neon-postgres agent skill](https://github.com/neondatabase/agent-skills) 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](https://ui.shadcn.com/) 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: ```bash npx shadcn@latest add [component-name] ``` For example: ```bash npx shadcn@latest add card 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](https://ui.shadcn.com/docs) - [shadcn/ui Components](https://ui.shadcn.com/docs/components) ## Drizzle ORM This project uses [Drizzle ORM](https://orm.drizzle.team/) 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 ```typescript import { db } from "@/db/client"; import { user } from "@/auth/schema"; import { eq } from "drizzle-orm"; // Select all users const allUsers = await db.select().from(user); // Insert a user await db.insert(user).values({ id: "123", name: "John Doe", email: "john@example.com", }); // Update a user await db.update(user) .set({ name: "Jane Doe" }) .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](https://orm.drizzle.team/docs/overview) - [Drizzle with PostgreSQL](https://orm.drizzle.team/docs/get-started-postgresql) - [Drizzle Kit](https://orm.drizzle.team/kit-docs/overview) ## Learn More To learn more about Neon, check out the Neon documentation: - [Neon on Vercel Fluid Compute](https://neon.com/docs/guides/vercel-connection-methods) - learn about differnet datatabase connection methods on Fluid. - [Neon Documentation](https://neon.tech/docs/introduction) - learn about Neon's features and SDKs. - [Neon Discord](https://discord.gg/9kf3G4yUZk) - join the Neon Discord server to ask questions and join the community. - [ORM Integrations](https://neon.tech/docs/get-started-with-neon/orms) - 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](https://nextjs.org/docs) - learn about Next.js features and API. - [Learn Next.js](https://nextjs.org/learn) - an interactive Next.js tutorial. ## Deploy on Vercel Commit and push your code changes to your GitHub repository to automatically trigger a new deployment. ## Related Templates ### [Postgres Next.js Starter](https://vercel.com/templates/next.js/postgres-starter) Simple Next.js template that uses a Postgres database. ## Related Integrations ### [Neon](https://vercel.com/marketplace/neon) Postgres serverless platform designed to build reliable and scalable apps --- ## Additional documentation The [Vercel Knowledge Base](https://vercel.com/kb) contains guides and answers to common questions about Vercel, including deployment, framework configuration, domains, caching, and troubleshooting.