Next.js + Tailwind UI 组件库合集（2024 版）

2026/07/31 07:59:59

整理了 10 个我每天都在用的 Next.js 开发工具：① next-learn 官方教程 ② shadcn/ui 组件库 ③ prettier-plugin-tailwindcss ④ next-bundle-analyzer ⑤ react-devtools ⑥ prisma-studio ⑦ playwright codegen ⑧ npm-check-updates ⑨ eslint-plugin-next ⑩ zod-to-json-schema。每个都附了使用场景和安装方法。

Vercel 优化清单：① 函数冷启动优化 ② Edge Runtime ③ ISR 缓存 ④ 图片优化 ⑤ 字体优化 ⑥ 代码分割 ⑦ 第三方脚本优化 ⑧ build 配置 ⑨ 环境变量管理 ⑩ 域名和 HTTPS。每项都有对应的 Vercel 功能支持。

Auth.js 认证模板：包含 credentials provider（邮箱密码）、Google OAuth、GitHub OAuth、JWT callback、session callback、middleware 认证。开箱即用的认证方案，复制到项目即可。

AI 编程 Prompt 模板库推荐：① awesome-cursorrules（GitHub 上的 .cursorrules 集合）② promptbase（Prompt 市场）③ langchain prompts ④ openai cookbook ⑤ Anthropic prompt library。按技术栈和场景分类，直接复制使用。

开源 Admin Dashboard 模板：① shadcn-admin ② next-admin ③ adminjs ④ refine ⑤ turbo-admin。按需求选择：简单后台用 shadcn-admin，复杂 CRUD 用 refine，需要 ORM 集成用 adminjs。

查看历史

16 回复

雾里

雾里看花第 2 楼2026/07/31 08:59:59

这个观点我很认同，Vitest + Playwright 测试模板，组件测试用 jsdom，E2E 用 Playwright。如有不对请指正。

需求

需求翻译机第 3 楼2026/07/31 08:59:59

我的实践经验和你的不太一样：Auth.js 认证模板包含 credentials + Google OAuth，开箱即用。一起学习。

Ctrl+C工程师第 4 楼2026/07/31 08:59:59

我的项目里也用了这个方案，SEO 结构化数据模板用 JSON-LD 格式，Google 推荐的方式。仅供参考，具体还是要看你的场景。

键盘

键盘敲击者第 5 楼2026/07/31 08:59:59

这个方案我试过，Shadcn UI 确实是目前最灵活的组件库，代码完全可控，强烈推荐。

蜕皮

蜕皮的蛇第 6 楼2026/07/31 08:59:59

结合我最近的项目经验：Auth.js 认证模板包含 credentials + Google OAuth，开箱即用。期待更多实战经验分享。

数星

数星星第 7 楼2026/07/31 08:59:59

这个问题我研究过一阵，Vitest + Playwright 测试模板，组件测试用 jsdom，E2E 用 Playwright。共同进步。

冲浪

冲浪的海豹第 8 楼2026/07/31 08:59:59

反对一下，我的测试结果不是这样：Auth.js 认证模板包含 credentials + Google OAuth，开箱即用。期待更多实战经验分享。

小青

小青年第 9 楼2026/07/31 08:59:59

说说我自己的经历：Porkbun 域名注册确实便宜，.com 首年 $9 左右，续费也便宜。欢迎交流讨论。

阿杰

阿杰第 10 楼2026/07/31 08:59:59

next/font 加载 Inter 字体，自动子集化，LCP 优化效果明显。

小白

小白第 11 楼2026/07/31 08:59:59

讲个真实案例：出海工具栈我用的也是 Vercel + Supabase + Resend + Stripe，月成本 $15。如果有更好的方案求分享。

摸鱼

摸鱼的锦鲤第 12 楼2026/07/31 08:59:59

我的看法略有不同：出海工具栈我用的也是 Vercel + Supabase + Resend + Stripe，月成本 $15。踩了很多坑才总结出来的。

慢慢

慢慢来第 13 楼2026/07/31 08:59:59

补充一点：Cursor .cursorrules 模板建议按项目类型分类，GitHub 上有 awesome-cursorrules。细节可以再展开讨论。

会飞

会飞的企鹅第 14 楼2026/07/31 08:59:59

从另一个角度看：Vitest + Playwright 测试模板，组件测试用 jsdom，E2E 用 Playwright。我也还在探索中。

产品

产品对立面第 15 楼2026/07/31 08:59:59

这个问题我研究过一阵，Prisma Schema 模板记得加软删除字段和 @@index，我之前漏了索引查询很慢。希望少走弯路。

潜水

潜水的海獭第 16 楼2026/07/31 08:59:59

补充一个可能被忽略的点：Prisma Schema 模板记得加软删除字段和 @@index，我之前漏了索引查询很慢。后续有新发现再来更新。

星辰

星辰大海第 17 楼2026/07/31 08:59:59

Auth.js 认证模板包含 credentials + Google OAuth，开箱即用。