NextDevKit - 终极 Next.js 模板，解决部署难题

[ligz]

大家好呀，好久不见。距离上次在这里分享我博客 独立开发技术栈 帖子已经过去一年多了。

今天再来分享一篇新博客 《终极 Next.js 模板》

在过去两个月的时间里，我一直致力于开发一个让我自己满意的 Next.js 模板，到今天为止，这个模板已经非常接近我想要的样子，并且支持部署到所有云平台中。包括但不限于 Vercel, Cloudflare Workers, AWS, Railway, Fly.io, GCP, Azure 等。所以也是时候推出 NextDevKit 和大家见面啦🔥

其实现在优秀的 Next.js 模板挺多的，只要你在 Google 中搜索 nextjs saas template 或者 nextjs starter kit，你可以找到很多优秀的模板，包括但不限于开源项目的和商业付费的。

为什么我开发一个 Next.js 模板？

那为什么我还要自己重新开发一套 Nextjs 的模板呢，一方面是因为这些模板或多或少都存在一些问题，以一些开源的项目为例，例如 Vercel 官方的 Saas 模板，这些模版的功能过于简单，我每次启动一个新的项目，我都需要手动添加一些功能，比如发送邮件，支付，连接我不同的数据库以应对不同的需求。

所以我之前每次启动新项目的时候，我都是去找不同的模板来满足我的需求，但是这样每次都要花费我很多时间，每次都有新的学习成本。

那么为什么我不直接购买一个商业付费的模板呢？其实我之前已经购买了 https://supastarter.dev/ 这个模板，这个模版其实挺好的，功能齐全，代码写的也不错，开发起来也还算丝滑。

UI 样式问题

但是这个模板有几个问题是我一直比较在意的，第一个是这个模板的 demo 样式太简陋了，虽然后端功能齐全，但是前端样式太简陋了，大家可以对比官网 和 demo 的 landing page ，可以发现很明显启动的 demo UI 样式太简陋了，导致每次我都需要重新设计 landing page 。

其实这也是大部分商业付费模板的通病，比较出名的还有 shipfast 和 makerkit 等，大家可以访问 demo 页面自行查看效果。

我猜测可能是因为大部分模板都是由开发者来主导，所以对于 UI/UX 等细节的打磨上，就比较放松。所以我这次在设计模板的 UI 上，也是花费了大量的时间，从 landing page 到博客，再到 dashboard 等，都花了很多的时间在 UI 调优上，大家可以访问 nextdevkit demo 和 nextdevkit workers demo 查看效果。

复杂度和功能性

第二个问题是复杂度的问题，这个模板虽然功能齐全，但是代码的复杂度挺高的，因为为了支持不同的平台和不同的功能，例如 Email 要支持 Resend ，Plunk ，Mailgun 等，所以这个模板采用的是 monorepo 的架构，并且使用了大量 的第三方库，monorepo 的架构虽然可以方便的进行依赖管理，但是学习成本和维护成本都挺高的。

所以，我这次在设计模板的时候，也是尽可能的简化代码的复杂度，使用传统的 Next.js 的项目结构，并且尽可能的减少第三方库的使用。

但说实话，从我开发这个模板的过程中，发现对于一个商业付费模板而言，复杂度和功能性的博弈是最难把握的一点，加入一些功能是很容易的，但是要保证学习成本和用户的维护成本在可控范围内，并且还要保证代码的易读性和可维护性，就很难了。

没有人想要购买到的是一个功能非常简单，样式非常简陋的模板，毕竟这意味着需要花费大量的时间重新造轮子和写代码。但我想的是，可能也没有人想要购买到的是一个功能和臃肿并存的模板，这意味着学习成本和维护成本都非常高，每次使用可能都要去删除一些不需要的功能和代码，并且还要花费大量的时间去理解使用不到的代码。

所以这次设计的代码，我的首要目标是保证完整的功能性，例如：

• 数据库集成
• 认证
• 邮件
• 支付
• 存储
• 博客
• 文档
• 国际化
• 分析
• 多主题
• SEO 优化

至于还有其他的一些功能，例如 AI ，更加丰富的组件，更加定制化的功能，虽然在后续版本中也会陆续支持，但是我会考虑以其它的方式进行支持，例如通过 Cursor ，MCP 等方式进行支持，这样可以更加的灵活，不会在代码中无限制的添加功能。

部署的难题

第三个问题是现在市面上所有的 Next.js 模板，都存在一个共同的问题，那就是部署的难题。

