- 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的话(欧拉!),没错~他的开发者是个霓虹人。
@tanstack/react-query
可能是最好的数据请求管理库,功能十分丰富,UI也好看。
zod
Schema 验证库,可以用于前后端数据和表单的校验。
i18next
搭配使用react-i18next i18next-browser-languagedetector i18next-resources-to-backend
非常好用的国际化方案
Prisma
Prisma 是一个简化与数据库交互的工具,提供 ORM、Pulse 和 Accelerate 等产品,帮助开发人员更快速高效地构建、优化和扩展数据驱动的应用程序。 各类数据库和云厂商均有相应的支持。
boarding.js
新手引导,蒙版提示。
kbar
用于为您的网站添加快速、可扩展的命令菜单。当然你可以直接使用cmdk。如果是做搜索,orama以及algolia
- 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 排版