Mongo and Next.JS

In this tutorial, we will learn how to connect to MongoDB and use Next.JS to create a simple app.

Steps

Use create-next-app to bootstrap a next app

npx create-next-app --example with-mongodb dabble-nextjs-mongo

Change into the dabble-nextjs-mongo project directory
```
cd dabble-nextjs-mongo
```
Run the dev server
```
npm run dev
```
Try to view the app by visiting localhost:3000 - you should see an error because we still need to set the mongo connection string
Rename env.local.example to env.local
Open env.local and set the following environment variables
```
MONGODB_URI=your-mongodb-uri
MONGODB_DB=your-mongodb
```
Setting up a mongodb on Atlas
1. Go to MongoDB Atlas
2. mongodb+srv://USERNAME:PASSWORD@cluster0.tdm0q.mongodb.net/DBNAME?retryWrites=true&w=majority
3. Setup a username and password
4. Set the network access for your IP address
Restart the dev server, this time there should not be an error and you will see a screen like the following.

Create a file named pages/api/movies.js and paste in the following code.

import { connectToDatabase } from "../../util/mongodb";

export default async (req, res) => {
  const { db } = await connectToDatabase();

  const movies = await db
    .collection("movies")
    .find({})
    .sort({ metacritic: -1 })
    .limit(20)
    .toArray();

  res.json(movies);
};

Mongo and Next.JS

Steps​

Resources​

Steps

Resources