Create Next.js MongoDB Powered App in 10 minutes with This Open-source Boilerplate

Next.js is an opens-source React framework for building scalable web applications. It supports static website generation, and server-side rendering.

Next.js comes with full TypeScript support, fast bundling, client routing, pre-fetching, and it does not require extensive configuration like its competitors.

MongoDB is a NoSQL document database engine, that supports real-time and is preferable for large scale apps.

To start working with MongoDB within your Next.js apps, you need time and effort and hell of testing to make sure everything is working as expected.

But we found a great solution that will save you a great deal of time, as it comes also packed by a strong community of Nex.js users.

This is a simple open-source project that comes with functions and features ready to get your app up and running.

Features

Here is its including features:

• Simple configuration
• Easy and fast setup
• Comes with a rich integration guide
• Developer-friendly documentation
• Several blog posts that include tutorials
• Fast and light without bulky, slow Express.js.
• Full API Routes implementation and 👻 Serverless ready
• Good ol' Middleware pattern, compatible with Express ecosystem, powered by next-connect
• KISS: No fancy stuff like GraphQL, SASS, Redux, etc. Come with explanatory blog posts
• Can be adapted to any databases besides MongoDB (Just update api-lib/db)
• Authentication and Account
• Session-based authentication (Passport.js)
• Sign up/Log in/Sign out API
• Authentication via email/password
• Authentication via OAuth (Google, Facebook, etc.)
• Email verification
• Password change
• Password reset via email
• Profile: Profile picture, username, name, bio, email
• Profile update

Social feature

• View others' profiles
• Posts and comments

Dependencies

This project uses the following dependencies:

• next.js - v9.3 or above required for API Routes and new new data fetching method.
• react - v16.8 or above required for react hooks.
• react-dom - v16.8 or above.
• swr - required for state management, may be replaced with react-query
• mongodb - may be replaced by mongoose.
• passport, passport-local - required for authentication.
• next-connect - recommended if you want to use Express/Connect middleware and easier method routing.
• next-session, connect-mongo - required for session, may be replaced with other session libraries such as cookie-session, next-iron-session, or express-session (express-session is observed not to work properly on Next.js 11+).
• bcryptjs - optional, may be replaced with any password-hashing library. argon2 recommended.
• validator - optional but recommended, to validate email.
• ajv - optional but recommended, to validate request body.
• multer - may be replaced with any middleware that handles multipart/form-data
• cloudinary - optional, only if you are using Cloudinary for image upload.
• Several other optional dependencies for cosmetic purposes.
• nodemailer - optional, only if you use it for email. It is recommended to use 3rd party services like Mailgun, AWS SES, etc. instead.

Environmental variables

Environmental variables in this project include:

• MONGODB_URI The MongoDB Connection String (with credentials and database name)
• WEB_URI The URL of your web app.
• CLOUDINARY_URL (optional, Cloudinary only) Cloudinary environment variable for configuration. See this.
• NODEMAILER_CONFIG (optional, if using nodemailer only) JSON stringified nodemailer config. eg. {"service":"Gmail","auth":{"user":"[email protected]","pass":"aHR0cHM6Ly95b3V0dS5iZS9kUXc0dzlXZ1hjUQ=="}}

License

The project is released under the MIT open-source License.

Resources

1. The Project Source code
2. Next.js