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

前言

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

后来发现这个项目还有点小流量,每天差不多 200-400IP 访问量:
在这里插入图片描述

我又抽时间优化了下用户体验,又发现 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,它的很多特性和功能还用待探索,后续我会把开发过程中遇到的问题和怎么解决记录下来,希望对大家能有一点点小小的帮助。

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/bicheng/14346.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

深度学习之基于Pytorch框架手写数字识别

欢迎大家点赞、收藏、关注、评论啦 ,由于篇幅有限,只展示了部分核心代码。 文章目录 一项目简介 二、功能三、系统四. 总结 一项目简介 一、项目背景与意义 手写数字识别是数字图像处理领域的一个经典问题,也是深度学习技术的一个常用应用场…

uniappx 获取设备唯一标识(OAID、AAID、AndroidID、IMEI等) Ba-IdCode-U

简介(下载地址) Ba-IdCode-U 是一款可以获取国内各大手机厂商 OAID(开放匿名设备标识)及海外手机平台 AAID(安卓广告标识)的uniapp插件。另外也支持获取 IMEI/MEID、AndroidID、WidevineID、PseudoID、GUI…

Spring Cloud Alibaba-06-Sleuth链路追踪

Lison <dreamlison163.com>, v1.0.0, 2024.4.03 Spring Cloud Alibaba-06-Sleuth链路追踪 文章目录 Spring Cloud Alibaba-06-Sleuth链路追踪为什么使用链路追踪常见链路追踪解决方案Sleuth概述概述Sleuth术语 Sleuth Zipkin 原理Sleuth原理简述Zipkin 原理简述 Sleut…

代码随想录——路径总和(Leetcode113)需要回顾

题目链接 递归 本题递归需要遍历整棵树&#xff0c;所以递归没有返回值 /*** Definition for a binary tree node.* public class TreeNode {* int val;* TreeNode left;* TreeNode right;* TreeNode() {}* TreeNode(int val) { this.val val; }* T…

苹果M4性能分析:进步神速?还有多少空间?

2024年初&#xff0c;苹果推出了M4处理器&#xff0c;令人意外的是&#xff0c;它的发布距离M3发布仅仅过去了半年时间。更让人惊讶的是&#xff0c;M4首次亮相于iPad Pro。这一新处理器不仅仅是M3的简单升级版本&#xff0c;而是一次全面的架构优化。本文将详细分析M4处理器的…

Vue基础(1)数据绑定

一. 文本插值 普通文本可以使用双大括号 {{ }} &#xff0c;要想插入 HTML&#xff0c;需要使用 v-html 指令。 <template><h1>Message: {{ state.msg }}</h1><p>{{ state.count 1 }}</p><p>{{ state.rawHtml }}</p><p v-html…

【教学类-58-02】黑白三角拼图02(3*3宫格)262144种

背景需求&#xff1a; 已知黑白三角拼图2*2&#xff08;4个拼图&#xff09;一共有256种排列方法 【教学类-58-01】黑白三角拼图01&#xff08;2*2宫格&#xff09;256种-CSDN博客文章浏览阅读142次&#xff0c;点赞5次&#xff0c;收藏12次。【教学类-58-01】黑白三角拼图01…

深度学习之基于Matlab卷积神经网络(CNN)手写数字识别

欢迎大家点赞、收藏、关注、评论啦 &#xff0c;由于篇幅有限&#xff0c;只展示了部分核心代码。 文章目录 一项目简介 二、功能三、系统四. 总结 一项目简介 一、项目背景与意义 手写数字识别是计算机视觉领域的一个重要问题&#xff0c;也是深度学习应用的一个典型场景。卷…

什么是固态继电器?

固态继电器是不需要使用任何机械部件的开关继电器。这通常使它们具有比普通机电继电器寿命更长的优势&#xff0c;然而&#xff0c;尽管固态继电器速度快且耐用&#xff0c;但仍具有某些设计规定。 固态继电器风靡全球&#xff0c;彻底改变了从农业自动化到航空航天等各个行业…

银行总部文件自动下发,如何保证不影响专线网络使用?

