vercel / mongodb-starter

A developer directory built on Next.js and MongoDB Atlas, deployed on Vercel with the Vercel + MongoDB integration.

MongoDB Starter – Developer Directory

A developer directory built on Next.js and MongoDB Atlas, deployed on Vercel with the Vercel + MongoDB integration.

Featured on the MongoDB World keynote.

Deployment Instructions

You will need to create a GitHub OAuth App to use this starter. Here are the steps:

1. Go to https://github.com/settings/developers and create a new OAuth application
2. Name your application "MongoDB Starter"
3. Set the homepage URL to https://vercel.app for now (we'll change this later)
4. Set the authorization callback URL to https://vercel.app/api/auth/callback/github for now (we'll change this later)
5. Click "Register application".
6. Once the application is created, copy the "Client ID". This will be your GITHUB_CLIENT_ID.
7. Generate a new client secret and copy that too. This will be your GITHUB_CLIENT_SECRET.
8. Generate a random secret here. This will be your NEXTAUTH_SECRET.
9. Click on this button below to clone and deploy this template to Vercel.

10. Once your application is deployed, edit the homepage & callback URLs in your GitHub OAuth App to match your deployment URL.

Demo

https://mongodb.vercel.app

Vercel + MongoDB Integration

https://vercel.com/integrations/mongodbatlas

Tech Stack

• Next.js
• Tailwind CSS
• NextAuth.js
• MongoDB Atlas
• Vercel

mongodb-starter's Issues

The MongoClient is never closed, is this optional?

Hi there,

I'm working on implementing MongoDB into my Next.js project. Thanks for this starter.

I was curious why is the Mongo client never closed anywhere? is client.close() optional even for production?

As far as I understand, there is no need to close in development mode since the module is kept across reloads. But what about production especially when the project is hosted on Vercel (which uses serverless functions)?

Thanks in advance for your help 🙏

import { MongoClient } from 'mongodb';

export default async function handler(req, res) {
  const client = await MongoClient.connect(process.env.MONGODB_URI);
  const db = client.db();

  const collection = db.collection('users');
  const users = await collection.find().toArray();

  await client.close() // <- is this important for production?

  res.status(200).json(users);
}

Name filtering by letter not working properly;

Bold text is not visible properly

Bold text is not visible properly

https://mongodb.vercel.app/VenomFate-619

permission error?

I just cloned the repo locally, set env.local with correct values and the app works (display placeholders) until I click on login with github. I assume it tries to create a user in database and there are some missing rights. Error is

[next-auth][error][adapter_error_getUserByAccount] 
https://next-auth.js.org/errors#adapter_error_getuserbyaccount cannot do raw queries on admin in atlas {
  message: 'cannot do raw queries on admin in atlas',

Edit: I copied mongo connect string from vercel, is seems to be the source of issue

How to Enable Searching?

Hello. I'm new to TypeScript, and still new to programming in general. Forgive me if the answer is obvious, but how do I enable searching? Or is it already enabled and I just have to tweak some things? Thanks in advance :) Please feel free to DM me.

Add a welcome state

I'd kinda like if when you landed on it, you ended up in sort of a non-are-selected state that provides some context, instead of always seeing your profile

question about mongodb connection handling

from looking at the history of the mongodb connection handling code, it started out with pretty much the code from the with-mongodb example
however it eventually ended up with caching the connection in global in both dev and production (even though there is a comment in the example about not using the global for production, which i don't understand why tbh).

is there a reason for that / an issue that made you switch the way of handling the connection?

also could you share the peak number of opened database connections you had and if possible what was the traffic like then? as i am wondering how the number of connections scales with traffic

Error in Production on OAUTH callback

Hi, starter works well in dev, but when moving to production, ensuring correct callback in Github, and correct ID and Secret from Github in environment variables on Vercel, I keep getting an error when trying to authenticate.

Deployed site for confirmation here: https://code4rena-browser.vercel.app/

I have standard code base, fresh from git clone, no changes besides environment variables on Vercel.

I get this in the URL after trying to authenticate and after Github authorization: api/auth/signin?error=Callback

Settings in Vercel Environment Variables:
NEXTAUTH_URL=https://code4rena-browser.vercel.app
GITHUB_CLIENT_ID
GITHUB_CLIENT_SECRET
NEXTAUTH_SECRET <set correctly using openssl rand -base64 32>

Settings on Github

I have scoured the internet, have seen some talking about this situation with nextauth, but I don't see an explanation or fix...