DEV Community

Cover image for 12 Github Repositories To Master NextJS πŸ†
Random
Random

Posted on

12 Github Repositories To Master NextJS πŸ†

"Learn from the Other's Code"

Hey Coders, it's me Md Taqui Imam. In today's blog, I want to share some of the best GITHUB repositories to learn NEXTJS.

NextJS is a popular JavaScript framework that allows us to build dynamic sites and apps with React.


And Don't forget to Visit HTMLrev πŸ‘‡ Once

Free HTML Templates for Websites on HTMLrev

Discover carefully selected free HTML templates for websites, landing pages, one pagers, coming soon, blogs, portfolios, ecommerce and dashboards.

favicon htmlrev.com

Get Free TemplatesπŸ”₯


And Don't forget to drop a (πŸ”₯πŸ’–πŸ¦„πŸš€πŸ€―) and save it for later πŸ“Œ.

Let's check out and Star⭐ these top projectsπŸ“

So First is πŸ‘‡


1. Notion Clone

Build a SaaS App with Realtime cursors, Nextjs 13, Stripe, Drizzle ORM, Tailwind, Supabase, Sockets

Application Logo

🟒 Full Video πŸ”΄ Demo
Full Video Demo

Get all the help you need

Join the Community for FREE if you want to learn how to make money this year with websites! Share all bugs and solutions in the discord. Would love to collaborate and get to know talented developers like yourself Discord

Features in this application.

  • 🀯 Real-time cursors
  • πŸ“ Real-time text selection
  • ⏱️ Real-time database and collaboration
  • 🟒 Real-time presence
  • πŸ—‘οΈ Move to trash functionality
  • 😜 Custom emoji picker
  • πŸŒ™ Light mode dark mode
  • 🚨 Next.js 13 app router
  • πŸ—ΊοΈ Creating free plan restrictions
  • πŸ’° Take monthly payments
  • πŸ“§ Custom email 2FA invitation
  • ⚑️ Supabase Row level policy
  • πŸ‘¨β€πŸ‘¨β€πŸ‘§β€πŸ‘¦ Real-time Collaboration
  • πŸ‘Ύ Deployment
  • πŸ€‘ Custom Rich text editor
  • πŸ“š Update profile settings
  • πŸ“ Manage payments in a portal
  • πŸ” Custom Authentication
  • ✳️ Websockets
  • …

This is a SaaS App with Realtime cursors, Nextjs 13, Stripe, Drizzle ORM, Tailwind, Supabase, Sockets. It has various features like:

  • πŸ—ΊοΈ Creating free plan restrictions
  • πŸ’° Take monthly payments
  • πŸ“§ Custom email 2FA invitation
  • ⚑️ Supabase Row level policy
  • πŸ‘¨β€πŸ‘¨β€πŸ‘§β€πŸ‘¦ Real-time Collaboration
  • πŸ‘Ύ Deployment
  • πŸ€‘ Custom Rich text editor
  • πŸ“š Update profile settings
  • πŸ“ Manage payments in a portal
  • πŸ” Custom Authentication
  • etc......

2. Nextjs Simple Portfolio with Shadcn UI

GitHub logo taqui-786 / Portfolio

A Simple Portfolio made with Nextjs and Shadcn UI

Project Portfolio

A simple and Beautiful Porfolio made with Nextjs and Shadcn Ui.

Demo

Getting Started

First, run the development server:

npm run dev
# or
yarn dev
# or
pnpm dev
# or
bun dev
Enter fullscreen mode Exit fullscreen mode

Open http://localhost:3000 with your browser to see the result.

You can start editing the page by modifying app/page.tsx. The page auto-updates as you edit the file.

This project uses next/font to automatically optimize and load Inter, a custom Google Font.




This portfolio site was build with Nextjs + ShadcnUI = πŸ”₯ . It features a clean design made with Tailwind CSS and includes pages like about, projects, resume and contact.

As someone learning web development, a portfolio is very important to showcase your skills. This is a perfect starter portfolio template to get inspired from!


