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

让我们来看看并给这些优秀的项目一个star⭐

首先是👇

1. Notion克隆

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

这是一个使用实时光标，Nextjs 13，Stripe，Drizzle ORM，Tailwind，Supabase构建的应用程序。具有以下各种功能：SocketsSaaS

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

2. 使用Next.js和Shadcn UI制作的个人资料

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

这个个人资料网站是使用Next.js+构建的，非常棒！ShadcnUI它具有清晰的设计，使用Tailwind CSS，包含关于、项目、简历和联系页面。

作为一个学习Web开发的人来说，个人资料非常重要，用来展示你的技能。这是一个完美的入门级个人资料模板，可以给你带来灵感！

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. 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等构建的学习管理系统平台。

主要功能：

• 🔍 浏览和筛选课程
• ✅ 标记章节为已完成或未完成
• 📈 计算每门课程的进度
• 👩‍🎓 学生仪表板
• 👨‍🏫 教师模式
• 🆕 创建新课程
• ➕ 创建新章节
• ↕️ 使用拖放轻松重新排列章节位置
• 🖼️ 使用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这样的平台上部署是对今天的Web开发人员非常有价值的。

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’的简单、现代用户界面
• 🚀 乐观的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方面的技能提升。