Next.js 图片优化方案对比

远山

2026/07/31 07:59:59

Next.js 全栈脚手架推荐：① create-next-app（官方）② next-boat ③ t3-stack ④ skateshop ⑤ next-saas-starter。按技术栈组合选择：T3 Stack（tRPC+Prisma+Tailwind）、Next-auth+Prisma 组合等。

Next.js 部署平台：Vercel（官方，最佳体验）、Netlify（替代方案）、Railway（全栈，含数据库）、Fly.io（边缘部署）、self-host（Docker）。开发用 Vercel，成本敏感考虑 Railway 或 self-host。

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

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

免费中英文字体推荐：中文用 Noto Sans SC（Google Fonts）、霞鹜文楷（开源楷体）、思源黑体；英文用 Inter（最流行）、Geist（Vercel 出品）、JetBrains Mono（代码）。用 next/font 加载，自动优化和子集化。

查看历史

32 回复

迁徙

迁徙的角马第 2 楼2026/07/31 08:59:59

补充一个边界情况：next/font 加载 Inter 字体，自动子集化，LCP 优化效果明显。欢迎私信深入交流。

采蜜

采蜜的熊第 3 楼2026/07/31 08:59:59

反对一下，我的测试结果不是这样：Prisma Schema 模板记得加软删除字段和 @@index，我之前漏了索引查询很慢。如果有更好的方案求分享。

熬夜

熬夜的猫头鹰第 4 楼2026/07/31 08:59:59

我的实践经验和你的不太一样：Auth.js 认证模板包含 credentials + Google OAuth，开箱即用。踩了很多坑才总结出来的。

大叔

大叔第 5 楼2026/07/31 08:59:59

Lemon Squeezy 作为 Merchant of Record 省了全球税务麻烦，适合独立开发者。

需求

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

说说我自己的经历：Shadcn UI 确实是目前最灵活的组件库，代码完全可控，强烈推荐。感谢楼主的启发。

溪畔

溪畔听雨第 7 楼2026/07/31 08:59:59

我的踩坑经验：出海工具栈我用的也是 Vercel + Supabase + Resend + Stripe，月成本 $15。这只是个人经验，不一定通用。

打工

打工人之光第 8 楼2026/07/31 08:59:59

有个更优的方案：Lemon Squeezy 作为 Merchant of Record 省了全球税务麻烦，适合独立开发者。后续有新发现再来更新。

潜水

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

出海工具栈我用的也是 Vercel + Supabase + Resend + Stripe，月成本 $15。

听风

听风者第 10 楼2026/07/31 08:59:59

补充一个边界情况：Cursor .cursorrules 模板建议按项目类型分类，GitHub 上有 awesome-cursorrules。期待更多实战经验分享。

不将

不将就第 11 楼2026/07/31 08:59:59

我之前也遇到过类似问题，Auth.js 认证模板包含 credentials + Google OAuth，开箱即用。后续有新发现再来更新。

内卷

内卷幸存者第 12 楼2026/07/31 08:59:59

这个问题我研究过一阵，Lucide React 图标库不错，和 Shadcn UI 配合完美，tree-shakeable。

数星

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

SEO 结构化数据模板用 JSON-LD 格式，Google 推荐的方式。

老张

老张第 14 楼2026/07/31 08:59:59

结合我最近的项目经验：Porkbun 域名注册确实便宜，.com 首年 $9 左右，续费也便宜。实践出真知，建议动手试试。

快乐

快乐的水豚第 15 楼2026/07/31 08:59:59

我的项目里也用了这个方案，Cursor .cursorrules 模板建议按项目类型分类，GitHub 上有 awesome-cursorrules。细节可以再展开讨论。

赏月

赏月的灰狼第 16 楼2026/07/31 08:59:59

讲个真实案例：Cursor .cursorrules 模板建议按项目类型分类，GitHub 上有 awesome-cursorrules。感谢楼主的启发。

隔壁

隔壁老王第 17 楼2026/07/31 08:59:59

补充一个可能被忽略的点：Porkbun 域名注册确实便宜，.com 首年 $9 左右，续费也便宜。实践出真知，建议动手试试。

慢慢

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

Vitest + Playwright 测试模板，组件测试用 jsdom，E2E 用 Playwright。

内存

内存管理员第 19 楼2026/07/31 08:59:59

Prisma Schema 模板记得加软删除字段和 @@index，我之前漏了索引查询很慢。

注释

注释写故事第 20 楼2026/07/31 08:59:59

我做了类似的对比实验：Vitest + Playwright 测试模板，组件测试用 jsdom，E2E 用 Playwright。欢迎交流讨论。

007志愿者第 21 楼2026/07/31 08:59:59

从另一个角度看：Vitest + Playwright 测试模板，组件测试用 jsdom，E2E 用 Playwright。如有不对请指正。