-> View demo: nextjs.mongodb.com

Next.js with MongoDB

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

Getting Started

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

Local Setup

Installation

Install the dependencies:

1
npm install

Development

1
cp .env.example .env

Obtain the database connection string from the Cluster tab on the MongoDB Atlas Dashboard.

Update the .env file with your database connection string:

1
MONGODB_URI=mongodb+srv://<username>:<password>@<cluster-url>/<database>?retryWrites=true&w=majority

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.

Learn More

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

• MongoDB Documentation - learn about MongoDB features and APIs
• MongoDB Node.js Driver - documentation for the official Node.js driver

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.