“从他人的代码中学习”
今天的文章,我想分享一些不错的 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,设计更好的架构!