Next.js ❤️ MongoDB

An Next.js and MongoDB web application, designed with simplicity for learning and real-world applicability in mind.

🚀 Check out the demo 🚀

Features

🐇 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

🔒 Authentication and Account

^{without passportjs: a1747b7 with passportjs: master}

Session-based authentication
Sign up/Sign 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, name, bio, email
Update user profile

👀 Social

View others' profiles and posts
Public postings like Twitter and Facebook

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

Guide

This project accompanies the following posts:

Also check them out on dev.to.

Note: Some of the detail in the posts above might not be up to date due to breaking changes in libraries used in this projects. See #125.

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

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
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.
express-session, connect-mongo - required for session, may be replaced with other session libraries such as cookie-session or next-iron-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.

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.
SESSION_SECRET (only if you use express-session) The secret to be used in express-session.
CLOUDINARY_URL (optional, Cloudinary only) Cloudinary environment variable for configuration. See this.
NODEMAILER_CONFIG (optional, if using nodemailer only) JSON stringified nodemailer config. See .env.example.

Development

Start the development server by running yarn dev or npm run dev. Getting started by create a .env.local file with the above variables. See Environment Variables.

`.env.local`

I include my own 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.local.

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.local.

It is at upmost importance that you do not reuse these variables in production. Especially, the database in use is public so its data is visible to all.

Deployment

This project can be deployed anywhere Next.js can be deployed. Make sure to set the environment variables using the options provided by your cloud/hosting providers.

After building using npm run build, simply start the server using npm run start.

You can also deploy this with serverless providers given the correct setup.

Contributing

Please see my contributing.md.

License

MIT

tdbrian / nextjs-mongodb-app