還在為如何構(gòu)建一些酷炫且獨(dú)特的 Next.js 項(xiàng)目而苦惱嗎？

這篇文章為你帶來一些適合初學(xué)者的倉庫，幫助你獲取項(xiàng)目靈感。

1. 電子商務(wù)應(yīng)用程序

Digital Hippo?—?Ecommerce Next.js App一個(gè)完整的電子商務(wù)應(yīng)用程序。

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

功能

• 基于 Next.js 14 從頭構(gòu)建的完整市場
• 包含精美的登錄頁和產(chǎn)品頁面
• 自定義藝術(shù)作品
• 完整的管理面板
• 用戶可以購買和出售自己的產(chǎn)品
• 本地持久化的購物車
• 使用 Payload 進(jìn)行身份驗(yàn)證
• 學(xué)習(xí)如何自托管 Next.js
• 使用 shadcn-ui 構(gòu)建的簡潔現(xiàn)代 UI
• 注冊和購買后發(fā)送漂亮的電子郵件
• 管理員可驗(yàn)證產(chǎn)品以確保高質(zhì)量
• ?? 100% 使用 TypeScript 編寫

2. Shadcn UI 的個(gè)人作品集

一個(gè)簡單的個(gè)人作品集應(yīng)用。

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

功能

• 簡潔美觀
• 基于 Next.js 14 和 TypeScript
• 使用 Zod 驗(yàn)證
• 最佳 Talwind CSS 實(shí)現(xiàn)
• 速度快且響應(yīng)迅速
• 使用 Resend 發(fā)送電子郵件

3. 個(gè)人簡介鏈接生成器應(yīng)用

一個(gè)使用 Next.js 13 和 Zod 構(gòu)建的無數(shù)據(jù)庫應(yīng)用。

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

功能

• 學(xué)習(xí)最佳 Zod 驗(yàn)證實(shí)踐
• 使用 Next.js 13 和 TypeScript
• 簡單且響應(yīng)迅速
• 無需付費(fèi)服務(wù)
• 一款工具類應(yīng)用
• 極具創(chuàng)業(yè)潛力

4. SaaS 應(yīng)用程序

一個(gè)包含文檔的 Next.js 組件集合。

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

功能

• 學(xué)習(xí)如何制作一個(gè)簡單的登錄頁面
• 使用 Next.js 14 和 TypeScript
• 使用 Shadcn-ui
• 實(shí)現(xiàn) Nextra 文檔
• 使用 Framer Motion 實(shí)現(xiàn)動畫
• 使用 Zod 進(jìn)行驗(yàn)證

5. 簡報(bào)訂閱頁面

Devletter — 開發(fā)者簡報(bào)應(yīng)用一個(gè)開發(fā)者簡報(bào)訂閱頁面。

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

功能

• 簡潔且美觀
• 移動設(shè)備響應(yīng)
• 使用 Next.js 13 和 TypeScript
• 使用 React Hook Form 和 Zod
• 冷酷的雪花動畫背景
• 使用 Prisma ORM 進(jìn)行數(shù)據(jù)庫管理

6. 另一個(gè) SaaS 應(yīng)用程序

一個(gè)帶有編輯器的幻燈片制作工具。

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

功能

• 速度快且響應(yīng)迅速
• 簡潔且美觀
• 極具創(chuàng)業(yè)潛力
• 基于 Next.js 和 TypeScript 構(gòu)建
• 學(xué)習(xí)如何處理圖像
• 學(xué)習(xí)將圖像轉(zhuǎn)換為 PDF

以上就是這些項(xiàng)目 ，希望這些項(xiàng)目能幫助你學(xué)習(xí)和掌握 Next.js，別忘了為這些項(xiàng)目加星 ！