因为 Next.js 的部署方式非常多样，包括但不限于 Vercel, Cloudflare Workers, AWS, Railway, Fly.io, GCP, Azure 等。

每个平台都有不同的优缺点，例如 Next.js 的官方部署平台 Vercel，虽然部署非常方便，对于功能的支持也是最全面的，但是收费有时候需要额外注意，例如 Image Optimization 和 ISR 等，对于某些个人的开发项目，例如非盈利的项目和访问量非常大的项目，可能会进入价格和为爱发电的博弈中。

还有一大类是像 Cloudflare Workers 这样的平台，价格非常的便宜，每个月 $5 就可以放心大胆的使用 Workers, R2, D1, KV 等等资源，并且还有免费的 CDN 和 DNS 服务，对于个人开发者来说，是一个非常不错的选择。

但是 Cloudflare 的缺点也很明显，那就是社区和官方对于 Next.js 的支持到目前为止都一般，如果你要重头开发，基本一步一个坑，而且还很难找到解决方案，我在设计 NextDevKit Cloudflare workers 模板的时候，也是踩了很多的坑，因为对于很多库和第三方的不支持，然后又要保证每个模版的功能性一致，所以还重构了很多代码，替换了一些库。

特别是官方的 Cloudflare Pages 项目，因为只支持 Edge 环境，几乎没有办法支持这个 Next.js 模板的全部功能，所幸的是有 Opennext 这个项目，虽然也有一些小坑，但是最终还是支持了全部的功能。

最后还有一类是像 AWS, GCP, Azure 这样的云平台，因为有一些项目的合规性和隐私性问题，所以必须选择这些大的云平台来部署。

这些平台虽然功能支持的非常全面，但是部署起来非常麻烦，需要花费大量的时间去配置和优化，每次都需要从 Infra 开始搭建。

所以，我这次专门设计了 NextDevKit AWS 模板，也是尽可能的简化部署的难度，使用 SST 来部署，不需要从 Infra as Code 开始，只需要使用 SST 的 CLI 工具，就可以非常方便的部署到 AWS 上。并且还支持 Serverless 的架构和 ECS 容器两种部署方式，对于企业级开发来说，是一个非常不错的选择。

最后，是对于容器部署的支持，本次设计的模板除了对 Cloudflare Workers 和 AWS 原生支持来减少部署的难度之外，其它平台都暂时仅支持容器部署，像 Railway, Fly.io, Dokploy 等。

其实上面的部署需求是我日常的开发难题，因为我的之前有些项目是非盈利的，并且访问量还挺大，部署在 Vercel 上一直需要担心账单，所以像 Cloudflare Workers 这样的平台就非常适合我。还有一些项目是企业级的，是直接管理在外国客户的 AWS 上，每次构建一个像 Next.js AI demo 这样的项目都要从 Infra 开始搭建，需要考虑安全和功能性等等，非常麻烦。

所以，我这次专门设计了三种不同的模板和部署方式，来满足不同的需求。其中 Cloudflare Workers 和 AWS 都是原生的平台支持的。

原文有些长，更多的内容大家可以访问我的博客 终极 Next.js 模板 获取更多信息。

因为该模板目前还处于刚开发完成的阶段，所以对于代码和文档而言还是有一些不完善的地方，所以目前为了补贴初期的种子用户，推出史诗级早鸟优惠，输入优惠码 HAPPYCODEINGV2EX 获得 50% 的折扣！

🎁 抽奖

V2EX 专属福利：评论抽奖送价值最高的 $219 的 All in One 套餐一份

为了感谢 V 友们一直以来的支持，我将在本帖的评论中送出模板最高套餐一份，价值 $219 的 All in One 套餐。

参与方式：

在本帖下任意回复即可参与抽奖。可以聊聊你对使用过模板的看法、对产品的建议，或者就留个言“支持独立开发”都行。

开奖方式：

截止时间：2025 年 7 月 21 日（下周一）中午 12:00

我会在截止后，使用第三方随机数工具在所有有效楼层中进行抽取，并全程录屏，保证公平公正。

结果会直接在本帖更新，并回复中奖楼层。

再次感谢大家的时间和支持，独立开发不易，你们的每一个回复和关注都是我继续打磨产品的最大动力。

[xyj05381]

支持独立开发

[Tupig]

支持独立开发

[xiaohanyu]

好奇 OP 怎样看待 https://www.next-forge.com/ 这个模板

[AuYuHui]

支持独立开发

[PanicByte]