3. digitalhippo -A ecommerce app with Admin Dasboard

GitHub logo joschan21 / digitalhippo

A Modern Fullstack E-Commerce Marketplace for Digital Products

DigitalHippo - A Modern Fullstack E-Commerce Marketplace for Digital Products

Built with the Next.js 14 App Router, tRPC, TypeScript, Payload & Tailwind

Project Image

Features

  • πŸ› οΈ Complete marketplace built from scratch in Next.js 14
  • πŸ’» Beautiful landing page & product pages included
  • 🎨 Custom artwork included
  • πŸ’³ Full admin dashboard
  • πŸ›οΈ Users can purchase and sell their own products
  • πŸ›’ Locally persisted shopping cart
  • πŸ”‘ Authentication using Payload
  • πŸ–₯️ Learn how to self-host Next.js
  • 🌟 Clean, modern UI using shadcn-ui
  • βœ‰οΈ Beautiful emails for signing up and after purchase
  • βœ… Admins can verify products to ensure high quality
  • ⌨️ 100% written in TypeScript
  • 🎁 ...much more

Getting started

To get started with this project, run

  git clone https://github.com/joschan21/digitalhippo.git
Enter fullscreen mode Exit fullscreen mode

and copy the .env.example variables into a separate .env file, fill them out & and that's all you need to get started!

Acknowledgements

  • Payload for making this project possible

License

MIT




DigitalHippo is an amazing ecommerce app built with NextJS, Stripe and other popular technologies. It allows users to sell and purchase digital products online.

I was amazed by features like product categories, admin dashboard and checkout process. The code is very clean and well organized too.

For anyone wanting to build an online store, this is a must study project to understand integration of payments and marketplace functionality.


4. Discord clone in Nextjs 13

Fullstack Discord Clone: Next.js 13, React, Socket.io, Prisma, Tailwind, MySQL | Full Course 2023

Copy of Copy of Copy of Fullstack Twitter Clone (5)

This is a repository for Fullstack Discord Clone: Next.js 13, React, Socket.io, Prisma, Tailwind, MySQL | Full Course 2023

VIDEO TUTORIAL

Features:

  • Real-time messaging using Socket.io
  • Send attachments as messages using UploadThing
  • Delete & Edit messages in real time for all users
  • Create Text, Audio and Video call Channels
  • 1:1 conversation between members
  • 1:1 video calls between members
  • Member management (Kick, Role change Guest / Moderator)
  • Unique invite link generation & full working invite system
  • Infinite loading for messages in batches of 10 (tanstack/query)
  • Server creation and customization
  • Beautiful UI using TailwindCSS and ShadcnUI
  • Full responsivity and mobile UI
  • Light / Dark mode
  • Websocket fallback: Polling with alerts
  • ORM using Prisma
  • MySQL database using Planetscale
  • Authentication with Clerk

Prerequisites

Node version 18.x.x

Cloning the repository

git clone https://github.com/AntonioErdeljac/next13-discord-clone.git
Enter fullscreen mode Exit fullscreen mode

Install packages

npm i
Enter fullscreen mode Exit fullscreen mode

Setup .env file

NEXT_PUBLIC_CLERK_PUBLISHABLE_KEY
…
Enter fullscreen mode Exit fullscreen mode

A Full Stack Discord clone build with Next.js 13, React, Socket.io, Prisma, Tailwind, MySQL ..

This project shows how to code a messaging platform similar to Discord using NextJS, Socket.io and other tools.

I think the live chat and realtime presence is so cool to have in an app. Learning how websockets work under the hood can really enhance your skills.


5. Ecommerce Platform with Nextjs 14

GitHub logo adrianhajdin / ecommerce

Learn how to build an incredible e-commerce webshop with an admin dashboard and CMS using Next 14, Stripe, TypeScript, and Payload CMS.




This project help you to learn to Build and Deploy a full stack E-commerce App with an Admin Dashboard, CMS & Stripe.

