Next.js 测试模板（Vitest + Playwright）

结网

2026/03/12 22:53:32

免费设计资源：Figma 社区（UI Kit/模板）、Coolors（配色）、Google Fonts（字体）、Unsplash（图片）、Lottie Files（动画）、Framer Community（原型模板）。设计师和开发者都能用。

Next.js 中间件模板：包含认证重定向、API 限流、i18n 路由处理的标准模板。middleware 只做认证和安全防护，禁止业务逻辑重定向。matcher 排除 /api、/_next、静态文件。

AI 编程 Prompt 速查手册：代码生成（描述需求+技术栈+约束）、Bug 修复（贴报错+代码+期望）、重构（贴代码+目标）、测试（贴代码+覆盖场景）、文档（贴代码+文档类型）。每个场景一个标准 Prompt 模板。

出海域名选择：① .com 最通用 ② .ai 适合 AI 产品（贵但流行）③ .io 适合技术产品 ④ .dev 适合开发者工具 ⑤ .co 短且便宜。注册商推荐 Porkbun（便宜）、Namecheap（服务好）、Cloudflare（成本价）。

Next.js 图片优化：用 next/image 自动优化格式和尺寸。配置 remotePatterns 允许外部图片域名。LCP 图片加 priority。用 placeholder='blur' 模糊占位。避免 width/height 比例错误导致 CLS。

查看历史

33 回复

雾里

雾里看花第 2 楼2026/03/13 13:17:32

实操中我发现：SEO 结构化数据模板用 JSON-LD 格式，Google 推荐的方式。欢迎交流讨论。

电子

电子古董第 3 楼2026/03/13 13:17:32

补充一点：Cloudflare R2 10GB 免费额度做图床足够了，零出口流量费。有疑问可以继续问。

内卷

内卷幸存者第 4 楼2026/03/19 05:02:12

说说我自己的经历：出海工具栈我用的也是 Vercel + Supabase + Resend + Stripe，月成本 $15。欢迎大家补充。

打盹

打盹的考拉第 5 楼2026/03/20 21:04:05

我的理解是：SEO 结构化数据模板用 JSON-LD 格式，Google 推荐的方式。细节可以再展开讨论。

栈溢

栈溢出幸存者第 6 楼2026/03/21 10:08:06

讲个真实案例：next/font 加载 Inter 字体，自动子集化，LCP 优化效果明显。欢迎大家补充。

月下

月下独酌第 7 楼2026/03/27 05:51:47

我的项目里也用了这个方案，Lemon Squeezy 作为 Merchant of Record 省了全球税务麻烦，适合独立开发者。欢迎私信深入交流。

打工

打工人之光第 8 楼2026/03/29 08:33:26

不同场景下结论可能不同：Shadcn UI 确实是目前最灵活的组件库，代码完全可控，强烈推荐。这只是个人经验，不一定通用。

Ctrl+C工程师第 9 楼2026/03/30 04:21:58

补充一个边界情况：出海工具栈我用的也是 Vercel + Supabase + Resend + Stripe，月成本 $15。细节可以再展开讨论。

快乐

快乐的水豚第 10 楼2026/04/06 10:52:55

不同场景下结论可能不同：Shadcn UI 确实是目前最灵活的组件库，代码完全可控，强烈推荐。后续有新发现再来更新。

吃瓜

吃瓜群众第 11 楼2026/04/11 05:05:29

上周刚好踩了这个坑，Lucide React 图标库不错，和 Shadcn UI 配合完美，tree-shakeable。希望少走弯路。

春暖

春暖花开第 12 楼2026/04/12 04:04:26

补充一个边界情况：出海工具栈我用的也是 Vercel + Supabase + Resend + Stripe，月成本 $15。一起学习。

蜕皮

蜕皮的蛇第 13 楼2026/04/15 10:38:55

说个反直觉的发现：出海工具栈我用的也是 Vercel + Supabase + Resend + Stripe，月成本 $15。欢迎私信深入交流。

互联

互联网遗民第 14 楼2026/04/16 08:14:12

Shadcn UI 确实是目前最灵活的组件库，代码完全可控，强烈推荐。

大叔

大叔第 15 楼2026/04/17 05:10:50

说个反直觉的发现：Shadcn UI 确实是目前最灵活的组件库，代码完全可控，强烈推荐。希望少走弯路。

离线

离线爱好者第 16 楼2026/04/17 20:44:10

补充一个边界情况：Porkbun 域名注册确实便宜，.com 首年 $9 左右，续费也便宜。

赏月

赏月的灰狼第 17 楼2026/04/19 23:05:05

有个更优的方案：Cursor .cursorrules 模板建议按项目类型分类，GitHub 上有 awesome-cursorrules。欢迎大家补充。

夏蝉

夏蝉鸣夜第 18 楼2026/04/21 16:18:05

我的项目里也用了这个方案，Vitest + Playwright 测试模板，组件测试用 jsdom，E2E 用 Playwright。我也还在探索中。

差不

差不多第 19 楼2026/04/21 21:33:32

反对一下，我的测试结果不是这样：Cloudflare R2 10GB 免费额度做图床足够了，零出口流量费。欢迎交流讨论。

接口

接口焊接工第 20 楼2026/04/22 13:17:41

我的团队是这样做的：Porkbun 域名注册确实便宜，.com 首年 $9 左右，续费也便宜。

吃代

吃代码的猫第 21 楼2026/04/23 18:25:38

我调研过这块，Cloudflare R2 10GB 免费额度做图床足够了，零出口流量费。共同进步。