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

简介: 这篇文章介绍了作者在学习React和Nest时受到大佬imsyy项目DailyHot的启发,基于React开发了一个项目,并因为这个项目获得了少量流量而进行了优化。作者随后因为想要优化SEO和深入学习Next.js14,决定重构这个项目。文章详细介绍了项目的信息、特性、演示图、运行环境、Vercel本地部署步骤以及责任声明。作者还感谢了为本项目提供支持与灵感的项目,并承诺会记录下开发过程中遇到的问题及解决方法以帮助他人。

前言

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

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

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

🪴 项目信息

✨ 特性

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

💻 演示图

t2e8zyv9dawcmw83v94dsbp9jqq7o2c4.png

3exh1vk393sqgn1lrtczqfnb804lfcq7.png

🧑‍💻 项目运行

环境: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

具体教程可参考文章:{cat_insidepost id="40"}

⚠️ 责任声明

  1. 本项目的接口会频繁请求官方数据,部分接口使用了 页面爬虫抓取,若违反对应页面的相关规则,请 及时通知我去除该接口
  2. 如果想集成其他平台的热搜或热点 API,可以提 Issues
  3. 本项目提供的 API 仅供开发者进行技术研究和开发测试使用,任何因使用本 API 产生的损失,本项目不负担任何赔偿和责任

😘 鸣谢

特此感谢为本项目提供支持与灵感的项目,本项目在其基础上使用 Next.jsTailwindcss 构建并优化,感谢开源社区提供的精神支持

总结

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

相关文章
|
16天前
|
JavaScript Java 测试技术
Java项目基于ssm+vue.js的网上手机销售系统附带文章和源代码设计说明文档ppt
Java项目基于ssm+vue.js的网上手机销售系统附带文章和源代码设计说明文档ppt
23 0
|
3天前
|
JavaScript Java 测试技术
基于springboot+vue.js+uniapp小程序的销售项目流程化管理系统附带文章源码部署视频讲解等
基于springboot+vue.js+uniapp小程序的销售项目流程化管理系统附带文章源码部署视频讲解等
18 3
|
3天前
|
JavaScript Java 测试技术
基于springboot+vue.js+uniapp小程序的项目申报管理系统附带文章源码部署视频讲解等
基于springboot+vue.js+uniapp小程序的项目申报管理系统附带文章源码部署视频讲解等
16 3
|
4天前
|
监控 JavaScript 前端开发
如何在现有的 JavaScript 项目中渐进式地采用 TypeScript
【6月更文挑战第13天】TypeScript,JavaScript的超集,引入静态类型和更多特性,提升代码安全性和可读性。在JavaScript项目中渐进式采用TypeScript可从新模块开始,逐步转换代码,编写.d.ts文件支持第三方库,配置编译选项,并编写测试用例。通过监控和评估,改善项目质量和效率。大型项目尤其受益于TypeScript的类型安全、社区支持和工具兼容性。
10 3
|
5天前
|
JavaScript Java 测试技术
基于springboot+vue.js+uniapp小程序的项目申报系统的设计与实现附带文章源码部署视频讲解等
基于springboot+vue.js+uniapp小程序的项目申报系统的设计与实现附带文章源码部署视频讲解等
32 12
|
5天前
|
JavaScript Java 测试技术
基于springboot+vue.js+uniapp小程序的大学生双创竟赛项目申报与路演管理系统附带文章源码部署视频讲解等
基于springboot+vue.js+uniapp小程序的大学生双创竟赛项目申报与路演管理系统附带文章源码部署视频讲解等
19 1
|
11天前
|
JavaScript 前端开发 中间件
Express框架搭建项目 node.js
【6月更文挑战第3天】这篇文章是关于使用Express框架构建Node.js Web应用的教程。Express是一个轻量级、功能丰富的框架,特点包括简洁灵活的核心、强大的中间件支持、灵活的路由系统和模板引擎兼容性。文章介绍了如何安装Express,并通过一个简单的示例展示了如何创建一个基本的Web服务器。最后,鼓励读者继续学习和实践,以充分利用Express和Node.js的能力。
9 1
|
12天前
|
JavaScript Java 测试技术
基于ssm+vue.js+uniapp小程序的项目监管系统附带文章和源代码部署视频讲解等
基于ssm+vue.js+uniapp小程序的项目监管系统附带文章和源代码部署视频讲解等
12 2
|
16天前
|
JavaScript Java 测试技术
Java项目基于ssm+vue.js的生鲜在线销售系统附带文章和源代码设计说明文档ppt
Java项目基于ssm+vue.js的生鲜在线销售系统附带文章和源代码设计说明文档ppt
14 0
|
16天前
|
JavaScript Java 测试技术
Java项目基于ssm+vue.js的经典电影推荐网站附带文章和源代码设计说明文档ppt
Java项目基于ssm+vue.js的经典电影推荐网站附带文章和源代码设计说明文档ppt
13 0