Skip to content
Avatar of neondatabase-labsneondatabase-labs/vercel-marketplace-neon

Vercel with Neon Postgres

A minimal template for building full-stack React applications using Next.js, Vercel, and Neon.

Framework
Use Case
Database
Contentful thumbnail for Vercel with Neon Postgres

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

Neon Postgres

A minimal template for building full-stack React applications using Next.js, Vercel, and Neon.

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.

Local Setup

Installation

Install the dependencies:

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
cp .env.example .env
Get your database URL

Obtain the database connection string from the Connection Details widget on the Neon Dashboard.

Add the database URL to the .env file

Update the .env file with your database connection string:

# The connection string has the format `postgres://user:pass@host/db`
DATABASE_URL=<your-string-here>
Start the development server
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.

Learn More

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

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

Deploy on Vercel

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

Contentful thumbnail for Vercel with Neon Postgres
Avatar of neondatabase-labsneondatabase-labs/vercel-marketplace-neon

Vercel with Neon Postgres

A minimal template for building full-stack React applications using Next.js, Vercel, and Neon.

Framework
Use Case
Database

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

Neon Postgres

A minimal template for building full-stack React applications using Next.js, Vercel, and Neon.

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.

Local Setup

Installation

Install the dependencies:

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
cp .env.example .env
Get your database URL

Obtain the database connection string from the Connection Details widget on the Neon Dashboard.

Add the database URL to the .env file

Update the .env file with your database connection string:

# The connection string has the format `postgres://user:pass@host/db`
DATABASE_URL=<your-string-here>
Start the development server
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.

Learn More

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

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

Deploy on Vercel

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

Unleash New Possibilities

Deploy your app on Vercel and unlock its full potential

Try Vercel Free