tags: 'start-up' 'SaaS' 'dev' 'front-end'
summary: 如何做技术选型，如何选择合适的SaaS模板，如何低成本的部署网站
用时: 5min

背景介绍

本文的受众是独立开发者，希望能够充分利用开源技术与平台，免费或者低成本、快速的搭建项目。首先从技术选型介入，直接给出每个类别里面最佳的选择，备用选择简要概括并给出不建议的说明。对于SaaS模板，同样是直接给出对应于技术选型的最佳模板。

前端

Nextjs

为什么推荐Nextjs?

依托于react。如果你本身就是react developer，你能省心很多。
背靠Vercel。Vercel 是由 Next.js 的创造者设计的原生 Next.js 平台，用于构建、扩展和保护 Next.js 应用程序。
新手友好。学习曲线平滑，上手难度不高，官方给的文档足够清晰、详细。
开源代码活跃。GitHub上的目前的star 120k / fork 25.7k，并且活跃度相当高。
nextjs 生态丰富，很多好用的插件。

利用好 Nextjs + Vercel ，基本上就完成了startup的大部分工作。独立开发者需要专注的是你的业务和功能，造轮子这种事不是你该操心的。

TailwindCSS

无论使用plain CSS Tailwind CSS-in-JS其中的哪一种都可以，但是在快速构建网站这方面tailwindcss还是有优势的。

推荐一个tailwindcss 动画库 tailwindcss-animations

Shadcn/ui

Shadcn/ui 其实是一个在 Radix UI 之上的样式层。如果你本来就在使用tailwindcss，那么使用shadcn就是快速构建网站的最好的选择。

beautifully designed components that you can copy and paste into your apps. Accessible. Customizable. Open Source. This is NOT a component library. It's a collection of re-usable components that you can copy and paste into your apps.

在知道shadcn之前，提到开源组件那一定是在node_modules里面的。然鹅，事实上把组件库放到自己的工程的包里才是最灵活的方案。最近shadcn 开发了一个新的功能 $lift mode$ ,针对一个page，去复制里面的不同组件的实现代码。很贴心。

状态管理

zustand
jotai

使用上述两种其一都可以，都是很好的状态管理库，轻量，都支持本地持久化，都是基于类redux的不可变更新模型。区别在于jotai是组件状态，zustand则可以在组件外使用。 ps: jotai的发音是不是有点熟悉，如果你看过jojo的话（欧拉！），没错~他的开发者是个霓虹人。

cmd+k (macOS)
ctrl+k (Linux/Windows)
click the logo above.

wxt

浏览器插件的开发框架

NextAuth.js

权限管理的库

后端

Cloudflare Worker

无脑选Cloudflare Worker就好。

用户登录

业务不复杂的情况使用nextjs NextAuth.js，然后去集成Google OAuth、Github OAuth、Azure AD、Discord 就够用。

Supabase Auth

业务稍复杂可以使用。

数据库

首选PostgreSQL。

lemonsqueezy

Stripe虽好，门槛高。lemonsqueezy虽然提点高，胜在不用注册公司，功能也够用。

Umami

统计网站首选。当然还有一些clarity $Google Analytics$

日志分析

NewRelic 100G 的使用额度
betterstack 1GB/month
sumologic

SEO

Google Search Console Google 官方的搜索引擎优化工具
META SEO inspector Chrome 插件，可以用来分析网页的 SEO 信息。

cascade

最后，重点来了，目前最契合以上所述的SaaS模板。

本文使用 markdown.com.cn 排版

快速启动一个项目