NextJS MongoDB MUI Boilerplate

What is NextJS MongoDB MUI Boilerplate?

NextJS MongoDB MUI Boilerplate is an open-source starter template that combines Next.js 13, Mongoose 7, and Material UI 5 to provide a full-stack foundation with session-based authentication and Storybook coverage. It takes a fresh repository clone and produces a runnable web app with API routes, user authentication, and profile management, deployable to serverless platforms like Vercel. The project is MIT-licensed and acknowledges hoangvvo's Next.js MongoDB boilerplate as its base.

What makes this boilerplate stand out?

This boilerplate distinguishes itself with a minimal setup, an MVC architecture, and full integration of Material UI v5 with no custom CSS. It includes a complete authentication flow, Storybook stories, and serverless-ready API routes.

• MVC Architecture — separates models, views, and controllers for maintainable code organization.
• Automatic dark/light mode — follows the system theme with Material UI's default palette, requiring no custom CSS.
• Full API Routes implementation — uses Next.js API routes that are serverless-ready.
• Express-compatible middleware — powered by next-connect, so you can reuse existing Express middleware.
• Session-based authentication — Passport.js handles sign up, login, logout, email verification, password change, and password reset via email.
• User profiles — includes profile picture (via optional Cloudinary), username, name, bio, and email, with update functionality.
• Storybook 7 coverage — all pages and components have stories for visual testing and documentation.
• Testing setup — Jest combined with MongoDB Memory Server for database isolation in tests.

Who should use this boilerplate?

Developers starting a new full-stack Next.js application will benefit from having authentication and database setup already wired. Teams deploying to serverless platforms can use the API routes and middleware pattern directly. Projects that rely on Material UI for theming and components will appreciate the minimal custom CSS.

• Developers starting a new Next.js app — get a pre-built authentication system and database connection without wiring Passport.js and Mongoose from scratch.
• Serverless-focused teams — use the API routes and middleware pattern for easy deployment to Vercel or other serverless hosts.
• Design-system-centric projects — Material UI v5 is integrated with minimal custom CSS, so teams can rely on MUI's theming.

What can you do with this boilerplate?

With this boilerplate, you can launch a secure full-stack application quickly, prototype new ideas, or learn how to structure a Next.js project.

• Launch a SaaS or dashboard — the authentication and profile features give you a secure login system out of the box.
• Prototype a product — run yarn dev to get a local dev server, and use Storybook to develop UI components in isolation.
• Learn full-stack patterns — study how API routes, middleware, and database models fit together in a Next.js project.

How does it work?

Clone the repository, create a .env.local file with MONGODB_URI, WEB_URI, and NODEMAILER_CONFIG (optionally CLOUDINARY_URL), then run yarn dev. The boilerplate connects to MongoDB via Mongoose 7, sets up Passport.js session-based auth, and exposes API routes for signup, login, logout, email verification, password reset, and profile updates. All pages and components come with Storybook stories, which you can view with yarn storybook.

Pricing

This is a free, open-source boilerplate released under the MIT license. There are no paid tiers or premium features; you can use it for any personal or commercial project.

Alternatives

• hoangvvo's Next.js MongoDB boilerplate — the project this boilerplate is based on.

FAQ

Is this boilerplate free to use?

Yes, it is open source under the MIT license, so you can use, modify, and distribute it freely for personal or commercial purposes. There are no hidden fees or premium tiers, and you don't need to provide attribution in your derivative projects.

What environment variables are required?

To run the project, you need to set MONGODB_URI to your MongoDB connection string, WEB_URI to your web app's URL, and NODEMAILER_CONFIG to a JSON stringified nodemailer configuration. CLOUDINARY_URL is optional and only needed if you plan to use Cloudinary for profile picture uploads.

Does it include authentication?

Yes, it includes full session-based authentication using Passport.js. Users can sign up with an email and password, verify their email address, log in and out, change or reset their password, and update their profile information. The authentication routes are implemented as Next.js API routes, so they are serverless compatible.

What styling system does it use?

It uses Material UI v5 as the design system with the default theme and colors, and minimal custom CSS. The boilerplate includes automatic dark/light mode based on the system's color scheme. All components are plain MUI components, making it easy to customize with MUI's theming tools.

Can I deploy this to Vercel?

Yes, the API routes are serverless-ready, and the demo application is deployed on Vercel. To deploy, connect your repository to Vercel, set the required environment variables (MONGODB_URI, WEB_URI, NODEMAILER_CONFIG, optional CLOUDINARY_URL), and Vercel will handle the rest. The project uses Next.js 13, so it works with Vercel's build system.