6 projects to understand Next.js core concepts, using MongoDB, Firebase and NextAuth.js.

A social networking site using Next.js, MongoDB and Firebase.

See Demo deployed on Vercel

See 01-nextevents folder

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

See Demo deployed on Vercel

See 02-blog folder

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

See 03-dashboard folder

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

See 04-reactmeetups folder

• 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 Demo deployed on Vercel

See Strapi API deployed on Railway

See 05-djevents folder

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

See 06-devspace folder

• 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)