前言

去年在學習 React 和 Nest 的時候，參考了大佬 imsyy 的項目 DailyHot，以此項目的靈感基于 React 開發，完成之后就沒怎么在意。

后來發現這個項目還有點小流量，每天差不多 200-400 的 IP 訪問量：

我又抽時間優化了下用戶體驗，又發現 SPA 應用又不利于 SEO 優化，正好這階段自己又有學習 Next.js14 的想法，正好可以以此參考進行重構學習。

🪴 項目信息

• 😝 項目預覽：https://hot.baiwumm.com/
• 🎯 技術棧：React、Next.js、Tailwindcss、NextUI
• 🚀 github 倉庫地址：next-daily-hot

? 特性

• 使用前端最新技術棧開發
• 極快響應、便于開發部署
• 目錄結構清晰，輕量級，前后端一體
• 支持多種部署方式，優先推薦 Vercel
• 支持暗黑模式

💻 演示圖

🧑?💻 項目運行

環境：Node.js > 18.17

// 克隆項目
git clone https://github.com/baiwumm/next-daily-hot.git// 安裝依賴
pnpm install// 運行
pnpm dev

?? Vecel 本地部署

// 全局安裝 vercel
npm i -g vercel// 登錄
vercel login// 項目推送
vercel// 掛載生產
vercel --prod

具體教程可參考文章：如何使用 Vercel 托管靜態網站

?? 責任聲明

1. 本項目的接口會頻繁請求官方數據，部分接口使用了 頁面爬蟲抓取，若違反對應頁面的相關規則，請 及時通知我去除該接口
2. 如果想集成其他平臺的熱搜或熱點 API，可以提 Issues
3. 本項目提供的 API 僅供開發者進行技術研究和開發測試使用，任何因使用本 API 產生的損失，本項目不負擔任何賠償和責任

😘 鳴謝

特此感謝為本項目提供支持與靈感的項目，本項目在其基礎上使用 Next.js 和 Tailwindcss 構建并優化，感謝開源社區提供的精神支持

• imsyy/DailyHot
• imsyy/DailyHotApi

總結

由于剛接觸 Next.js14，它的很多特性和功能還用待探索，后續我會把開發過程中遇到的問題和怎么解決記錄下來，希望對大家能有一點點小小的幫助。