快速启动一个项目


  • 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]

日志分析

SEO

cascade

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

本文使用 markdown.com.cn 排版

相关推荐
y先森3 小时前
CSS3中的伸缩盒模型(弹性盒子、弹性布局)之伸缩容器、伸缩项目、主轴方向、主轴换行方式、复合属性flex-flow
前端·css·css3
前端Hardy3 小时前
纯HTML&CSS实现3D旋转地球
前端·javascript·css·3d·html
susu10830189113 小时前
vue3中父div设置display flex,2个子div重叠
前端·javascript·vue.js
IT女孩儿4 小时前
CSS查缺补漏(补充上一条)
前端·css
吃杠碰小鸡5 小时前
commitlint校验git提交信息
前端
虾球xz6 小时前
游戏引擎学习第20天
前端·学习·游戏引擎
我爱李星璇6 小时前
HTML常用表格与标签
前端·html
疯狂的沙粒6 小时前
如何在Vue项目中应用TypeScript?应该注意那些点?
前端·vue.js·typescript
小镇程序员6 小时前
vue2 src_Todolist全局总线事件版本
前端·javascript·vue.js
野槐6 小时前
前端图像处理(一)
前端