支持独立开发

[bugsnail]

ECS 自部署好评，各大平台看似便捷的部署方式，却因为平台差异需要兼容确实是痛点，对于偏后端开发的独立开发来说，非常有用

[ligz]

@xiaohanyu 开源模板最大的问题就是长期维护和写文档支持很难坚持，为爱发电有点难，但这个被 Vercel 官方收购了也挺好的，对于 Next.js 的支持没得说。https://demo.next-forge.com/ 这个 demo 还是有点简陋的，对我来说没有办法开箱即用，但是如果自己已经有设计想法了，用开源的加 Vibe Coding 也挺好的

[ligz]

@bugsnail 是的，特别是 AWS 这种，之前我每次写 tf 或者 pulumi 管理 Infra ，写个 AI demo 在 Infra 上花的时间比开发还多

[ARMILKCHEN]

支持独立开发，一直有看博主的博客，收获很多。

[Teresa789]

支持独立开发

[BeijingBaby]

这类集成多种功能特性的“模板”的用户群体应该不大。

1 、想要更灵活控制的开发者，有自己的技术选型考虑和偏好，集成的不一定是自己想要的。
2 、想要开箱即用的浅开发者，感觉好像又差点什么，比如如果你是一个完整的 cms 类似 wordpress 这样的 blog 系统，直接拿来就能用，那也好说。
感觉这类模板就是处于中间层，只是把各个技术组件组合在一起，不是很好用。

[kidding]

支持一下

[ligz]

@BeijingBaby 其实市场还是有的，国外付费模板像 shipfast, supastarter, makerkit 等收入都挺高的，技术选型这次基本上是 AI First ，AI 写什么强我就用什么，当然这个见仁见智哈，目标是能减少大家启动项目的时间，如果不满意，逛逛博客周五摸鱼学习学习也不错哈哈

[bugsnail]

我感觉独立开发的后端也是个伪命题，我看过许多 nextjs + serverless 的架构设计的，稍微复杂一点的涉及评论保存，用户信息之类的，可用性还不如自建服务器搭个 mysql + (java/go/php) api 稳定，这里的可用性只是泛指多点几个页面就报错啦，或者用的是免费套餐响应很慢之类的，体验就是差点意思。

当然我不是说服务商不够稳定（当然也有可能）就是开发者对接这些服务的时候，可能没有对接好或者错误处理没有做好之类的。

[Huramkin]

支持一下

[crankyhuo]

支持独立开发

[nodejx]

支持

[Shelios]

支持独立开发

[sayyiku]

很不错，支持

[ligz]

@bugsnail #14 用好了生产环境也没啥大问题的，我的主站 https://nextdevkit.com 就是用的 workers 模板，为了减少服务器账单托管在 cloudflare workers 这种纯 Serverless 环境，前面是 CF 的免费 CDN ，数据库都是 D1 这种 edge sqlite ，昨天实践下来应付大访问量、后端支付、邮件、auth 等都没啥大问题。

[GiveMeABigName]

支持独立开发，我一直想搞，但是没有头绪哦

[molvqingtai]

支持一下，前段时间也用这套技术栈撸了一个网站，tips: 配置下 next 的 webpack 可以减少 resend 几百 kb 的，毕竟 cf worker 限制 3mb

[molvqingtai]

https://github.com/resend/resend-node/pull/532#issuecomment-3051567850

[summer1942]

支持一下

[zzfly256]

支持独立开发

[bugsnail]

@ligz 是的，就是需要用好了才行，我的意思就是用好也不太容易

还不如用传统的方式，用好成本也不低，还放弃了扩展性

[jimbray]

支持独立开发！

[lzq872904847]

支持独立开发

[veau]

支持独立开发

[longline]

支持独立开发

[catsky]

国外好几个类似的盈利前景都很不错

[linKnowEasy]

感觉非常不错. 移动端适配也挺好的

[dawnsw]

支持独立开发

[awkamo]

用过 opennext ，感觉提供对 cloudflare worker 和 docker 的支持是非常明智的，能覆盖绝大多数部署场景了

[isb]

支持一下 如果是 prisma 就更好了

[alexmy]

支持独立开发。

[admol]

支持一下

[xiaohanyu]

有个问题，就是 next.js 在 cloudflare pages 上似乎有挺多不兼容的，不知道 OP 有没有碰到这种问题。

[oneisall8955]

支持独立开发。

[swim2sun]

分母

[zyjqjnh]

支持独立开发。

[defunct9]

