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

65 天前
 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 。

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

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

复杂度和功能性

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

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

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

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

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

至于还有其他的一些功能,例如 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

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

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

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

4681 次点击
所在节点    分享创造
83 条回复
zyjqjnh
65 天前
支持独立开发。
defunct9
65 天前
支持独立开发,楼主很有想法,好用的话想试用一下。
ligz
65 天前
@xiaohanyu #38 博客里面谈到了,我去年就是用的 pages 的 edge runtime ,各种坑,用的我都已经放弃了,今年是换了 opennext 后用 workers 的 nodejs runtime 才下定决心原生支持的。这个兼容度比那个官方的 pages 好多了,pages 在我看来只能部署静态网页
fristblood
65 天前
支持独立开发
ligz
65 天前
@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
65 天前
支持独立开发
defunct9
65 天前
八错八错,看了托管网站。研究文档去......
Jiki
65 天前
这个赛道还不错,有精力可以把 Dashboard 的设计再优化一下
yoghurtguy
65 天前
直击我的痛点,next 不错,模板看似很多,但总是难有何时的,另一个问题也就是部署问题,与 Vercel 绑定太深了,还有很多坑
coter
65 天前
不错不错,支持一下
bugsnail
65 天前
@ligz 左下角,输入你的邮箱,icon 有点没有对齐
fliu2476
65 天前
支持一下,刚好最近在做相关项目
xiaohanyu
65 天前
@ligz 感谢回复。

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

这篇 blog 的具体链接有么?确实 pages 对 next.js 各种坑…稍上点规模就不太行,netlify 我用下来也是偶尔会有点小问题,vercel 当然没问题但是吧,上贼船容易下船难。
tsin1618
65 天前
支持独立开发
ligz
65 天前
@xiaohanyu #53 可以参考 Opennext 的官方解释: https://opennext.js.org/cloudflare ,后面有时间会专门出一篇 Next.js 部署指南的博客
coter
65 天前
希望加上弹窗登录,支持 creem 支付,加上积分功能,dashboard 有点简单,管理后台没看到,希望越来越好
skwfar
65 天前
之前用 vercel 一不小心就超用量,想转移 cf 的时候的确头疼,支持
Lemonadeccc
64 天前
支持独立开发
fancyhare
64 天前
支持独立开发
Echo521
64 天前
支持独立开发

这是一个专为移动设备优化的页面(即为了让你能够在 Google 搜索结果里秒开这个页面),如果你希望参与 V2EX 社区的讨论,你可以继续到 V2EX 上打开本讨论主题的完整版本。

https://www.v2ex.com/t/1145981

V2EX 是创意工作者们的社区,是一个分享自己正在做的有趣事物、交流想法,可以遇见新朋友甚至新机会的地方。

V2EX is a community of developers, designers and creative people.

© 2021 V2EX