使用的技术

框架

• Next.js 用于构建全栈 Web 应用程序的 React 框架。你可以使用 React 组件来构建用户界面，而 Next.js 则提供额外的功能和优化。

UI 相关

• NextTheme

  仅需两行代码实现完美的 Next.js 暗黑模式。支持系统偏好设置及任意其他主题，无闪烁问题。

• TailWindcss

  一个实用优先的 CSS 框架，内置了诸如 flex、pt-4、text-center 和 rotate-90 等类，可以直接在标记中组合构建任何设计。

• ShadenUI

  设计精美的组件，可直接复制粘贴到您的应用中。

• AceternityUI

  复制粘贴最热门的组件，无需担心样式和动画，即可在您的网站中使用。

• ReactIcon

  在您的 React 项目中轻松包含流行图标，借助 react-icons，它利用 ES6 导入功能，使您仅包含项目所需的图标。

状态管理

• Zustand

  一个轻量、快速且可扩展的极简状态管理解决方案。Zustand 基于钩子的 API 设计舒适易用。它不繁琐也不固执己见，但具备足够的规范性，使得代码明确且类似 Flux 架构。

• ReactUse

  React Hooks 集合

动画库

• LottieReact

  让 SVG 路径有动画效果

• FramerMotion

  它驱动着 Framer 中令人惊叹的动画和交互效果，这是专为创意专业人士打造的网页构建工具。零代码，极致速度。

图片处理

• sharp

  高性能 Node.js 图像处理，最快实现 JPEG、PNG、WebP、AVIF 和 TIFF 图像缩放的模块。基于 libvips 库。使用 sharp 生成图片的缩略图；在图片请求中为完成加载时，展示 Base 64 缩略图占位。

内容处理

• Contentlayer

  Contentlayer 是一个内容 SDK 内容 SDK，可以验证并将您的内容转换为类型安全的 JSON 数据，您可以轻松导入到应用程序中。

• Unified

  通过语法和插件来解析、检查、转换和序列化内容的库

• Rehype 由插件驱动的 HTML 处理库使用的插件

  • rehype-autolink-headingss 在 HTML 中为标题添加链接
  • rehype-pretty-code 适用于 Markdown 或 MDX 的精美代码块。
  • rehype-slug 为标题添加 id 属性
  • rehype-stringify 用于添加对序列化为 HTML 的支持。

• Remark 插件驱动的 Markdown 处理库使用的插件

  • remark-breaks 无需空格即可添加换行支持的插件
  • remark-gfm 支持 GFM 的备注插件（自动链接文本、脚注、删除线、表格、任务列表）
  • remark-parse 添加对从 Markdown 解析的支持。
  • remark-rehype 将 Markdown 转换为 HTML。

• ReadingTime 阅读时间估算。

• Feed Node.js 的 RSS、Atom 和 JSON Feed 生成器，让内容聚合变得简单直观！

性能优化分析

• Pagespeed

  PageSpeed Insights (PSI) 报告了页面在移动设备和桌面设备上的用户体验，并提供改进该页面的建议。