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

news2024/12/27 15:12:24

前言

去年在学习 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.coloradmin.cn/o/1687233.html

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

相关文章

使用Flask Swagger自动生成API文档

文章目录 安装Flask Swagger使用Flask Swagger生成API文档总结1. 自动化文档生成2. 交互式文档展示3. 规范化API设计4. 提升协作效率5. 支持多种格式 Flask Swagger是一种用于管理Flask API文档的工具。它基于OpenAPI规范,可以自动生成API的交互式文档。使用Flask S…

一键自动化博客发布工具,用过的人都说好(公众号篇)

之前收到很多朋友的要求,说是需要一个公众号的自动发布工具。 现在,它来了。 前提条件 前提条件当然是先下载 blog-auto-publishing-tools这个博客自动发布工具,地址如下:https://github.com/ddean2009/blog-auto-publishing-tools 公众号…

harbor 认证

Harbor 认证过程 Harbor以 Docker Registry v2认证为基础,添加上一层权限保护。1.v2 集成了一个安全认证的功能,将安全认证暴露给外部服务,让外部服务去实现2.强制用户每次Docker pull/push请求都要带一个合法的Token,Registry会…

Leecode560:和为 K 的子数组

这道题用暴力解法时间复杂度会很高,但是涉及到和等于多少的情况,一般情况下会考虑以空间换时间来存储前面获得的信息,然后将答案为某值的结果返回。 这里利用了累加然后通过哈希表寻找值的思想。就是先将前面的数全部加起来,统计…

可视化大屏的应用(26):地产/楼盘/楼宇

可视化大屏在地产、楼盘和楼宇上有以下几个价值: 数据展示和分析 可视化大屏可以将地产、楼盘和楼宇相关的数据以图表、地图等形式展示出来,帮助用户更直观地了解各种数据指标,如销售情况、租赁率、楼宇能耗等。通过数据的可视化展示和分析…

Lc43---- 1221. 分割平衡字符串(java版)---(贪心)(字符串)

1.题目描述 2.知识点和思路 (1)贪心算法的基本思想 选择性质:在每一步中,选择当前最优的选项,不考虑未来的后果。 局部最优解:通过一系列局部最优选择,构建全局最优解。 不可回溯:一…

Map六种遍历方式

下面是三组(6种),Map 遍历方式的核心代码。 遍历方式有使用到增强for和迭代器。最下面有张图片,对做题有参考意义。 参考代码: Map map new HashMap();map.put("小猫","cat");map.put("小…

TypeScript-函数类型

函数类型 指给函数添加类型注解,本质上就是给函数的参数和返回值添加类型约束 function add(a: number,b: number) :number {return a b } let res: number res add(2 3) // 函数参数注解类型之后,不但限制了参数的类型还限制了参数为必填 优点&…

机器学习补充学习

1、Adaboost算法 Adaboost算法是一种集成学习方法,通过结合多个弱学习器来构建一个强大的预测模型。核心思想:如果一个简单的分类器在训练数据上犯错误,那么它在测试数据上也可能犯错误。 Adaboost通过迭代地训练一系列的分类器&#xff0c…

C语言 | Leetcode C语言题解之第101题对称二叉树

题目: 题解: /*** Definition for a binary tree node.* struct TreeNode {* int val;* struct TreeNode *left;* struct TreeNode *right;* };*/ bool isSymmetric(struct TreeNode* root) {if (root NULL) return true;//如果根为空直接…

基于YoloV4汽车多目标跟踪计数

欢迎大家点赞、收藏、关注、评论啦 ,由于篇幅有限,只展示了部分核心代码。 文章目录 一项目简介 二、功能三、系统四. 总结 一项目简介 一、项目背景与意义 随着城市交通的快速发展,交通流量和车辆密度的不断增加,对交通管理和控…

基于FPGA的VGA协议实现----条纹-文字-图片

基于FPGA的VGA协议实现----条纹-文字-图片 引言: ​ 随着数字电子技术的飞速发展,现场可编程门阵列(FPGA)因其高度的灵活性和并行处理能力,在数字系统设计中扮演着越来越重要的角色。FPGA能够实现复杂的数字逻辑&#…

Qt官方示例---embedded

digiflip flickable flightinfo lightmaps raycasting styleexample

pycharm 关闭项目卡死

PyCharm2023.3.4 关闭一直卡在 closing projects 解决办法: 打开PyCharm, 选择 Help -> Find Action -> 输入 Registry -> 禁用ide.await.scope.completion

leetCode-hot100-数组专题之双指针

数组双指针专题 1.同向双指针1.1例题26.删除有序数组中的重复项27.移除元素80.删除有序数组中的重复项 Ⅱ 2.相向双指针2.1例题11.盛最多水的容器42.接雨水581.最短无序连续子数组 双指针在算法题中很常见,下面总结双指针在数组中的一些应用,主要分为两类…

解决“Failed to restart udev.service“

报错信息 Failed to restart udev.service: Unit systemd-udevd.service is not loaded properly: Exec format error. See system logs and ‘systemctl status udev.service’ for details. invoke-rc.d: initscript udev, action “restart” failed. ● systemd-udevd.ser…

Day25:Leetcode:669. 修剪二叉搜索树 + 108.将有序数组转换为二叉搜索树 + 538.把二叉搜索树转换为累加树

LeetCode&#xff1a;669. 修剪二叉搜索树 问题描述 解决方案&#xff1a; 1.思路 2.代码实现 class Solution {public TreeNode trimBST(TreeNode root, int low, int high) {if (root null) {return null;}if (root.val < low) {return trimBST(root.right, low, hi…

跳房子游戏-第13届蓝桥杯选拔赛Python真题精选

[导读]&#xff1a;超平老师的Scratch蓝桥杯真题解读系列在推出之后&#xff0c;受到了广大老师和家长的好评&#xff0c;非常感谢各位的认可和厚爱。作为回馈&#xff0c;超平老师计划推出《Python蓝桥杯真题解析100讲》&#xff0c;这是解读系列的第71讲。 跳房子游戏&#…

一.ffmpeg 将内存中的H264跟PCM 数据流合成多媒体文件

在有一些嵌入式平台中&#xff0c;H264数据流一般来自芯片内部的硬编码器&#xff0c; AAC音频数据则是通过采集PCM进行软编码&#xff0c;但是如何对它实时进行封装多媒体文件 &#xff0c;参考ffmpeg example&#xff0c;花了一些时间终于实现了该功能。 流程图如下&#xf…