Next.js Projects is a GitHub repository (boilerplate collection) of seven example applications that teach Next.js core concepts through hands-on code, covering MongoDB, Firebase, NextAuth.js, Strapi CMS, Tailwind CSS, and TypeScript.
What is Next.js Projects?
Next.js Projects is a learning-focused repository by developer solygambas, built from three popular courses: Maximilian Schwarzmüller's "Next.js & React - The Complete Guide" and Brad Traversy's "Next.js Dev to Deployment" and "Next.js From Scratch". It contains seven independent Next.js applications, each demonstrating specific features: NextEvents (social networking with MongoDB and Firebase), Blog (markdown blog with MongoDB), Dashboard (NextAuth.js authentication), React Meetups (SSG/SSR), DJ Events (Strapi CMS backend), DevSpace (Tailwind blog), and Property Pulse (MongoDB, TypeScript, property rentals). Each project folder includes a full Next.js app with source code, and four of them have live demos deployed on Vercel.
What makes Next.js Projects stand out?
- File-based routing and dynamic routes — every project exercises Next.js routing, including dynamic pages for posts, events, properties, and meetups.
- Static Site Generation and Server-Side Rendering — NextEvents and React Meetups use getStaticProps, getStaticPaths, and revalidation to pre-render pages; NextEvents also demonstrates SSR and client-side data fetching with SWR.
- MongoDB integration — NextEvents, Blog, React Meetups, and Property Pulse connect to MongoDB (including MongoDB Atlas) for storing events, messages, meetups, properties, and users.
- Authentication with NextAuth.js — Dashboard, DJ Events, and Property Pulse show custom auth providers, Google OAuth, JWT in HttpOnly cookies, route guards, and session management.
- Headless CMS with Strapi — DJ Events uses Strapi CMS as its backend, hosted on Render, with Cloudinary for image hosting and MapQuest/Mapbox for maps.
- Markdown blogging — Blog and DevSpace read markdown files, parse frontmatter with gray-matter, and render post content with react-markdown or Marked.
- Tailwind CSS styling — DevSpace and Property Pulse are styled with Tailwind CSS; Property Pulse adds React Icons, React Spinners, React Toastify, react-share, and react-photoswipe-gallery.
Who is it for?
- Next.js beginners — developers who want to learn core concepts by reading and modifying complete example apps rather than starting from scratch.
- Developers learning full-stack React — those looking for practical examples of API routes, database queries, authentication, and deployment on Vercel.
- Course students — learners following Maximilian Schwarzmüller's and Brad Traversy's Next.js courses will find matching projects to study.
What can you do with Next.js Projects?
- Understand SSG vs SSR — compare how NextEvents and React Meetups implement static generation with revalidation and server-side rendering in real projects.
- Build a CMS-driven site — DJ Events shows how to set up Strapi CMS, define content types, upload images to Cloudinary, and secure API routes.
- Implement authentication — Dashboard and Property Pulse demonstrate NextAuth.js with Google OAuth, custom credentials, route protection, and password hashing with bcryptjs.
- Create a markdown blog — Blog and DevSpace show how to parse markdown files, generate post paths, add syntax highlighting, and handle pagination and search.
