前言
去年在学习 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 托管静态网站
⚠️ 责任声明
- 本项目的接口会频繁请求官方数据,部分接口使用了 页面爬虫抓取,若违反对应页面的相关规则,请 及时通知我去除该接口
- 如果想集成其他平台的热搜或热点
API
,可以提Issues
- 本项目提供的
API
仅供开发者进行技术研究和开发测试使用,任何因使用本API
产生的损失,本项目不负担任何赔偿和责任
😘 鸣谢
特此感谢为本项目提供支持与灵感的项目,本项目在其基础上使用 Next.js 和 Tailwindcss 构建并优化,感谢开源社区提供的精神支持
- imsyy/DailyHot
- imsyy/DailyHotApi
总结
由于刚接触 Next.js14,它的很多特性和功能还用待探索,后续我会把开发过程中遇到的问题和怎么解决记录下来,希望对大家能有一点点小小的帮助。