6 projects to understand Next.js core concepts, using MongoDB, Firebase and NextAuth.js.
| # | Project | Description |
|---|---|---|
| 01 | NextEvents | A social networking site using Next.js, MongoDB and Firebase. |
| 02 | Blog | A complete app example with a blog using Next.js, MongoDB, Markdown and React Syntax Highlighter. |
| 03 | Dashboard | A very simple dashboard to understand authentication with NextAuth.js. |
| 04 | React Meetups | Another social networking site to summarize Next.js core concepts. |
| 05 | DJ Events | A music event website using Strapi CMS as backend. |
| 06 | DevSpace | Another blog using Tailwind CSS and Markdown. |
A social networking site using Next.js, MongoDB and Firebase.
- working with file-based routing and handling dynamic routes.
- creating a general layout, adding React components and styling them with CSS modules.
- displaying events and filtering them by date.
- adding Static Site Generation (SSG) on the home page.
- fetching events from Firebase and enabling page pre-rendering for dynamic pages.
- using Server-Side Rendering (SSR) and client-side data fetching with SWR.
- adding metadata with Head.
- customizing the _app.js and _document.js files.
- optimizing images with Image.
- handling comments and signups for the newsletter with API routes.
- setting up a MongoDB database and getting comments for a specific event.
- handling errors and displaying user-friendly notifications.
- deploying on Vercel.
A complete app example with a blog using Next.js, MongoDB, Markdown and React Syntax Highlighter.
- building the home page, creating a general layout and a reusable grid to display the latest posts.
- reading markdown files and rendering posts as JSX with gray-matter and react-markdown.
- displaying dynamic post pages and generating paths.
- optimizing images from markdown with Image.
- rendering code snippets from markdown and optimizing React Syntax Highlighter bundle size.
- handling messages sent by users via an API route.
- storing messages in a database with MongoDB.
- adding metadata in Head and customizing _document.js file.
- using React portals to show user-friendly notifications.
- deploying on Vercel.
A very simple dashboard to understand authentication with NextAuth.js.
- adding a user signup API route and sending signup requests from the frontend.
- hashing passwords with Bcryptjs.
- working with a custom auth provider in NextAuth.js to log in users.
- managing active sessions and handling logouts.
- protecting routes with client-side and server-side page guards.
- protecting API routes.
- enabling users to change their passwords.
Another social networking site to summarize Next.js core concepts.
- converting a React project into a Next.js app.
- handling server-side rendering of pages with getStaticProps and getStaticPaths.
- connecting and querying a MongoDB Database via an API route.
- getting data from the database for page pre-rendering.
- working with fallback pages and revalidation to display new meetups without having to rebuild.
A music event website using Strapi CMS as backend.
See Strapi API deployed on Railway
- creating a Next.js app with a custom layout.
- handling module aliases with jsconfig.
- fetching data with API routes, displaying events and event details.
- setting up Strapi CMS and defining event content type.
- hosting uploaded images on Cloudinary.
- connecting to the Strapi API, filtering events, enabling search and pagination.
- adding, editing and deleting event.
- creating a slug and displaying user-friendly messages with React Toastify.
- handling image upload with a modal using React Portal.
- authenticating users, storing JWT token in server HttpOnly cookie.
- registering users and creating an auth context.
- protecting Strapi API routes and customizing user events endpoint.
- creating a user dashboard and associating events with users.
- guarding routes to add, edit, delete event and upload image.
- displaying maps with MapQuest Geocoding API, Mapbox and ReactMapGL.
- deploying Strapi backend on Railway.
- deploying frontend on Vercel.
Another blog using Tailwind CSS and Markdown.
- setting up Tailwind CSS with Next.js.
- getting markdown files and parsing frontmatter with gray-matter.
- displaying single blog posts with Marked.
- handling pagination and creating category pages.
- displaying a category sidebar.
- handling searches with an API route.
- caching posts on each commit with Husky.
This repository is based on 2 courses:
- Next.js & React - The Complete Guide by Maximilian Schwarzmüller (2021)
- Next.js Dev to Deployment by Brad Traversy (2021)