kukicado / building-modern-app-with-nextjs-and-mongodb

Building a Modern App with NextJS and MongoDB

This codebase is the completed code for an article that covers how you can build a modern application with NextJs and MongoDB. The app you will build is called a Macro Compliance Tracker. The app allows you to track your calories and macros, as well as acceptable ranges to be in compliance. Read the article to find out how and why.

Prerequisites

• A recent version of Node.js.
• MongoDB. Try MongoDB Atlas for free. You can use code ADO200 for a $200 credit.

If you want to add sample data. You can find it in the included data.json file. Import it into your database.

Building the Application

1. Clone the repo
2. Navigate to the mct directory.
3. Run npm install in your terminal to install dependencies.
4. Run npm run dev to start the local development server.
5. Update the {YOUR-MONGODB-CONNECTION-STRING} string in the database.js file located in the middleware directory with your MongoDB connection string.
6. Ensure the client.db('{DATABASE-NAME}') string in the database.js file matches the database name you wish to use.

Navigate to localhost:3000 to see your application in action.

building-modern-app-with-nextjs-and-mongodb's Issues

Console is logging: "API resolved without sending a response for..."

Many thanks for putting this tutorial together @kukicado , this was very helpful to get me up and running with MongoDB and Next.js.

Your code is working for me, however each API call throws
API resolved without sending a response for /api/daily, this may result in a stalled requests. to the console similar to issue 10439.

I was wondering if you are able to replicate this issue and if you had a fix?

maximum connections threshold

I've used this as a foundation for MongoDB connection, so far it works but I'm getting mails from MongoDB saying I've almost exhausted all my connections while i only have my website that access from Mongo and sometimes my local nodejs development server. What can be the cause?
my database.js

import nextConnect from 'next-connect';

const client = new MongoClient('mongodb+srv://username:[email protected]/?retryWrites=true&w=majority',
{
  useNewUrlParser: true,
  useUnifiedTopology: true,
});

async function database(req, res, next) {
  if (!client.isConnected()) await client.connect();
  req.dbClient = client;
  req.db = client.db('cercleSport');
  return next();
}

const middleware = nextConnect();

middleware.use(database);

export default middleware;```
------------------------------------------------------------+
------------------------------------------------------------+
One of my api endpoints 
pages/api/fetchallgames
//
```import nextConnect from 'next-connect';
import middleware from '@/middleware/database';

const handler = nextConnect();

handler.use(middleware);

handler.post(async (req, res) => {
    // Convert the object back to a JSON string;
    const league = req.body.league;
    const division = req.body.division;
    const fieldString = "${league}.${division}.games";
    let projectionObject = {_id: 0};
    projectionObject[fieldString] = 1;
    let doc = await req.db.collection('24').findOne({}, { projection: projectionObject });
    let games = doc[league][division].games;
    return res.status(200).json(games);
});

export default handler;```

Dates

Great tutorial! Thanks so much for creating it.

Have one small question. I haven't been able to use findOne to get documents by date in the way you lay it out.

In daily.js your code is:

if(date){
    doc = await req.db.collection('daily').findOne({date: new Date(date)})
  } else {
    doc = await req.db.collection('daily').findOne()
  }

But because the dates in your data.json are formatted like "2020-01-22T08:00:00.000+00:00", the request does not work for me.

I ended up changing the date format to "2020-01-22T08:00:00.000Z" in the database and using the following code:

if(date){
    doc = await req.db.collection('daily').findOne({date: new Date(date).toJSON()})
  } else {
    doc = await req.db.collection('daily').findOne()
  }

But I am curious how it is supposed to work? And how you are supposed to request dates of your format?

Thanks!