-> View demo: vercel-marketplace-neon.vercel.app
A minimal template for building full-stack React applications using Next.js, Vercel, and Neon.
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.
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.
Get your database URL
cp .env.example .env
Obtain the database connection string from the Connection Details widget on the Neon Dashboard.
Add the database URL to the .env fileUpdate the .env
file with your database connection string:
Start the development server
# The connection string has the format `postgres://user:pass@host/db`DATABASE_URL=<your-string-here>
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.
To learn more about Neon, check out the Neon documentation:
To learn more about Next.js, take a look at the following resources:
Commit and push your code changes to your GitHub repository to automatically trigger a new deployment.
A minimal template for building full-stack React applications using Next.js, Vercel, and Neon.
-> View demo: vercel-marketplace-neon.vercel.app
A minimal template for building full-stack React applications using Next.js, Vercel, and Neon.
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.
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.
Get your database URL
cp .env.example .env
Obtain the database connection string from the Connection Details widget on the Neon Dashboard.
Add the database URL to the .env fileUpdate the .env
file with your database connection string:
Start the development server
# The connection string has the format `postgres://user:pass@host/db`DATABASE_URL=<your-string-here>
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.
To learn more about Neon, check out the Neon documentation:
To learn more about Next.js, take a look at the following resources:
Commit and push your code changes to your GitHub repository to automatically trigger a new deployment.