Nextjs开发优质资源汇总(建议收藏)

1,300 阅读2分钟

😀 在使用Nextjs和Tailwind开发时可能会用到的三方优质资源和库(不定期更新),欢迎大家补充

📝 官方文档

Tailwind官方文档网站

Nextjs官方文档

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

优质组件库(使用Tailwind)

  • headlessui,TW官方组件库,现有组件比较精致,缺点是组件数量比较少
  • daisyui,组件较多,设计风格比较欧美,有多个主题可选,适合landing页开发
  • shadcn/ui,组件较多,设计简洁,适合做后台系统,并且它可以单个组件安装,非常推荐
  • tremor/ui,有不少chart组件,设计简洁漂亮,适合dashboard页面开发
  • hyperui,免费的ui

landing页优质模版(基于Tailwind)

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

icon库

表单相关

React Hooks库

图表库

  • 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的弹窗消息组件