This repository contains the code for a f*ull-featured ecommerce site* with admin dashboard and CMS.

Features like product management, user roles and payments integration are built following best practices.


6. Twitch Clone in Nextjs 14

Fullstack Twitch Clone: Next.js 14, Livestreaming, React, Prisma, Stripe, Tailwind, MySQL

Twitch Clone Thumbnail (3)

This is a repository for Fullstack Trello Clone: Next.js 14, Livestreaming, React, Prisma, Stripe, Tailwind, MySQL

VIDEO TUTORIAL

Key Features:

  • πŸ“‘ Streaming using RTMP / WHIP protocols
  • 🌐 Generating ingress
  • πŸ”— Connecting Next.js app to OBS / Your favorite streaming software
  • πŸ” Authentication
  • πŸ“Έ Thumbnail upload
  • πŸ‘€ Live viewer count
  • 🚦 Live statuses
  • πŸ’¬ Real-time chat using sockets
  • 🎨 Unique color for each viewer in chat
  • πŸ‘₯ Following system
  • 🚫 Blocking system
  • πŸ‘’ Kicking participants from a stream in real-time
  • πŸŽ›οΈ Streamer / Creator Dashboard
  • 🐒 Slow chat mode
  • πŸ”’ Followers only chat mode
  • πŸ“΄ Enable / Disable chat
  • πŸ”½ Collapsible layout (hide sidebars, chat etc, theatre mode etc.)
  • πŸ“š Sidebar following & recommendations tab
  • 🏠 Home page recommending streams, sorted by live first
  • πŸ” Search results page with a different layout
  • πŸ”„ Syncing user information to our DB…

This project shows how to develop a live streaming platform similar to Twitch with features like broadcasting, comments and more.

Streaming video in realtime seems very challenging but the code is cleanly structured.

Learning how services like LiveKit and websockets are leveraged here can definitely help budding developers produce innovative products.


7. LMS Platform with Nextjs

Build an LMS Platform: Next.js 13, React, Stripe, Mux, Prisma, Tailwind, MySQL | Full Course 2023

Copy of Copy of Copy of Copy of Fullstack Twitter Clone (9)

This is a repository for Build an LMS Platform: Next.js 13, React, Stripe, Mux, Prisma, Tailwind, MySQL | Full Course 2023

VIDEO TUTORIAL

Key Features:

  • Browse & Filter Courses
  • Purchase Courses using Stripe
  • Mark Chapters as Completed or Uncompleted
  • Progress Calculation of each Course
  • Student Dashboard
  • Teacher mode
  • Create new Courses
  • Create new Chapters
  • Easily reorder chapter position with drag n’ drop
  • Upload thumbnails, attachments and videos using UploadThing
  • Video processing using Mux
  • HLS Video player using Mux
  • Rich text editor for chapter description
  • Authentication using Clerk
  • ORM using Prisma
  • MySQL database using Planetscale

Prerequisites

Node version 18.x.x

Cloning the repository

git clone https://github.com/AntonioErdeljac/next13-lms-platform.git
Enter fullscreen mode Exit fullscreen mode

Install packages

npm i
Enter fullscreen mode Exit fullscreen mode

Setup .env file

NEXT_PUBLIC_CLERK_PUBLISHABLE_KEY=
CLERK_SECRET_KEY=
NEXT_PUBLIC_CLERK_SIGN_IN_URL=
NEXT_PUBLIC_CLERK_SIGN_UP_URL=
NEXT_PUBLIC_CLERK_AFTER_SIGN_IN_URL=
NEXT_PUBLIC_CLERK_AFTER_SIGN_UP_URL=
DATABASE_URL=

UPLOADTHING_SECRET=
UPLOADTHING_APP_ID=

MUX_TOKEN_ID=
MUX_TOKEN_SECRET=

STRIPE_API_KEY
…
Enter fullscreen mode Exit fullscreen mode

