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

這篇文章為你帶來(lái)一些適合初學(xué)者的倉(cāng)庫(kù)，幫助你獲取項(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ǎng)
• 包含精美的登錄頁(yè)和產(chǎn)品頁(yè)面
• 自定義藝術(shù)作品
• 完整的管理面板
• 用戶可以購(gòu)買(mǎi)和出售自己的產(chǎn)品
• 本地持久化的購(gòu)物車(chē)
• 使用 Payload 進(jìn)行身份驗(yàn)證
• 學(xué)習(xí)如何自托管 Next.js
• 使用 shadcn-ui 構(gòu)建的簡(jiǎn)潔現(xiàn)代 UI
• 注冊(cè)和購(gòu)買(mǎi)后發(fā)送漂亮的電子郵件
• 管理員可驗(yàn)證產(chǎn)品以確保高質(zhì)量
• ?? 100% 使用 TypeScript 編寫(xiě)

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

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

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

功能

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

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

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

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

功能

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

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

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

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

功能

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

5. 簡(jiǎn)報(bào)訂閱頁(yè)面

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

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

功能

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

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

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

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

功能

• 速度快且響應(yīng)迅速
• 簡(jiǎn)潔且美觀
• 極具創(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)目加星 ！