大家好呀,好久不见。距离上次在这里分享我博客 独立开发技术栈 帖子已经过去一年多了。
今天再来分享一篇新博客 《终极 Next.js 模板》
在过去两个月的时间里,我一直致力于开发一个让我自己满意的 Next.js 模板,到今天为止,这个模板已经非常接近我想要的样子,并且支持部署到所有云平台中。包括但不限于 Vercel, Cloudflare Workers, AWS, Railway, Fly.io, GCP, Azure 等。所以也是时候推出 NextDevKit 和大家见面啦🔥
其实现在优秀的 Next.js 模板挺多的,只要你在 Google 中搜索 nextjs saas template
或者 nextjs starter kit
,你可以找到很多优秀的模板,包括但不限于开源项目的和商业付费的。
那为什么我还要自己重新开发一套 Nextjs 的模板呢,一方面是因为这些模板或多或少都存在一些问题,以一些开源的项目为例,例如 Vercel 官方的 Saas 模板,这些模版的功能过于简单,我每次启动一个新的项目,我都需要手动添加一些功能,比如发送邮件,支付,连接我不同的数据库以应对不同的需求。
所以我之前每次启动新项目的时候,我都是去找不同的模板来满足我的需求,但是这样每次都要花费我很多时间,每次都有新的学习成本。
那么为什么我不直接购买一个商业付费的模板呢?其实我之前已经购买了 https://supastarter.dev/ 这个模板,这个模版其实挺好的,功能齐全,代码写的也不错,开发起来也还算丝滑。
但是这个模板有几个问题是我一直比较在意的,第一个是这个模板的 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 的项目结构,并且尽可能的减少第三方库的使用。
但说实话,从我开发这个模板的过程中,发现对于一个商业付费模板而言,复杂度和功能性的博弈是最难把握的一点,加入一些功能是很容易的,但是要保证学习成本和用户的维护成本在可控范围内,并且还要保证代码的易读性和可维护性,就很难了。
没有人想要购买到的是一个功能非常简单,样式非常简陋的模板,毕竟这意味着需要花费大量的时间重新造轮子和写代码。但我想的是,可能也没有人想要购买到的是一个功能和臃肿并存的模板,这意味着学习成本和维护成本都非常高,每次使用可能都要去删除一些不需要的功能和代码,并且还要花费大量的时间去理解使用不到的代码。
所以这次设计的代码,我的首要目标是保证完整的功能性,例如:
至于还有其他的一些功能,例如 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
我会在截止后,使用第三方随机数工具在所有有效楼层中进行抽取,并全程录屏,保证公平公正。
结果会直接在本帖更新,并回复中奖楼层。
再次感谢大家的时间和支持,独立开发不易,你们的每一个回复和关注都是我继续打磨产品的最大动力。
1
xyj05381 2 天前 via iPhone
支持独立开发
|
![]() |
2
Tupig 2 天前
支持独立开发
|
![]() |
3
xiaohanyu 2 天前
好奇 OP 怎样看待 https://www.next-forge.com/ 这个模板
|
4
AuYuHui 2 天前
支持独立开发
|
![]() |
5
PanicByte 2 天前 via iPhone
支持独立开发
|
![]() |
6
bugsnail 2 天前
ECS 自部署好评,各大平台看似便捷的部署方式,却因为平台差异需要兼容确实是痛点,对于偏后端开发的独立开发来说,非常有用
|
![]() |
7
ligz OP @xiaohanyu 开源模板最大的问题就是长期维护和写文档支持很难坚持,为爱发电有点难,但这个被 Vercel 官方收购了也挺好的,对于 Next.js 的支持没得说。https://demo.next-forge.com/ 这个 demo 还是有点简陋的,对我来说没有办法开箱即用,但是如果自己已经有设计想法了,用开源的加 Vibe Coding 也挺好的
|
![]() |
9
ARMILKCHEN 2 天前
支持独立开发,一直有看博主的博客,收获很多。
|
![]() |
10
Teresa789 2 天前
支持独立开发
|
![]() |
11
BeijingBaby 2 天前
这类集成多种功能特性的“模板”的用户群体应该不大。
1 、想要更灵活控制的开发者,有自己的技术选型考虑和偏好,集成的不一定是自己想要的。 2 、想要开箱即用的浅开发者,感觉好像又差点什么,比如如果你是一个完整的 cms 类似 wordpress 这样的 blog 系统,直接拿来就能用,那也好说。 感觉这类模板就是处于中间层,只是把各个技术组件组合在一起,不是很好用。 |
![]() |
12
kidding 2 天前
支持一下
|
![]() |
13
ligz OP @BeijingBaby 其实市场还是有的,国外付费模板像 shipfast, supastarter, makerkit 等收入都挺高的,技术选型这次基本上是 AI First ,AI 写什么强我就用什么,当然这个见仁见智哈,目标是能减少大家启动项目的时间,如果不满意,逛逛博客周五摸鱼学习学习也不错哈哈
|
![]() |
14
bugsnail 2 天前
我感觉独立开发的后端也是个伪命题,我看过许多 nextjs + serverless 的架构设计的,稍微复杂一点的涉及评论保存,用户信息之类的,可用性还不如自建服务器搭个 mysql + (java/go/php) api 稳定,这里的可用性只是泛指多点几个页面就报错啦,或者用的是免费套餐响应很慢之类的,体验就是差点意思。
当然我不是说服务商不够稳定(当然也有可能)就是开发者对接这些服务的时候,可能没有对接好或者错误处理没有做好之类的。 |
![]() |
15
Huramkin 2 天前
支持一下
|
16
crankyhuo 2 天前
支持独立开发
|
![]() |
17
nodejx 2 天前
支持
|
![]() |
18
Shelios 2 天前
支持独立开发
|
19
sayyiku 2 天前
很不错,支持
|
![]() |
20
ligz OP @bugsnail #14 用好了生产环境也没啥大问题的,我的主站 https://nextdevkit.com 就是用的 workers 模板,为了减少服务器账单托管在 cloudflare workers 这种纯 Serverless 环境,前面是 CF 的免费 CDN ,数据库都是 D1 这种 edge sqlite ,昨天实践下来应付大访问量、后端支付、邮件、auth 等都没啥大问题。
![]() |
21
GiveMeABigName 2 天前
支持独立开发,我一直想搞,但是没有头绪哦
|
![]() |
22
molvqingtai 2 天前 ![]() 支持一下,前段时间也用这套技术栈撸了一个网站,tips: 配置下 next 的 webpack 可以减少 resend 几百 kb 的,毕竟 cf worker 限制 3mb
|
![]() |
24
summer1942 2 天前
支持一下
|
25
zzfly256 2 天前
支持独立开发
|
![]() |
27
jimbray 2 天前
支持独立开发!
|
28
lzq872904847 2 天前
支持独立开发
|
![]() |
29
veau 2 天前
支持独立开发
|
30
longline 2 天前
支持独立开发
|
![]() |
31
catsky 2 天前
国外好几个类似的盈利前景都很不错
|
![]() |
32
linKnowEasy 2 天前 ![]() 感觉非常不错. 移动端适配也挺好的
|
33
dawnsw 2 天前
支持独立开发
|
![]() |
34
awkamo 2 天前
用过 opennext ,感觉提供对 cloudflare worker 和 docker 的支持是非常明智的,能覆盖绝大多数部署场景了
|
![]() |
35
isb 2 天前
支持一下 如果是 prisma 就更好了
|
![]() |
36
alexmy 2 天前
支持独立开发。
|
![]() |
37
admol 2 天前
支持一下
|
![]() |
38
xiaohanyu 2 天前
有个问题,就是 next.js 在 cloudflare pages 上似乎有挺多不兼容的,不知道 OP 有没有碰到这种问题。
|
![]() |
39
oneisall8955 2 天前
支持独立开发。
|
![]() |
40
swim2sun 2 天前
分母
|
41
zyjqjnh 2 天前
支持独立开发。
|
![]() |
42
defunct9 2 天前
支持独立开发,楼主很有想法,好用的话想试用一下。
|
![]() |
43
ligz OP @xiaohanyu #38 博客里面谈到了,我去年就是用的 pages 的 edge runtime ,各种坑,用的我都已经放弃了,今年是换了 opennext 后用 workers 的 nodejs runtime 才下定决心原生支持的。这个兼容度比那个官方的 pages 好多了,pages 在我看来只能部署静态网页
|
![]() |
44
fristblood 2 天前
支持独立开发
|
![]() |
45
ligz OP @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) |
46
sgrhdhjdj 2 天前
支持独立开发
|
![]() |
47
defunct9 2 天前
八错八错,看了托管网站。研究文档去......
|
![]() |
48
Jiki 2 天前
这个赛道还不错,有精力可以把 Dashboard 的设计再优化一下
|
![]() |
49
yoghurtguy 2 天前 ![]() 直击我的痛点,next 不错,模板看似很多,但总是难有何时的,另一个问题也就是部署问题,与 Vercel 绑定太深了,还有很多坑
|
50
coter 2 天前
不错不错,支持一下
|
![]() |
52
fliu2476 2 天前
支持一下,刚好最近在做相关项目
|
![]() |
53
xiaohanyu 2 天前
@ligz 感谢回复。
> 今年是换了 opennext 后用 workers 的 nodejs runtime 才下定决心原生支持的。 这篇 blog 的具体链接有么?确实 pages 对 next.js 各种坑…稍上点规模就不太行,netlify 我用下来也是偶尔会有点小问题,vercel 当然没问题但是吧,上贼船容易下船难。 |
54
tsin1618 2 天前
支持独立开发
|
![]() |
55
ligz OP ![]() @xiaohanyu #53 可以参考 Opennext 的官方解释: https://opennext.js.org/cloudflare ,后面有时间会专门出一篇 Next.js 部署指南的博客
|
56
coter 2 天前
希望加上弹窗登录,支持 creem 支付,加上积分功能,dashboard 有点简单,管理后台没看到,希望越来越好
|
57
skwfar 2 天前
之前用 vercel 一不小心就超用量,想转移 cf 的时候的确头疼,支持
|
![]() |
58
Lemonadeccc 2 天前
支持独立开发
|
59
fancyhare 2 天前
支持独立开发
|
60
Echo521 2 天前
支持独立开发
|
![]() |
61
rieshinn 2 天前
支持 OP ,支持独立开发
|
![]() |
62
NGGTI 2 天前
支持独立开发
|
63
kfayay 2 天前
支持 OP ,对于初创公司,快速启动还是很有帮助的
|
![]() |
64
prccn 2 天前
支持一下
|
![]() |
65
canxin 2 天前 via iPhone
支持独立开发
|
![]() |
66
xiangchen2011 1 天前
支持独立开发
|
67
morton098 1 天前
支持独立开发
|
![]() |
68
safeall 1 天前
支持独立开发
|
![]() |
69
easymbol 1 天前
支持一下,又发现一个大佬
|
![]() |
70
zhuawadao 1 天前
支持
|
71
Vicissitude 1 天前
支持独立开发
|
![]() |
72
dreamage 1 天前 via Android
支持独立开发
|
73
tangxiangpi325 1 天前 via Android
我用 coolify 管理我的 vps ,然后用 shipthing.com 模板通过容器方式部署,很丝滑。对于小白 vercel 是最简单的,对于有一定技术能力的来说容器是最好的选择,vercel 一旦起量就得付费。这个模板也便宜 99$
|
![]() |
74
pkwenda 1 天前
支持独立开发
|
![]() |
75
i8k 1 天前 via Android
支持独立开发,最近一直在用 nextjs ,学习了
|
![]() |
76
kiddyu 1 天前
支持独立开发
|
77
wukongkong 17 小时 27 分钟前 via Android
支持,有模版还是非常方便的
|
78
DeepUse 11 小时 16 分钟前
支持独立开发
|
79
miaowo 11 小时 10 分钟前
优秀!!!
|
80
RuiCBai 8 小时 27 分钟前 via iPhone
支独立开发。 后续有没有支持 paddle 支付的计划呢
|
![]() |
81
Aixtuz 7 小时 32 分钟前
先关注一下~
|