6 个掌握 Next.js 的项目

前端岗位内推来了
还在为如何构建一些酷炫且独特的 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，别忘了为这些项目加星 ⭐！

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