type
status
date
slug
summary
tags
category
icon
password
😀
在使用Nextjs和Tailwind开发时可能会用到的三方优质资源和库(不定期更新)
 

📝 官方文档

💡
强烈建议看英文文档,中文文档更新的没有英文文档及时,且翻译水准良莠不齐

优质组件库(使用Tailwind)

  • Next UI, 据说是Next官方出品的,界面什么都挺不错, 但是有收费的pro版本
  • headlessui,TW官方组件库,现有组件比较精致,缺点是组件数量比较少
  • daisyui,组件较多,设计风格比较欧美,有多个主题可选,适合landing页开发
  • shadcn/ui,组件较多,设计简洁,适合做后台系统,并且它可以单个组件安装,非常推荐
  • tremor/ui,有不少chart组件,设计简洁漂亮,适合dashboard页面开发
  • css-loaders, css loading动画库,可以单独复制css使用
 

UI工具

  • picyard,可以生成具有吸引人的背景的屏幕截图
notion image
notion image
  • pic-graphy,是流行的 Unsplash 的替代品,同样提供高分辨率、免版税的库存照片。
notion image
  • undraw, 大量图片素材,可以直接下载
notion image
  • aigei, 音视频素材网站,剪辑可能用的上
notion image
  • meiye, 界面UI设计灵感
notion image
notion image

landing页优质模版(基于Tailwind)

  • floatui,可用模版没那么多,但大部分免费,在免费里算设计精良的
  • flowbite,可用组件和模版较多,设计的也比较好看,但相当一部分是收费的
  • landingfolio,landing页模版大全,寻找设计灵感必看

icon库

 

表单相关

  • zod,表单校验神器,包很小,搭配reac-hooks-form使用非常香
 

状态管理

  • waku, 支持react server组件,zustand相同作者
 

React Hooks库

  • ahooks,阿里出的Hooks库,api比较全
  • react-use,api较丰富,跟ahooks有不少重合的

图表库

  • recharts,使用 React 和 D3 构建的重新定义的图表库,界面比较简洁,demo比较丰富,API设计有点Bizchart的影子
 

动画库

  • react-spring,基于弹簧物理学的现代动画库,自定义程度比较高,且和nextjs配合的比较好(即将支持SSR)
 

国际化

  • FormatJS
  • react-i18next
  • Lingui
 

富文本编辑器

  • Plate
  • Lexical
  • Slate.js

数据库

  • Prisma,好用的ORM框架,支持常用数据库,文档齐全
 

登录鉴权

  • Clerk, 专注登录注册管理的SaaS,配置简单
  • Supabase, 登录鉴权只是他的一部分,简单程度上不如Clerk,不过也挺好用

Chrome 插件开发模板

其他

  • clsx,动态组合className神器,用过都说好
  • swr,官方请求数据的react hooks库,绝无仅有的数据缓存能力,搭配nextjs必备
  • next-sitemap,自动生成sitemap,在nextjs中做seo很好用
  • next-seo,可以让您在 Next.js 项目中更轻松地管理 SEO
  • next-themes,2行代码完美的Next.js深色模式。支持系统偏好设置和任何其他主题
  • html-to-image, html转图片相对html2cavas这种截图库,更加好用
  • css-loader, 各种css-loading组件,开箱即用
  • 稿定,设计封面图,宣传图必备
  • 可画,类似稿定,主要设计宣传海报
  • zx, 使用node编写更简单的脚本语言
  • all-origin, 解决图片下载跨域问题,在使用html-to-image的时候可能会用到
  • png-pixel,生产base64图片,可以用作背景图或占位图
  • localforage,以简易的API来使用浏览器的本地存储来存储数据,可以自动地选择合适的存储引擎( IndexedDB 、 WebSQL 或 localStorage )来进行数据存储
  • Posthog,监控用户行为轨迹的工具,可以查看独立用户的完整行为轨迹,功能很全面,没有有固定免费额度
  • T3, 基于nextjs的脚手架,包含数据库处理,登录鉴权相关
前端常用优化策略常用Nodejs框架推荐