写网站就是做填空 - 网站代码怎么改 01/10

短短两年，我从全干工程师，转型为填空小能手，是因为熟练掌握了各种模板。

全干工程师

两年前写第一个出海网站，即便有 AI 帮助（Claude 3.5），也花了一个多月才顺畅跑起来。

因为要干的事的确有很多——

• • 写前端（NextJS 负责 UI）
• • 写后端（FastAPI 负责 OAuth 认证、所有后端接口）
• • 买服务器（趁便宜的时候）
• • 写 Dockerfile、compose（记得区分国内外服务器）
• • 运维数据库
• • 调通 Traefik 来管理证书、端口转发（因为一台服务器上有多个服务）

把这几个空填一下

今天，从买域名到完成一个带支付、认证和数据库的网站，很多人可以在半小时内完成。功能完善要花更多时间，但“上站”这个动作本身是已经解决了的。

这是因为全链路都有各种“模板”在工作，我们要做的就是填好这些模板里的空而已。

写 AI 工具网站使用NextJS 模板。不从头自己写，是因为模板通常把数据库、认证这些功能的逻辑都写好、打通了，只需要简单配置一下网站就能在本地跑起来。——我们只需要开发好功能模块，其他不需要关心。

以下不重要——

NextJS 是一个 React 模板。不用 React 从头写，是因为 NextJS 把网站性能要考虑的问题都写好、打通了，只需要按照约定写代码、组织代码文件，就能实现理想的性能——包括页面渲染方式（浏览器 vs 服务器；顺带实现了“前后端一块写”的开发方式）、图片和字体的优化、缓存。——可以认为 NextJS 是“带性能保障的 React 框架/模板”。

React 是一个 Javascript 库，可以认为是“让 UI 管理变简单的 JS 模板”。它把用户交互时的各种状态（比如用户有没有登录，当前用户点了哪个按钮、对应的哪个视频要开始播放）的管理，用一套语法规则固定下来。按照它的规则来写，复杂状态也不会出错。——我们只需要知道这个规则，其他不需要关系。

Vercel 是一个部署平台（PaaS，平台即服务）。做得太完善太好用，以至于我们可以称其为“环境配置模板”。网站运行，需要配置好服务器、域名解析、安全证书等基础设施，Vercel 把部署流程都写好、打通了，我们只要告诉它 Github 仓库位置、配置下域名解析，按照它指定的方式组织代码（比如，如果是用 HTML+JS 部署，首页必须命名为 index.html），网站就能自动发布到互联网上。——我们只需要简单配置，其他不需要关心。

Vercel 是真的在意方便易用，活该它赚钱。作为开发者，如果升级成了 Pro 用户，要盯紧 Vercel 账单。

从代码、到服务器、到网络，所有的环节都打通了，我们只需要专注于怎样让网站——

• • 更好用（功能、性能）
• • 更好看（设计）
• • 更赚钱（流量、转化率）

这会是 NextJS 出海系列文章的三大主题。

AI + HTML + JS

如果是简单工具，只靠广告赚钱，不需要认证、数据库这些，那么网站模板，NextJS 甚至 React 要解决的问题都不存在。此时用AI 写 HTML + JS 上站是最快的，而且可以学习到网站的最底层原理。

NextJS 模板哪家强

各家模板都有优秀的地方，可以拿来了解 NextJS 最佳实践。

但本质上，我们只需要模板把认证、数据库和支付这三个最让人头大的东西解决好。我心目中的好模板：

• • 认证：支持 Better-auth
• • 数据库：支持 Neon
• • 支付：模板应该都会支持 Stripe；但如果你没有开通 Stripe，选一个支持 Creem 的

淘金 vs 卖铲子

全民 AI 上站以来，已经看到无数 AI 工具站长在晒收益。但更赚钱的，很可能是背后的这些“模板供应商”。

免责声明：我混用了框架（framework）和模板（template）。只求易读不求严谨。初学者可以请 AI 纠错。