Skip to content
返回博客Back to blog

写作Writing

用 Next.js、Vercel 和 Supabase 发布小型 Web 产品Shipping Small Web Products with Next.js, Vercel, and Supabase

当部署、数据和界面都足够好理解时,这套小产品栈才真正好用。A small product stack works best when deployment, data, and UI stay easy to reason about.

部署Deployment
2026年4月18日April 18, 20265 分钟阅读5 min readLinfeng Chen更新于 2026年4月22日Updated April 22, 2026
nextjs
vercel
supabase
deployment

很多小产品不是败给野心,而是败给摩擦。所以我更喜欢一套能把关键运动部件都摊平给人看的技术栈。

这套栈

LayerChoiceWhy
UINext.js路由和服务端渲染默认值都很顺手
HostingVercel部署和预览都很干净
DataSupabase有足够结构,但不会一开始就堆太重
StylingTailwind CSS迭代快,仪式感低

真正重要的部分

重点从来不是“选了哪套栈”,而是把发布路径做得足够无聊:

  • 环境变量只有一处真源
  • 部署目标只有一个
  • schema 改动只在一个地方发生
  • 上线前只有一处明确检查

我希望保持小的东西

Code
npm run lint npm run build npm run dev

对于大多数小产品,这已经够用了。任何额外复杂度,都应该先证明自己真的有必要。

Small products usually fail from friction, not ambition. So I like a stack that keeps the moving parts obvious.

The stack

LayerChoiceWhy
UINext.jsGood routing and server rendering defaults
HostingVercelClean deploys and previews
DataSupabaseEnough structure without overbuilding
StylingTailwind CSSFast iteration, low ceremony

The practical bit

The key is not the stack itself. It is keeping the release path boring:

  • One source of truth for environment variables
  • One deploy target
  • One place for schema changes
  • One visible check before launch

What I like to keep small

Code
pnpm lint pnpm build pnpm dev

That is enough for most small products. Anything more should earn its place.

相关工作Related work

和这篇笔记关联的项目与案例研究。Projects and case studies connected to this note.

项目Projects

建筑事务所网站Architecture Studio Website

一个兼顾图片叙事与可维护结构的作品集系统。A refined portfolio system that balances image-led presentation with maintainable structure.

客户项目client-work
米兰活动系统Milan Event System

为小型社区活动提供从策划、邀请到跟进的一条轻量工作流。A small-community event flow for planning sessions, invites, and follow-up without heavy admin overhead.

客户项目client-work

案例研究Case studies

为建筑事务所打造更精致的作品集系统Building a Refined Portfolio System for Architecture Studios

一个以图片叙事为主、同时保持易维护的平静型作品集结构。A calm, image-led portfolio structure that still stays easy to maintain.

建筑事务所Architecture studio
为小型社区设计一个活动管理系统Designing an Event Management System for a Small Community

一个覆盖活动收集、提醒与跟进的轻量协调层。A small coordination layer for event intake, reminders, and follow-up.

小型社区 / 本地组织者Small community / local organizer

相关文章Related posts

和这个主题相邻的更多笔记。More notes close to this topic.

用本地工具和云模型搭建个人 AI 工作台Building a Personal AI Workbench with Local Tools and Cloud Models

精选Featured
AI 工程AI Engineering
2026年5月8日May 8, 20268 分钟阅读8 min read更新于 2026年5月10日Updated May 10, 2026

一个实用的 AI 工作环境:能起草、测试和发布,又不会把流程缠在一起。A practical setup for drafting, testing, and shipping AI work without letting the workflow get tangled.

ai-agent
automation
codex
阅读全文Read article

为技术作品集网站设计真正有说服力的案例研究Designing Case Studies for Technical Portfolio Sites

精选Featured
产品构建Product Building
2026年5月5日May 5, 20266 分钟阅读6 min read更新于 2026年5月7日Updated May 7, 2026

怎样组织案例研究,才能证明判断力,而不只是展示结果。How to structure a case study so it proves judgment, not just output.

portfolio
case-study
writing
阅读全文Read article

把 KizunaIndex 做成公共索引之后,我学到的几件事Lessons from Building KizunaIndex as a Public Index

精选Featured
产品构建Product Building
2026年5月1日May 1, 20267 分钟阅读7 min read更新于 2026年5月3日Updated May 3, 2026

公共索引真正有用,往往不是因为页面多复杂,而是因为内容模型足够小、足够清楚、足够容易改。A public index gets more useful when the content model is small, explicit, and easy to revise.

nextjs
data-modeling
public-index
阅读全文Read article