An LMS or learning management system platform built with Nextjs, React, Stripe, Mux, Prisma, Tailwind, MySQL etc.

Key Features :

  • Browse & Filter Courses
  • Purchase Courses using Stripe
  • Mark Chapters as Completed or Uncompleted
  • Progress Calculation of each Course
  • Student Dashboard
  • Teacher mode
  • Create new Courses
  • Create new Chapters
  • Easily reorder chapter position with drag n’ drop
  • Upload thumbnails, attachments and videos using UploadThing
  • Video processing using Mux
  • HLS Video player using Mux
  • Rich text editor for chapter description
  • Authentication using Clerk
  • ORM using Prisma
  • MySQL database using Planetscale.

8. Once more an E-commerce app with Nextjs

This is a Next.js project bootstrapped with create-next-app.

Getting Started

First, run the development server:

npm run dev
# or
yarn dev
# or
pnpm dev
Enter fullscreen mode Exit fullscreen mode

Open http://localhost:3000 with your browser to see the result.

You can start editing the page by modifying app/page.js. The page auto-updates as you edit the file.

This project uses next/font to automatically optimize and load Inter, a custom Google Font.

Learn More

To learn more about Next.js, take a look at the following resources:

You can check out the Next.js GitHub repository - your feedback and contributions are welcome!

Deploy on Vercel

The easiest way to deploy your Next.js app is to use the Vercel Platform from the creators of Next.js.

Check out our Next.js deployment documentation for more details.




This E-commerce app is good for Beginners developers to practice how things works.

The project structure and integration of features like cart, products and checkout are put together thoughtfully while maintaining performance.


9. itZmyLink

GitHub logo taqui-786 / itZmyLink

The Project is Live at

This is a Next.js project bootstrapped with create-next-app.

Getting Started

First, run the development server:

npm run dev
# or
yarn dev
# or
pnpm dev
Enter fullscreen mode Exit fullscreen mode

Open http://localhost:3000 with your browser to see the result.

You can start editing the page by modifying app/page.tsx. The page auto-updates as you edit the file.

This project uses next/font to automatically optimize and load Inter, a custom Google Font.

Learn More

To learn more about Next.js, take a look at the following resources:

You can check out the Next.js GitHub repository - your feedback and contributions are welcome!

Deploy on Vercel

The easiest way to deploy your Next.js app is to use the Vercel Platform from the creators of Next.js.

Check out our Next.js deployment documentation for more details.




This is a social media reference landing page application developed with NextJS 13. I think services like these popularized by Linktree are very useful.

Studying clean coding practices in this project will build a strong foundation.

Learning how to d*eploy on platforms like Vercel* is also valuable as web developers nowadays.


10. Blogging app

A simple blogging platform created with NextJS and Hugo. Writing blogs and documentation is an important part of all tech careers.

This project can teach us good habits like markdown syntax and how static site generation works. It's the perfect starting point for learning content management and publishing flows.


11. quill - A SaaS-Platform

GitHub logo joschan21 / quill

Quill - A Modern SaaS-Platform Built With Next.js 13

Quill - A Modern Fullstack SaaS-Platform

Built with the Next.js 13.5 App Router, tRPC, TypeScript, Prisma & Tailwind

Project Image

Features

  • πŸ› οΈ Complete SaaS Built From Scratch
  • πŸ’» Beautiful Landing Page & Pricing Page Included
  • πŸ’³ Free & Pro Plan Using Stripe
  • πŸ“„ A Beautiful And Highly Functional PDF Viewer
  • πŸ”„ Streaming API Responses in Real-Time
  • πŸ”’ Authentication Using Kinde
  • 🎨 Clean, Modern UI Using 'shadcn-ui'
  • πŸš€ Optimistic UI Updates for a Great UX
  • ⚑ Infinite Message Loading for Performance
  • πŸ“€ Intuitive Drag n’ Drop Uploads
  • ✨ Instant Loading States
  • πŸ”§ Modern Data Fetching Using tRPC & Zod
  • 🧠 LangChain for Infinite AI Memory
  • 🌲 Pinecone as our Vector Storage
  • πŸ“Š Prisma as our ORM
  • πŸ”€ 100% written in TypeScript
  • 🎁 ...much more

