6 个掌握 Next.js 的项目 ⭐

• CSS技巧与案例详解
• vue2与vue3技巧合集
• VueUse源码解读

还在为如何构建一些酷炫且独特的 Next.js 项目而苦恼吗？

这篇文章为你带来一些适合初学者的仓库，帮助你获取项目灵感。

1. 电子商务应用程序

Digital Hippo — Ecommerce Next.js App
一个完整的电子商务应用程序。

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

功能

• 🛠️ 基于 Next.js 14 从头构建的完整市场
• 💻 包含精美的登录页和产品页面
• 🎨 自定义艺术作品
• 💳 完整的管理面板
• 🛍️ 用户可以购买和出售自己的产品
• 🛒 本地持久化的购物车
• 🔑 使用 Payload 进行身份验证
• 🖥️ 学习如何自托管 Next.js
• 🌟 使用 shadcn-ui 构建的简洁现代 UI
• ✉️ 注册和购买后发送漂亮的电子邮件
• ✅ 管理员可验证产品以确保高质量
• ⌨️ 100% 使用 TypeScript 编写

2. Shadcn UI 的个人作品集

一个简单的个人作品集应用。

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

功能

• 🥰 简洁美观
• ⚙️ 基于 Next.js 14 和 TypeScript
• 🛠️ 使用 Zod 验证
• ✅ 最佳 Talwind CSS 实现
• 🚀 速度快且响应迅速
• 💲 使用 Resend 发送电子邮件

3. 个人简介链接生成器应用

一个使用 Next.js 13 和 Zod 构建的无数据库应用。

⭐ https://github.com/taqui-786/itZmyLink

功能

• 📖 学习最佳 Zod 验证实践
• ⚙️ 使用 Next.js 13 和 TypeScript
• 🥰 简单且响应迅速
• ✅ 无需付费服务
• 💲 一款工具类应用
• 🚀 极具创业潜力

4. SaaS 应用程序

一个包含文档的 Next.js 组件集合。

⭐ https://github.com/taqui-786/mixcnui

功能

• 📖 学习如何制作一个简单的登录页面
• ⭐ 使用 Next.js 14 和 TypeScript
• 👋 使用 Shadcn-ui
• 🛠️ 实现 Nextra 文档
• 😅 使用 Framer Motion 实现动画
• ✅ 使用 Zod 进行验证

5. 简报订阅页面

Devletter — 开发者简报应用
一个开发者简报订阅页面。

⭐ https://github.com/taqui-786/Devletter

功能

• 🥰 简洁且美观
• 🫡 移动设备响应
• ⚙️ 使用 Next.js 13 和 TypeScript
• 🔥 使用 React Hook Form 和 Zod
• ⭐ 冷酷的雪花动画背景
• 🛠️ 使用 Prisma ORM 进行数据库管理

6. 另一个 SaaS 应用程序

一个带有编辑器的幻灯片制作工具。

⭐ https://github.com/taqui-786/crousal-maker

功能

• 🚀 速度快且响应迅速
• 🥰 简洁且美观
• ✅ 极具创业潜力
• ⚙️ 基于 Next.js 和 TypeScript 构建
• 📖 学习如何处理图像
• 🔥 学习将图像转换为 PDF

---

以上就是这些项目 😅，希望这些项目能帮助你学习和掌握 Next.js，别忘了为这些项目加星 ⭐！

首发于公众号 大迁世界，欢迎关注。📝 每周一篇实用的前端文章 🛠️ 分享值得关注的开发工具 ❓ 有疑问？我来回答

本文 GitHub https://github.com/qq449245884/xiaozhi 已收录，有一线大厂面试完整考点、资料以及我的系列文章。