海外AI项目-最佳实践技术选型

2,380 阅读8分钟

引言

书接上文,后面的段落开始就开始讲对于独立开发而言,AI商业应用在代码测的最佳实践

那么我再次重复一下我对于最佳实践的论点:

对于每个人来说,看待一个项目的最佳实践是有不同视角的,有的人会想我希望我的网站能健全、能尽可能的承载更大的qps,有的人会觉得我的代码要利于维护要前后端分离......

那么代价是什么那?时间、精力、复杂度等等等。我们并不能兼顾所有的因素,那么在我看来最重要的事情就只有时间商业价值这两件事。

在这个情况下 最佳实践 就是指的能以 最快的时间完成 核心功能并验证项目 商业性。技术仅仅只是商业的一个要素而已。

显然要验证商业其实根本都不用写代码,市面上如此之多的一键生成页面、AI生成应用的方式,最快的六十秒就能一个(填充布局,多布局),像wp这种市面一大堆成熟插件,用这些不是更好?

显然不行,因为要留下自由度和可控性,上述方式生成的垃圾在实际环境中非常难验证商业。最好的方式肯定还是自己写并加上AI辅助

前后端不分离

首先这个背景是,我是独立开发,我要通过一个项目赚钱,我并不确定这个项目能否成功,我需要先用个东西验证这件事。

很多时候,我们都会 幻想 我们做了一个项目,上线就大卖特卖,大获成功,在一开始的时候就遵循很多的技术最佳实践,但显然他们在这个场景下都是过度的。比如服务端分三层、微服务、分布式数据库、GRPC、TRPC等。而·前后端分离 的架构也是其中之一。

在考虑框架这一点得以前端全栈框架为主。主因 是前端离用户近,次因是我不是很清楚这几年后端生态中出了哪些比较好用的全栈框架。

那么选择按生态、活跃度选择只有两个NuxtNext这两个全栈框架。

那就讲一讲两个框架的核心问题和好处,两个框架我用到了深水区。

  • 性能: 在ssr的性能表现上Nuxt不如Next,在csr上肯定react不可能有vue的性能快好的,但问题是在于大量的seoscp等一系列c端核心指标都依赖于ssr。而csr在现代浏览器的场景下,差的是那一点性能吗?
  • 生态: 在生态表现上NextNuxt一条街。 就是大部分库 React系列有Vue一般会有, 但在一些库的深水区和issue数量这一点是不太经得起考验的, 再加上大多数海外各种服务的厂商对React系列的支持是多于Vue的。
  • 易用度: 在易用度上面一直是V系列的强项,狂拉Next一条街,它处理服务端组件和客户组件边界问题做得非常好。(在两个框架的服务侧方面,显然nextserver actions属于是作弊级的开发体验, 但nuxt更强大的服务端配置以及也很出彩)

当然还有很多不同的对比角度,例如两个框架不同的缓存实现方法和控制方法等等等,但这都属于是在实践之后去慢慢理解的部分。

那综合考量,Next是最好的出海AI项目框架选择,生态永远是开发中最重要的一环。

框架:Next

数据库和orm选择

对于数据库有大量的对比资料,但出于性能、更加现代等考虑上我们选择Postgre

Orm比较主流的有三种, SequelizeTypeORMPrisma

但在 Next社区生态下Prisma是合适的。 首先 Prisma文档 齐全易阅读完整,其次有强大的生态和社区支持。而Typeorm更多的是用在纯后端场景下。最后的是Sequelize,它的社区活跃程度对比前两者差了一些。

数据库:Postgre

Orm:Prisma

登录

Web端上所需要的登录只需要TwitterGoogleFaceBook邮箱登录 + 一个集成登录鉴权库或登录服务厂商。来自动帮你处理用户id和信息,以及绑定关系。

理论上应该选择登录服务厂商,因为完整的用户服务显然不仅仅只包含登录,还会有注销、用户监控、防刷、安全、灾备等等等,但服务厂商的代价是什么那?

~是账单,在我历史的教训里,我用过supabsefirebase这些服务厂商等。但当我项目的用户数开始变多后,我账单的规模也是成正比增长的,而且我很难把数据迁移走。

image.png

因此我的选择就主要是两点免费易迁移。要选一个能实现大部分厂商登录,功能闭环的鉴权库就好了。像用户监控、防刷、安全、灾备这些功能在我的初期是不需要的。

当我在项目有一定收入的时候,我可以去各种云服务上买很好的数据库服务,来实现监控备份安全这些需求显然是更好的选择。(而不是我现在我必须得把登录厂商的数据库留着然后再+一个数据库,我的开发复杂度也加大了非常多, 有朋友肯定会问为什么我不就用登录厂商的数据库,因为它的数据库不是独享线程, 并不能作为应用数据库,就只能做纯登录鉴权数据库)

那么next-auth就是个完美的选择。

登录鉴权库:next-auth

AI API 和 AI 调用库

