Next.js ❤️ MongoDB

A full-fledged app made with Next.js and MongoDB

🚀 Check out the demo

Features

✔️ No Express.js ✔️ Serverless ready ✔️ API Routes ✔️ Middleware

🔒 Authentication

^{without passportjs: a1747b7 with passportjs: master}

• Session
• Sign up/Sign in/Sign out

👩👨 Profile

• Profile picture, name, bio, email
• Edit profile

🔧 Account

• Email verification
• Password change
• Password reset

^{Have any features that interest you, make an issue. Would like to work on a feature, make a PR.}

Guide

Before getting started, I welcome you to read this issue on production readiness. The goal is not to use this project as it, but to implement your own version.

This project accompanies the following posts:

• How I build a full-fledged app with Next.js and MongoDB Part 1: User authentication
• How I build a full-fledged app with Next.js and MongoDB Part 2: User profile and Profile Picture
• How I build a full-fledged app with Next.js and MongoDB Part 3: Email Verification, Password Reset/Change

Also check them out on dev.to.

Note: Part 1 and Part 2 are written without next-connect and only apply to commits before db910c2.

The project is designed to as simple as possible for the learning purpose. Due to its simplicity, aspects such as security must be reconsidered before being pushed to production.

Dependencies

This project uses the following dependencies:

• next.js - v9 or above required for API Routes.
• react - v16.8 or above required for react hooks.
• react-dom - v16.8 or above.
• mongodb - may be replaced by mongoose.
• passport, passport-local - required after #39 for authentication
• next-connect - recommended if you want to use Express/Connect middleware and easier method routing.
• isomorphic-unfetch - optional, may be replaced with any request library.
• next-session, connect-mongo - required, may be replaced with any compatible session library (ex. express-session).
• bcryptjs - optional, may be replaced with any password-hashing library. argon2 recommended.
• validator - optional but recommended.
• multer - may be replaced with any middleware that handles multipart/form-data
• cloudinary - optional, only if you are using Cloudinary for image upload.
• @sendgrid/mail - optional, only if you are using SendGrid to send emails.

Environmental variables

The environment variables will be inlined during build time and thus should not be used in front-end codebase.

Required environmental variables in this project include:

• process.env.MONGODB_URI The MongoDB Connection String (with credentials)
• process.env.EMAIL_FROM The email address to send your emails from.
• process.env.DB_NAME The name of the MongoDB database to be used.
• process.env.WEB_URI The URL of your web.
• process.env.CLOUDINARY_URL (optional, Cloudinary only) Cloudinary environment variable for configuration. See this.
• process.env.SENDGRID_API_KEY (optional, SendGrid only) SendGrid API Key. See this.

Development

Start the development server by running yarn dev or npm run dev. The project supports using .env. Getting started by create a .env file with the above variables.

Styles (CSS): This project does not contain any stylesheets, and no component has classes. To remove the style, simply remove all <style jsx> and <style jsx global> tags.

.env

I include my own MongoDB, Cloudinary, SendGrid environment variables in .env.example for experimentation purposes. Please replace them with your owns and refrain from sabotaging them. You can try them in development by renaming it into .env.

In production, it is recommended to set the environment variables using the options provided by your cloud/hosting providers. Do not use or commit .env.

Contributing

Please see my contributing.md.

License

MIT