快速启动一个项目


  • 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 排版

相关推荐
有梦想的刺儿17 分钟前
webWorker基本用法
前端·javascript·vue.js
cy玩具38 分钟前
点击评论详情,跳到评论页面,携带对象参数写法:
前端
qq_390161771 小时前
防抖函数--应用场景及示例
前端·javascript
John.liu_Test2 小时前
js下载excel示例demo
前端·javascript·excel
Yaml42 小时前
智能化健身房管理:Spring Boot与Vue的创新解决方案
前端·spring boot·后端·mysql·vue·健身房管理
PleaSure乐事2 小时前
【React.js】AntDesignPro左侧菜单栏栏目名称不显示的解决方案
前端·javascript·react.js·前端框架·webstorm·antdesignpro
哟哟耶耶2 小时前
js-将JavaScript对象或值转换为JSON字符串 JSON.stringify(this.SelectDataListCourse)
前端·javascript·json
getaxiosluo2 小时前
react jsx基本语法,脚手架,父子传参,refs等详解
前端·vue.js·react.js·前端框架·hook·jsx
理想不理想v2 小时前
vue种ref跟reactive的区别?
前端·javascript·vue.js·webpack·前端框架·node.js·ecmascript
知孤云出岫2 小时前
web 渗透学习指南——初学者防入狱篇
前端·网络安全·渗透·web