对于 AI API 毋庸置疑的Open Router, 提供市面主流的200多个模型,在它自己的代理商层面同一个模型也有多个服务商可切换,并且价格也会更便宜。

再加上支付简单、限制不多,那么这无疑就是最佳的代理商。

而对于 客户端调用库 就是 vecelai库,这个库的名字就叫ai。他也提供多家厂商的 sdk 支持,vecel的开发实力你永远可以相信,功能强大设计合理场景齐全image.png

AI API:Open Router

AI库:ai(vecel)

付款渠道

PayPalStripe,是比较主流的收款方式,唯一很不好的是api很复杂,但他们有很多支付网关服务商和隔离层厂商,它们可以大规模的简化调用和回调帮你处理。

推荐个很小众的upgrade.chat, 它能处理Palpal个人户的订阅收款和借记卡信用卡(商户号真的很麻烦)。但是我们会在使用他的时候遇到一些比较烦恼的开发问题,最主要是开发问题是没有订单id关联。

但无论如何它都是会是你初期验证商业项目的好伙伴。

支付隔离商:upgrade.chat

收款方式:PayPal、Stripe

UI库和CSS

ui库你自己喜欢用啥就用啥,radix/uishadcnchakra随便选一个都是你的C端好伙伴。根据各自喜欢就好,对于简单的我喜欢radix/ui

csstailwindcss.

UI:radix/ui(原始)

css:tailwindcss

状态管理

无需理由,市面状态库断层级好用。

状态管理:zustand

验证

无需理由,市面验证库断层级功能强大。

状态管理:zod

AI CMS SEO

其实本身是不需要这个部分,但我其实有点想再次验证ai写文seo这件事,以及不靠投流的纯技术流量这种玩法。

这部分我也暂时没想好怎么做,因为量需要很大(大概一天1000篇3000字长文这种),还不能被 google干成垃圾,这个度挺难把握的,人修的话太麻烦了。

暂时没想好完整思路。

依赖一览表

值得注意的是

  • Node版本要大于18
  • React版本是19支持新特性
  • Next是15新版
  • 没有任何请求库,因为这部分是特意留白的,请求库没有最佳选择这一说法,只有自己喜欢哪一种。

Source Code:

  "engines": {
    "node": ">=18.0.0"
  },
  "scripts": {
    "dev": "next dev",
    "db:push": "prisma db push",
    "prisma:gen": "prisma generate",
    "prisma:studio": "prisma studio",
    "prisma:reload": "prisma migrate reset",
    "migrate:dev": "prisma migrate dev",
    "migrate:deploy": "prisma migrate deploy",
    "build": "next build",
    "start": "next start",
    "lint": "next lint",
    "format": "prettier -w ."
  },
  "dependencies": {
    "@auth/prisma-adapter": "^2.7.4",
    "@openrouter/ai-sdk-provider": "^0.0.6",
    "@prisma/client": "^6.1.0",
    "@radix-ui/react-dialog": "^1.1.4",
    "@radix-ui/react-dropdown-menu": "^2.1.4",
    "@radix-ui/react-label": "^2.0.2",
    "@radix-ui/react-progress": "^1.1.1",
    "@radix-ui/react-scroll-area": "^1.0.5",
    "@radix-ui/react-select": "^2.1.4",
    "@radix-ui/react-slot": "^1.0.2",
    "@radix-ui/react-toast": "^1.1.5",
    "@types/lodash-es": "^4.17.12",
    "ai": "^4.0.25",
    "class-variance-authority": "^0.7.0",
    "clsx": "^2.1.0",
    "date-fns": "^4.1.0",
    "framer-motion": "^11.15.0",
    "immer": "^10.1.1",
    "lodash-es": "^4.17.21",
    "lucide-react": "^0.314.0",
    "next": "15.1.3",
    "next-auth": "5.0.0-beta.25",
    "next-themes": "^0.2.1",
    "react": "^19",
    "react-dom": "^19",
    "zod": "^3.22.4",
    "zustand": "^5.0.2"
  },
  "devDependencies": {
    "@types/node": "^20",
    "@types/react": "^19.0.4",
    "@types/react-dom": "^19.0.2",
    "autoprefixer": "^10.0.1",
    "eslint": "^8",
    "eslint-config-next": "^15.1.3",
    "eslint-config-prettier": "^9.1.0",
    "eslint-plugin-import": "^2.31.0",
    "eslint-plugin-unused-imports": "^4.1.4",
    "postcss": "^8",
    "prisma": "^6.1.0",
    "prettier": "^3.4.2",
    "prettier-plugin-tailwindcss": "^0.6.9",
    "tailwindcss": "^3.3.0",
    "tailwind-merge": "^2.2.1",
    "tailwindcss-animate": "^1.0.7",
    "tailwind-scrollbar-hide": "^2.0.0",
    "typescript": "^5.4.2"
  }

结束

项目传到github上了,有预览地址

也可以加群大家一起闲聊、学习、赚钱。