支持独立开发，楼主很有想法，好用的话想试用一下。

[ligz]

@xiaohanyu #38 博客里面谈到了，我去年就是用的 pages 的 edge runtime ，各种坑，用的我都已经放弃了，今年是换了 opennext 后用 workers 的 nodejs runtime 才下定决心原生支持的。这个兼容度比那个官方的 pages 好多了，pages 在我看来只能部署静态网页

[fristblood]

支持独立开发

[ligz]

@defunct9 部署了四套 Live Demo 环境，可以随意逛逛点一点哈哈，四套主题分别是 Cosmic Night, Clean Slate, Claude, Pastel Dreams ，模板完美支持 tweakcn 主题。

- [NextDevKit 官网托管在 Workers 上]( https://nextdevkit.com)
- [NextDevKit Demo 主题托管在 Vercel 上]( https://demo.nextdevkit.com)
- [NextDevKit Workers Demo 主题托管在 Workers 上]( https://workers.nextdevkit.com)
- [NextDevKit AWS Demo 主题托管在 AWS 上]( https://aws.nextdevkit.com)

[sgrhdhjdj]

支持独立开发

[defunct9]

八错八错，看了托管网站。研究文档去......

[Jiki]

这个赛道还不错，有精力可以把 Dashboard 的设计再优化一下

[yoghurtguy]

直击我的痛点,next 不错,模板看似很多,但总是难有何时的,另一个问题也就是部署问题,与 Vercel 绑定太深了,还有很多坑

[coter]

不错不错，支持一下

[bugsnail]

@ligz 左下角，输入你的邮箱，icon 有点没有对齐

[fliu2476]

支持一下，刚好最近在做相关项目

[xiaohanyu]

@ligz 感谢回复。

> 今年是换了 opennext 后用 workers 的 nodejs runtime 才下定决心原生支持的。

这篇 blog 的具体链接有么？确实 pages 对 next.js 各种坑…稍上点规模就不太行，netlify 我用下来也是偶尔会有点小问题，vercel 当然没问题但是吧，上贼船容易下船难。

[tsin1618]

支持独立开发

[ligz]

@xiaohanyu #53 可以参考 Opennext 的官方解释： https://opennext.js.org/cloudflare ，后面有时间会专门出一篇 Next.js 部署指南的博客

[coter]

希望加上弹窗登录，支持 creem 支付，加上积分功能，dashboard 有点简单，管理后台没看到，希望越来越好

[skwfar]

之前用 vercel 一不小心就超用量，想转移 cf 的时候的确头疼，支持

[Lemonadeccc]

支持独立开发

[fancyhare]

支持独立开发

[Echo521]

支持独立开发

[rieshinn]

支持 OP ，支持独立开发

[NGGTI]

支持独立开发

[kfayay]

支持 OP ，对于初创公司，快速启动还是很有帮助的

[prccn]

支持一下

[canxin]

支持独立开发

[xiangchen2011]

支持独立开发

[morton098]

支持独立开发

[safeall]

支持独立开发

[easymbol]

支持一下，又发现一个大佬

[zhuawadao]

支持

[Vicissitude]

支持独立开发

[dreamage]

支持独立开发

[tangxiangpi325]

我用 coolify 管理我的 vps ，然后用 shipthing.com 模板通过容器方式部署，很丝滑。对于小白 vercel 是最简单的，对于有一定技术能力的来说容器是最好的选择，vercel 一旦起量就得付费。这个模板也便宜 99$

[pkwenda]

支持独立开发

[i8k]

支持独立开发，最近一直在用 nextjs ，学习了

[kiddyu]

支持独立开发

[wukongkong]

支持，有模版还是非常方便的

[DeepUse]

支持独立开发

[miaowo]

优秀！！！

[RuiCBai]

支独立开发。 后续有没有支持 paddle 支付的计划呢

[Aixtuz]

先关注一下~

[ligz]

@fliu2476 截止今天中午 12 点，恭喜 @fliu2476 中奖。

中奖录屏记录： https://jmp.sh/whrhc7D4

领取方式： https://guangzhengli.com/blog/zh/build-nextjs-template 博客最后有一个微信联系方式，添加这个微信并提供你的邮箱 + GitHub 账号+V2EX ID+一个 V2EX 设置的截图（ https://v2ex.com/settings ），然后会给你提供 All in One Package 所有权限和资料。

感谢大家的参与与支持。

[fliu2476]

@ligz 感谢大佬，已经收到邀请，我这就开始学习去~