😀 在使用Nextjs和Tailwind开发时可能会用到的三方优质资源和库(不定期更新),欢迎大家补充
📝 官方文档
💡 强烈建议看英文文档,中文文档更新的没有英文文档及时,且翻译水准良莠不齐
优质组件库(使用Tailwind)
- headlessui,TW官方组件库,现有组件比较精致,缺点是组件数量比较少
- daisyui,组件较多,设计风格比较欧美,有多个主题可选,适合landing页开发
- shadcn/ui,组件较多,设计简洁,适合做后台系统,并且它可以单个组件安装,非常推荐
- tremor/ui,有不少chart组件,设计简洁漂亮,适合dashboard页面开发
- hyperui,免费的ui
landing页优质模版(基于Tailwind)
- floatui,可用模版没那么多,但大部分免费,在免费里算设计精良的
- flowbite,可用组件和模版较多,设计的也比较好看,但相当一部分是收费的
- landingfolio,landing页模版大全,寻找设计灵感必看
- tailwindawesome,模版大全,跟上面一个类似
icon库
- heroicons,官方推荐的svg库
- reacticons,icon市场,选择非常丰富
表单相关
- react-hook-form,高质量表单控制校验库,以性能好著称
React Hooks库
- ahooks,阿里出的Hooks库,api比较全
- [beautiful-react-hooks](beautiful-react-hooks - documentation),api数量没那么多,但质量还可以
- react-use,api较丰富,跟ahooks有不少重合的
图表库
- recharts,使用 React 和 D3 构建的重新定义的图表库,界面比较简洁,demo比较丰富,API设计有点Bizchart的影子
动画库
- react-spring,基于弹簧物理学的现代动画库,自定义程度比较高,且和nextjs配合的比较好(即将支持SSR)
- Framer Motion,用法相对简单,照着demo就能写出很优雅的动画
- reat-transititon-group,老牌react动画库,自定义程度很高,写起来稍微麻烦点
- react-motion, 跟第一个有点像,看提交记录有几年没更新了
其他
- clsx,动态组合className神器,用过都说好
- tailwind-merge,合并tailwind且能避免样式冲突
- swr,官方请求数据的react hooks库,绝无仅有的数据缓存能力,搭配nextjs必备
- next-sitemap,自动生成sitemap,在nextjs中做seo很好用
- next-seo,可以让您在 Next.js 项目中更轻松地管理 SEO
- next-themes,2行代码完美的Next.js深色模式。支持系统偏好设置和任何其他主题
- react-hot-toast,轻量级小于5kb的弹窗消息组件