Getting started

To get started with this project, run

  git clone https://github.com/joschan21/quill.git
Enter fullscreen mode Exit fullscreen mode

and copy the .env.example variables into a separate .env file, fill them out & and that's all…

A note-taking Web app that allows users to easily capture notes with images, formatting and more.

Key Features :

  • πŸ› οΈ Complete SaaS Built From Scratch
  • πŸ’» Beautiful Landing Page & Pricing Page Included
  • πŸ’³ Free & Pro Plan Using Stripe
  • πŸ“„ A Beautiful And Highly Functional PDF Viewer
  • πŸ”„ Streaming API Responses in Real-Time
  • πŸ”’ Authentication Using Kinde
  • 🎨 Clean, Modern UI Using 'shadcn-ui'
  • πŸš€ Optimistic UI Updates for a Great UX
  • ⚑ Infinite Message Loading for Performance
  • πŸ“€ Intuitive Drag n’ Drop Uploads
  • ✨ Instant Loading States
  • πŸ”§ Modern Data Fetching Using tRPC & Zod
  • 🧠 LangChain for Infinite AI Memory
  • 🌲 Pinecone as our Vector Storage
  • πŸ“Š Prisma as our ORM
  • πŸ”€ 100% written in TypeScript
  • 🎁 ...much more.

12. Friendz - A social media app

GitHub logo taqui-786 / project-friendz

A Social Media Platform made with Nextjs, Redis and Authjs etc.

This is a Next.js project with Shadcn ui create-next-app.

Best Project To Begineer to learn =>

Nextsjs

Typescript

Shadcn ui [https://ui.shadcn.com/]

Editorjs [https://editorjs.io/]

@mantine/hooks [https://www.npmjs.com/package/@mantine/hooks]

useform-hooks

Getting Started

First, run the development server:

npm run dev
# or
yarn dev
# or
pnpm dev
Enter fullscreen mode Exit fullscreen mode

Open http://localhost:3000 with your browser to see the result.

You can start editing the page by modifying app/page.tsx. The page auto-updates as you edit the file.

This project uses next/font to automatically optimize and load Inter, a custom Google Font.

Learn More

To learn more about Next.js, take a look at the following resources:

You can check out the Next.js GitHub repository - your feedback and contributions are welcome!




A social media application built with NextJS, Editorjs, Taiwindcss and other tools.

Features like

  • authentication
  • profiles
  • Like , Comment and Follow
  • realtime feed
  • Redis
  • Prisma ORM
  • Much more

That's it πŸ‘‹

These are the best Github repositories for mastering nextjs and lerning how things work in real in techs.

Studying projects created by skilled developers will definitely accelerate our skills with NextJS.

I hope this list provided you some inspiration to become experts with this wonderful framework!

Please let me know if you need any help exploring these repositories.


github

twitter

portfolio

buymeacoffee

Top comments (6)

Collapse
 
usulpro profile image
Oleg Proskurin

Thanks for this list! πŸ‘
These projects seem to be pretty complex and cover pretty much helpful functionality. But for those who want just to start with the basics of the new app router, I'd suggest exploring this one: github.com/focusreactive/MVP-NextJ...

Collapse
 
random_ti profile image
Random

Thank you so much for your great suggestion for beginners πŸ’–

Collapse
 
devluc profile image
Devluc

Awesome article Taqui. Thank you very much for mentioning HTMLrev. I really appreciate the support

Collapse
 
random_ti profile image
Random

You'r welcome Iucian πŸ’–

Collapse
 
codingleo profile image
Leonardo Ribeiro

Fantastic list! Thanks for sharing! πŸ€œπŸ½πŸ€›πŸ½

Collapse
 
random_ti profile image
Random

You'r welcome Leonardo πŸ’–