-> 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

Create a .env file in the project root

1
cp .env.example .env

Get your database URL

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

Add the database URL to the .env file

Update the .env file with your database connection string:

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

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.

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.