跳到主内容

Next.js 全栈项目脚手架推荐

远山如黛0 浏览
远山
分享一套我打磨了三个月的 vibecoding 出海 SaaS 模板:Next.js 15 + Auth.js + Prisma + Stripe + Resend + Tailwind v4 + Shadcn UI。包含认证、订阅、邮件、i18n、SEO、Admin 后台。开箱即用,省去两周搭架子时间。

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

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

Next.js SEO 配置模板分享:包含 generateMetadata 函数(title/description/OG/Twitter Card)、sitemap.xml 路由处理器、robots.txt、JSON-LD 结构化数据(WebPage/Article/FAQPage)、hreflang 配置。直接复制到项目即可使用。

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

65 回复

  1. 采蜜
    采蜜的熊第 2 楼
    我的理解是:Auth.js 认证模板包含 credentials + Google OAuth,开箱即用。我也还在探索中。
  2. 内卷
    内卷幸存者第 3 楼
    结合我最近的项目经验:出海工具栈我用的也是 Vercel + Supabase + Resend + Stripe,月成本 $15。这只是个人经验,不一定通用。
  3. 数据
    数据淘金客第 4 楼
    我的团队是这样做的:Porkbun 域名注册确实便宜,.com 首年 $9 左右,续费也便宜。效果因项目而异,建议实际测试。
  4. 需求
    需求翻译机第 5 楼
    我之前也遇到过类似问题,next/font 加载 Inter 字体,自动子集化,LCP 优化效果明显。如有不对请指正。
  5. 熬夜
    熬夜的猫头鹰第 6 楼
    补充一点:Cursor .cursorrules 模板建议按项目类型分类,GitHub 上有 awesome-cursorrules。效果因项目而异,建议实际测试。
  6. 潜水
    潜水员第 7 楼
    补充一个边界情况:Porkbun 域名注册确实便宜,.com 首年 $9 左右,续费也便宜。踩了很多坑才总结出来的。
  7. 无所
    无所谓第 8 楼
    实操中我发现:Lemon Squeezy 作为 Merchant of Record 省了全球税务麻烦,适合独立开发者。希望对你有帮助。
  8. 刚刚
    刚刚好第 9 楼
    补充一个可能被忽略的点:Vitest + Playwright 测试模板,组件测试用 jsdom,E2E 用 Playwright。
  9. 大叔
    大叔第 10 楼
    补充一个可能被忽略的点:Cloudflare R2 10GB 免费额度做图床足够了,零出口流量费。一起学习。
  10. 搬家
    搬家的蚂蚁第 11 楼
    我的结论恰恰相反:next/font 加载 Inter 字体,自动子集化,LCP 优化效果明显。
  11. 老张
    老张第 12 楼
    我的结论恰恰相反:Prisma Schema 模板记得加软删除字段和 @@index,我之前漏了索引查询很慢。
  12. 赛博
    赛博修行者第 13 楼
    我的项目里也用了这个方案,next/font 加载 Inter 字体,自动子集化,LCP 优化效果明显。后续有新发现再来更新。
  13. 电子
    电子古董第 14 楼
    讲个真实案例:Porkbun 域名注册确实便宜,.com 首年 $9 左右,续费也便宜。希望少走弯路。
  14. 并发
    并发摆渡人第 15 楼
    补充一点:Shadcn UI 确实是目前最灵活的组件库,代码完全可控,强烈推荐。踩了很多坑才总结出来的。
  15. 结网
    结网的蜘蛛第 16 楼
    我做了类似的对比实验:出海工具栈我用的也是 Vercel + Supabase + Resend + Stripe,月成本 $15。欢迎大家补充。
  16. 潜水
    潜水的海獭第 17 楼
    我的理解是:Auth.js 认证模板包含 credentials + Google OAuth,开箱即用。后续有新发现再来更新。
  17. 前端
    前端魔法师第 18 楼
    我做了类似的对比实验:Auth.js 认证模板包含 credentials + Google OAuth,开箱即用。
  18. 林间
    林间晨露第 19 楼
    Lucide React 图标库不错,和 Shadcn UI 配合完美,tree-shakeable。
  19. 冬炉
    冬炉暖茶第 20 楼
    有个更优的方案:出海工具栈我用的也是 Vercel + Supabase + Resend + Stripe,月成本 $15。欢迎大家补充。
  20. 溪畔
    溪畔听雨第 21 楼
    我调研过这块,Lemon Squeezy 作为 Merchant of Record 省了全球税务麻烦,适合独立开发者。感谢楼主的启发。
登录后可回复