我是如何使用 Next.js14 + Tailwindcss 重构个人项目的

发布于

前言

去年在学习 React 和 Nest 的时候，参考了大佬 imsyy 的项目 DailyHot，以此项目的灵感基于 React 开发，完成之后就没怎么在意。

后来发现这个项目还有点小流量，每天差不多 200-400 的 IP 访问量：

我又抽时间优化了下用户体验，又发现 SPA 应用又不利于 SEO 优化，正好这阶段自己又有学习 Next.js14 的想法，正好可以以此参考进行重构学习。

🪴 项目信息

  • 😝 项目预览：今日热榜
  • 🎯 技术栈：React、Next.js、Tailwindcss、NextUI
  • 🚀 github 仓库地址：next-daily-hot

✨ 特性

  • 使用前端最新技术栈开发
  • 极快响应、便于开发部署
  • 目录结构清晰，轻量级，前后端一体
  • 支持多种部署方式，优先推荐 Vercel
  • 支持暗黑模式

💻 演示图

🧑‍💻 项目运行

环境：Node.js > 18.17

代码语言：powershell
复制
// 克隆项目

git clone https://github.com/baiwumm/next-daily-hot.git


// 安装依赖


pnpm install


// 运行


pnpm dev

⚙️ Vecel 本地部署

代码语言：powershell
复制
// 全局安装 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，它的很多特性和功能还用待探索，后续我会把开发过程中遇到的问题和怎么解决记录下来，希望对大家能有一点点小小的帮助。

#next.js#react.js#tailwind-css