Hey everyone! 👋 Today I want to share 5 awesome Github repos that will help you master Next.js.
Next.js is so cool - it makes building React apps easy and fun! 🤩
So, let's see them 👇
1. Taxonomy
shadcn-ui
/
taxonomy
An open source application built using the new router, server components and everything new in Next.js 13.
Taxonomy
An open source application built using the new router, server components and everything new in Next.js 13.
Warning This app is a work in progress. I'm building this in public. You can follow the progress on Twitter @shadcn See the roadmap below.
About this project
This project as an experiment to see how a modern app (with features like authentication, subscriptions, API routes, static pages for docs ...etc) would work in Next.js 13 and server components.
This is not a starter template.
A few people have asked me to turn this into a starter. I think we could do that once the new features are out of beta.
Note on Performance
Warning This app is using the unstable releases for Next.js 13 and React 18. The new router and app dir is still in beta and not production-ready Expect some performance hits when testing the dashboard If…
This repo by shadcn-ui is an open source app built with Next.js 13
It uses all the latest features like the new router, server components, and more. You'll learn a ton studying this code! It also looks super modern and has nice UI components. 💅
2. Skateshop
Skateshop
This is an open source e-commerce skateshop build with everything new in Next.js 13. It is bootstrapped with create-t3-app.
Warning This project is still in development and is not ready for production use.
It uses new technologies (drizzle ORM) which are subject to change and may break your application.
Tech Stack
- Framework: Next.js
- Styling: Tailwind CSS
- User Management: Clerk
- ORM: Drizzle ORM
- UI Components: shadcn/ui
- Email: React Email
- Content Management: Contentlayer
- File Uploads: uploadthing
- Payments infrastructure: Stripe
Features to be implemented
- Authentication with Clerk
- File uploads with uploadthing
- Newsletter subscription with React Email and Resend
- Blog using MDX and Contentlayer
- ORM using Drizzle ORM
- Database on PlanetScale
- Validation with Zod
- Storefront with products, categories, and subcategories
- Seller and customer workflows
- User subscriptions with Stripe
- Checkout with Stripe Checkout
- Admin dashboard with stores, products, orders, subscriptions, and payments
Running Locally
-
Clone the repository
git clone https://github.com/sadmann7/skateshop.git
-
Install dependencies using…
If you want to build an ecommerce store, check out this open source skateshop by sadmann7:
It uses Next.js 13 and has a real storefront, products, cart and checkout! I want to build a shop just like this someday. 🛹
3. Portfolio Website
ByteGrad
/
portfolio-website
Build & Deploy a modern React / Next.js portfolio website from scratch!
Watch video here
What you will learn
- Latest Next.js 13 features
- Next.js App Router
- Next.js Server Actions
- Client & Server Components
- TypeScript (Beginner & Intermediate)
- Tailwind CSS
- Context API
- Advanced Animations with Framer Motion
- React.Email & Resend
- Custom React hooks
- Fresh, modern UI design
- Light & Dark mode
- Responsive website
Important
If you want to be a professional developer, you have to know the fundamentals like JavaScript and CSS really well. I highly recommend you go through my Professional JavaScript and Professional CSS courses.
I'm close to releasing a complete React & Next.js course. Get on the email list to receive early-bird pricing: link.
Setup
- Add RESEND_API_KEY environment variable in .env.local
- In the send-email.ts action file, change the "to" email to your own email
Looking to create a personal portfolio? Follow this project by ByteGrad
It shows how to make a fast, good-looking portfolio site with Next.js and React. You'll pick up tips for animations, design, configs, and more! 🎨
4. Friendz
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
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:
- Next.js Documentation - learn about Next.js features and API.
- Learn Next.js - an interactive Next.js tutorial.
You can check out the Next.js GitHub repository - your feedback and contributions are welcome!
Here's a social app for learning Next.js basics
It uses TypeScript, Mantine hooks, form handling and other neat stuff. Nice for beginning your Next.js journey! 🚀
5. ItzmyLink
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
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:
- Next.js Documentation - learn about Next.js features and API.
- Learn Next.js - an interactive Next.js tutorial.
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 simple link shortener app by taqui-786 is great for practice
It's built with Next.js, TypeScript, and API routes. Check it out to get ideas for your own projects! 🌐
So that's my list of 5 awesome Github repos for leveling up your Next.js skills.
Clone them, play around with the code, and have fun building! ✨
Don't forget to Drop 💖🔥🦄
Top comments (0)