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

前言

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

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

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

🪴 项目信息

✨ 特性

  • 使用前端最新技术栈开发
  • 极快响应、便于开发部署
  • 目录结构清晰,轻量级,前后端一体
  • 支持多种部署方式,优先推荐 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.jsTailwindcss 构建并优化,感谢开源社区提供的精神支持

总结

由于刚接触 Next.js14,它的很多特性和功能还用待探索,后续我会把开发过程中遇到的问题和怎么解决记录下来,希望对大家能有一点点小小的帮助。

相关推荐
FungLeo1 小时前
成为全栈·React 管理后台篇·列表页范式:让分页、筛选和返回位置进入 URL
react·前端架构·分页查询·react router·成为全栈·url状态
FungLeo1 天前
成为全栈·React 管理后台篇·服务端状态、会话状态、界面状态:不要都塞进 Zustand
react·状态管理·zustand·react hook form·成为全栈·tanstack query
FungLeo1 天前
成为全栈·React 管理后台篇·前端鉴权闭环:内存令牌、刷新旋转与路由守卫
react·路由守卫·zustand·刷新令牌·成为全栈·前端鉴权
余槐i2 天前
从useState到Agent状态:React状态管理为何在AI工作流中失灵?
react·状态管理·ai agent·langgraph·tool calling
liangshanbo12152 天前
React useTransition 和 useDeferredValue 面试题整理
react·usetransition
梦想的颜色2 天前
【AI科普】AI 时代,纯 H5+CSS PK React & Vue:前端技术孰优孰劣深入剖析
ai·前端框架·大模型·vue·react·html5·vibecoding
liangshanbo12153 天前
面试题:React 中 useReducer 和 useState 有什么区别?什么时候应该使用 useReducer?
react·usereducer
FungLeo3 天前
成为全栈·React 管理后台篇·后台骨架:布局、数据路由与分层守卫
react·管理后台·权限控制·react router·前端路由·成为全栈
秋秋小事3 天前
React hooks总览
react
西瓜太郎12345 天前
外层模型卡片与分组详情成功率不一致,应该怎么排查?
前端·typescript·go·软件工程·react