银行在我国金融体系中占据重要地位&#xff0c;是我国市场经济的重要组成部分。我国商业银行随着自身不断发展&#xff0c;规模日益扩大&#xff0c;形成了“总行-分行-支行-营业网点”的典型层级管理模式。在日常中&#xff0c;银行总部存在文件下发的场景&#xff1a; 银行总…

多家知名媒体到访“光子1号金融算力中心“ 交流AI与算力未来观

5月23日&#xff0c;企商在线 “光子1号金融算力中心媒体参观日”活动成功举办&#xff0c;十多家主流媒体、IT行业媒体及自媒体代表走进光子1号金融算力中心&#xff0c;深入了解企商业务发展、战略规划及“光子1号金融算力中心”等企商打造的新型数字基础设施&#xff0c;共同…

Python条件分支与循环

大家好&#xff0c;当涉及到编写高效和灵活的程序时&#xff0c;条件分支和循环是 Python 中至关重要的概念。它们允许我们根据不同的条件执行不同的代码块&#xff0c;或者重复执行一组语句。条件分支和循环是测试开发工程师在日常工作中经常使用的工具&#xff0c;无论是编写…

光耦合器的特性和应用概述

光耦合器又称光电耦合器&#xff0c;是现代电子学中必不可少的元件&#xff0c;确保隔离电路之间安全有效的信号传输。本文探讨了光耦合器的特性及其多样化应用&#xff0c;强调了它们在各种电子系统中的关键作用。 什么是光耦合器&#xff1f; 光耦合器是一种设计用于利用光传…

【MySQL数据库】CRUD 增 删 改 查 超详解,有这一篇就够了!

​ ​ &#x1f525;个人主页&#xff1a; 中草药 &#x1f525;专栏&#xff1a;【MySQL】探秘&#xff1a;数据库世界的瑞士军刀 目录 ⚗️一.CRUD &#x1f9ea;二.新增&#xff08;Create&#xff09; &#x1f9eb;1.基本操作 &#x1f9ec;2.使用SELECT插入 &#x…

长难句5.24

There is pressure for change from within the profession, but opponents of change among the regulators insist that keeping outsiders out of a law firm isolates lawyers from the pressure to make money rather than serve clients ethically. 在(律师)行业内部也有…

区块链钱包如果丢失了私钥或助记词,资产还能恢复吗?

如果你丢失了区块链钱包的私钥或助记词&#xff08;通常是用于恢复钱包的短语或种子&#xff09;&#xff0c;那么你的资产在大多数情况下是无法恢复的。私钥是访问和控制你在区块链上资产的唯一凭证&#xff0c;而助记词&#xff08;如BIP39标准中的12、18、24个单词的短语&am…

centos常见命令总结

一、【写在前面】 注意到csdn在鼓励作者创作centos常见命令相关的文章&#xff0c;借此机会水一篇博文。 centos作为上个版本国内最常用的开源操作系统&#xff0c;占有量非常恐怖&#xff0c;排个前三应该没有任何疑问。但是我建议直接去学ubuntu&#xff0c;因为主流在用的…

【系统架构师】-案例篇(十五)SOA、微服务与数据库

1、可复用构件应具备哪些属性 可用性&#xff1a;构件必须易于理解和使用。 质量&#xff1a;构件及其变形必须能正确工作。 适应性&#xff1a;构件应该易于通过参数化等方式在不同语境中进行配置。 可移植性&#xff1a;构件应能在不同的硬件运行平台和软件环境中工作。 可变…

pip(包管理器) for Python

pip是什么 pip是Python的包安装程序&#xff0c;即python包管理器。您可以使用 pip 从Python包索引和其他索引安装包。 1. pip 安装 python 包 pip install 包名 例如&#xff1a;pip install pymssql &#xff1a; 使用pip安装数据库驱动包 pymssql 2.pip 卸载 python 包 pi…

【Axure教程】拖动换位选择器

拖动换位选择器通常用于从一个列表中选择项目并将其移动到另一个列表中。用户可以通过拖动选项来实现选择和移动。这种交互方式在许多Web应用程序中很常见&#xff0c;特别是在需要对项目分组的情况下。 所以今天作者就教大家怎么在Axure用中继器制作一个拖动换位选择器的原型…