12个快速学会 NextJS 的 Github 仓库-CSDN博客

“从他人的代码中学习”

今天的文章，我想分享一些不错的 GITHUB 仓库，这些项目都能帮助你更快学会 NextJS。

NextJS 是一个流行的 JavaScript 框架，允许我们使用 React 构建动态站点和应用程序。

让我们来查看并给这些优秀的项目start⭐

首先是👇

1. Notion Clone

github: https://github.com/webprodigies/webprodigies-cypress

它是使用 Realtime cursors、Nextjs 13、Stripe、Drizzle ORM、Tailwind、Supabase、Sockets构建的SaaS应用程序。具有以下各种功能：

👨‍👨‍👧‍👦 实时协作
👾 部署
💰 进行月度付款
🤑 自定义富文本编辑器
📚 更新配置文件设置
📧 自定义电子邮件2FA邀请
🔐 自定义身份验证
等等......

2. 使用 Next.js 和 Shadcn UI 制作的作品集

github: https://github.com/taqui-786/Portfolio

这个作品集网站是使用 Next.js + ShadcnUI 构建的，非常棒！它采用了清晰的设计，使用 Tailwind CSS，并包含关于、项目、简历和联系等页面。

作为一个学习网页开发的人来说，一个作品集非常重要，可以展示你的技能。这是一个完美的入门级作品集模板，可以从中获取灵感！

3. digitalhippo

是一款带有管理员仪表板的电子商务应用程序

github: https://github.com/joschan21/digitalhippo

DigitalHippo 是一个不错的电子商务应用程序，采用了 NextJS、Stripe 和其他流行的技术构建。它允许用户在线销售和购买数字产品。

它的产品分类、管理员仪表板和结账过程等功能都可以借鉴。代码非常清晰、组织有序。

对于希望构建在线商店的人来说，这是一个必学的项目，可以了解支付集成和市场功能的实现方式。

4. Discord克隆程序

github: https://github.com/AntonioErdeljac/next13-discord-clone

一个使用Next.js 13、React、Socket.io、Prisma、Tailwind和MySQL构建的全栈Discord克隆项目。

这个项目展示了如何使用NextJS、Socket.io和其他工具编写一个类似于Discord的消息平台。

我认为在应用中拥有实时聊天和在线状态功能非常酷。了解WebSockets的内部工作原理可以大大提升你的技能水平。

5. 电子商务平台与Nextjs 14

github:https://github.com/adrianhajdin/ecommerce

这个项目可以帮助你学习如何使用管理仪表板、CMS和Stripe构建和部署一个全栈电子商务应用程序。

这个包含了一个具有完整功能的电子商务网站，其中包括管理仪表板和CMS。

产品管理、用户角色和支付集成等功能是按照最佳实践构建的。

6. 在Nextjs 14中的Twitch克隆

github:https://github.com/AntonioErdeljac/next14-twitch-clone

这个项目展示了如何开发一个类似于Twitch的实时流媒体平台，具有广播、评论等功能。

实时流媒体视频看起来很具有挑战性，但是代码结构清晰。

学习如何在这里利用LiveKit和Websockets等服务，肯定可以帮助初学者开发出创新的产品。

7. 使用Nextjs的学习管理系统

github: https://github.com/AntonioErdeljac/next13-lms-platform

使用Nextjs、React、Stripe、Mux、Prisma、Tailwind、MySQL等构建的LMS（学习管理系统）平台。

主要特点：

浏览和筛选课程
标记章节为已完成或未完成状态
计算每个课程的进度
学生仪表板
教师模式
创建新的课程
创建新的章节
使用拖放轻松重新排列章节位置
使用UploadThing上传缩略图、附件和视频
使用Mux进行视频处理
使用Mux进行HLS视频播放
章节描述的富文本编辑器
使用Clerk进行身份验证
使用Prisma进行ORM
使用Planetscale进行MySQL数据库

如果做过教育相关产品，相信对这些都不陌生！

8. Nextjs构建的电子商务应用程序

github: https://github.com/sangammukherjee/NextJS-Ecommerce-2023

这个电子商务应用程序非常适合初学者开发者练习，可以帮助他们了解事物的工作原理。

项目结构和购物车、产品和结账等功能的整合都经过深思熟虑，同时保持了良好的性能。

9. itZmyLink

github: https://github.com/taqui-786/itZmyLink 这是一个使用 NextJS 13 开发的社交媒体参考落地页应用程序。我认为像 Linktree 这样的服务非常有用。

通过学习这个项目中的清晰编码实践，你将建立起坚实的基础。

学习如何在像 Vercel 这样的平台上部署也对现今的网页开发人员来说非常有价值。

10. 博客应用程序

gtihub:https://github.com/safak/markdown-blog

使用 NextJS 和 Hugo 创建的简单博客平台。撰写博客和文档是所有技术职业的重要组成部分。

这个项目可以教会我们良好的习惯，比如 Markdown 语法和静态站点生成的工作原理。它是学习内容管理和发布流程的完美起点。

11. quill - 一个SaaS平台

github:https://github.com/joschan21/quill

一个笔记记录的Web应用程序，允许用户轻松地捕捉带有图片、格式化等的笔记。

主要特点：

🛠️ 完全从零开始构建的SaaS平台
💻 包含漂亮的落地页和定价页
💳 使用Stripe提供免费和专业计划
📄 美观且功能强大的PDF查看器
🔄 实时流式API响应
🔒 使用Kinde进行身份验证
🎨 使用'shadcn-ui'的简洁、现代化用户界面
🚀 乐观的用户界面更新，提供出色的用户体验
⚡ 用于提升性能的无限消息加载
📤 直观的拖放上传
✨ 瞬间加载状态
🔧 使用tRPC和Zod进行现代数据获取
🧠 使用LangChain实现无限AI记忆
🌲 使用Pinecone作为向量存储
📊 使用Prisma作为ORM
🔤 100%使用TypeScript编写
🎁 ...还有更多功能。

12. Friendz - 一个社交媒体应用

gitbub: https://github.com/taqui-786/project-friendz

一个使用NextJS、Editorjs、Taiwindcss等工具构建的社交媒体应用。

功能包括：

身份验证
个人资料
点赞、评论和关注
实时动态
Redis
Prisma ORM
还有更多功能

总结

就是这些了 👋

这些是掌握NextJS并学习实际工作原理的最佳GitHub仓库。

学习由经验丰富的开发人员创建的项目，肯定会加速我们在NextJS方面的技能提升。

我希望这个列表能给你一些灵感，帮助你学习NextJS,设计更好的架构！