ShipAny AI SaaS

ShipAny 是一个基于 Next.js 的 AI SaaS 开发框架，内置丰富的功能模块，开箱即用，旨在帮助开发者在极短时间内构建并上线功能完整的 AI 驱动的 SaaS 创业项目。

ShipAny Two 基于最新的 Next.js 16，在编译性能方面有很大提升，本地开发更快、内存占用更小。

在框架设计层面，分为核心系统、核心模块、扩展模块、主题系统、配置系统、内容管理系统六大件。

1. 核心系统（app）

ShipAny Two 内置 Landing、Admin、User Console 三套核心系统，对应三套独立的页面布局，用于实现网站着陆页、后台管理、用户中心三类常见业务功能。

着陆页系统（Landing）

通过 json 文件控制页面内容，方便 AI 修改，支持多语言；页面按区块（blocks）拆分，可自由组装，灵活度高；通过 theme.css 调整配色和字体，个性化程度高

后台管理系统（Admin）

集成用户管理、订单管理、积分管理功能；集成配置中心，可视化开启/关闭各类功能；集成 CURD 操作，通过自定义的 PageBuilder 做到几行代码渲染数据管理页面（table、form）

用户控制台系统（User Console）

用户在 Settings 面板管理自己的账单、订阅、支付、积分流水，修改头像昵称；用户在 Activity 面板查看AI 生成任务和 AI 对话记录

三套核心系统在 src/app 目录实现，按功能划分文件夹，开发者很容易新增自己的功能。

2. 核心模块（core）

ShipAny 把框架全局支持的功能归为核心模块，包括 db、auth、i18n、rbac 几类

数据库（db）

基于 drizzle orm 集成数据库功能，支持 postgres、mysql、sqlite 等数据库类型；通过 schema 定义数据表，支持增量迁移；CURD 数据操作层面用同一套 sql 语法，抹平各类数据库的差异

登录鉴权（auth）

基于 better-auth 实现登录鉴权功能，可以在管理后台一键开启常用的登录方式

权限控制（rbac）

基于权限的管理控制，通过自定义的角色和权限节点控制后台管理系统的访问

国际化（i18n）

基于 next-intl 实现国际化功能，通过 json 文件控制多语言显示

ShipAny 的核心模块定义在 src/core 下面

3. 扩展模块（extensions）

ShipAny 利用 extensions 支持可插拔架构，每一类扩展定义一个统一的 interface，每个扩展按接口实现具体的功能逻辑。目前支持的 extensions 包括

广告。集成 adsense

affiliate

联盟营销。集成 affonso、promotekit

AI 供应商。集成 OpenRouter、Fal、Replicate、Kie

analytics

数据统计。集成 ga、clarity、plausible、open-panel、vercel-analytics

customer-service

客服。集成 crisp、tawk

邮箱。集成 resend

payment

支付。集成 Stripe、Creem、PayPal

storage

存储。集成 aws s3，cloudflare r2

ShipAny 的扩展模块定义在 src/extentions 目录下，每一类扩展要新增一个选项，只需要写很少的代码

4. 主题系统（themes）

ShipAny 支持多主题系统，让开发者可以自定义主题实现个性化的页面展示。

包括三类自定义主题方式

自定义主题色 / 字体
切换亮色（light）/ 暗色（dark）
自定义主题文件夹

主题系统定义在 src/themes 下面

5. 配置系统（config）

ShipAny 支持三类配置的定义

在 .env 文件通过环境变量定义配置
在 src/config 目录下通过文件定义配置
在 /admin/settings 可视化管理配置

组合管理配置项，实现低代码的功能，不是很懂代码的用户也能方便地使用 ShipAny

6. 内容管理系统（cms）

ShipAny 实现的内容管理系统包括三个层面的内容管理

博客（blog）

通过管理后台写入博客内容，也可以在 content/posts 目录用 markdown 写博客。博客可以给你的网站增加 SEO 权重，也能通过 guest post 接商单。

文档（docs）

基于 fumadocs 实现文档系统，在 content/docs 目录写内容，几分钟为你的网站渲染一个 /docs 文档

页面（pages）

在 content/pages 目录写内容动态创建页面，比如常用的网站协议页面 /privacy-policy 和/terms-of-service

ShipAny 内置三套核心系统，其中一套是后台管理系统。👇

包含内容管理（CMS）、权限控制（RBAC）、用户、支付、积分、配置管理等功能

除数据库连接外，其余功能都通过后台面板可视化配置，随时切换登录方式、支付渠道等，集成了主流的邮箱、存储、统计、广告、联盟营销、客服、AI 供应商，只需一个配置即可启用相应的功能。

每天登录后台看看支付数据，看到 paid 状态的订单就会很开心。😄 之前做了十几个项目都不知道订阅收入多少，现在打造了一把很好的铲子，也要重视 MRR 的建设了。收到了很多正反馈，ShipAny Two 是真的好用。👍 持续迭代，做最好的 AI 建站工具。

如何基于 ShipAny 做 SEO 优化

1. tdk 也就是每个页面的 title、description、keywords，如果一个网站有很多个子页面，每个页面可以动态生成 tdk 的内容。ShipAny 框架通过一个 getMetadata 函数简化动态生成 tdk 的实现

2. h 标签一个页面，需要有清晰的 h 标签做层级划分。一般从 h1 -> h3。ShipAny 默认集成的 landing page 优化了 h 标签的展示层级

3. 关键词密度设置合理的关键词密度（我一般设置在 3% 左右），可以更好的命中搜索关键词。ShipAny 通过 json 文件定义landing page 的内容，你可以通过 ai 生成 json 内容，告诉 ai 我希望 xxx 的关键词密度是多少

4. 社媒分享 ShipAny 内置了 og:image 等社媒分享内容的生成，社媒分享可以帮助你的网站提高分享率，分享率有助于提升 SEO 权重

5. 多语言 ShipAny 内置多语言的支持，配合 hreflangs 可以帮助你的网站针对不同区域的用户做更匹配的展示，多语言也是构建海量页面的关键之一

6. SSR 也就是服务端渲染，在搜索爬虫访问你的网页时直接输出完整的内容，而不是通过 ajax 请求接口异步加载。ShipAny 内置的公开页面都是通过 SSR 生成

7. 技术指标也就是网站的加载速度，响应式适配，静态资源压缩等指标。这类问题主要靠框架来处理，有很多的优化方案。

除了以上几点，通过 SEO 拿到搜索排名，还有几个关键的指标和措施👇

1. 停留时长用户在你的网站停留越久，跳出率越低，谷歌慢慢就会给你更高的权重。ShipAny 内置了 ai-image-generator、ai-music-generator、ai-chatbot 功能，以及用户中心可以做很多操作。合理组合使用，可以让用户在你的网站停留更久一点。另外，你也可以在 landing page 嵌入 iframe 进一步增加停留时长

2. 外链外链也是增加网站权重很重要的一环，需要你自己去各种网站提交，通过高质量的外链提升网站权重。ShipAny 默认的 landing page 支持通过配置在底部挂友链，基于此你可以找人换外链

3. 博客博客可以让你的网站保持频繁更新的状态，让搜索爬虫有持续的访问和收录。比如 Gemini 3 发布了，你可以写一篇 what-is-gemini3，通过博客内页拿到一定的搜索流量。ShipAny 集成了非常完整的 CMS 功能，可以很方便写博客。

4. 内页建设根据 gsc 的搜索关键词命中情况，逐步新增子页面，优化内容，命中更多的长尾关键词，也有利于增加主页权重

5. sitemap. xml sitemap 是你网站的地图，可以帮助搜索引擎更好理解你的网站，收录更多的页面。框架需要根据新增的子页面自动生成 sitemap

6. GEO 也就是通过一些手段，让 AI 更好地收录你的网站，回答用户提问时推荐你的网站。GEO 的基本面还是 SEO，先保证在搜索引擎能有很好的排名，再做一些对 AI 理解友好的措施。比如加上 llms.txt 之类的文件

----

SEO 没有绝对标准和完美的落地方案，还是需要多做，多实践，慢慢积累起来自己的 SOP

ShipAny性能优化

ShipAny Two 的网站指标干到了四项全优，实现了“秒开”。分享几个优化要点：

1. 加快首屏渲染速度。Hero 组件不要使用 motion 动画，不要用 LazyImage 懒加载图片，而是应该第一时间渲染出内容，减少 LCP（最大内容绘制）延时。

2. 减少图片体积。图片资源尽量用 CDN 地址，如果必须要放在同域名的 /imgs 目录下，记得用 tinypng 压缩一下图片，减少图片体积。

3. 增强网页无障碍性。给只有图标没有文字内容的 <a> / <button> 等标签加上 aria-label 属性，增强网页 Accessibility 评分。

4. 优化字体加载速度。引入自定义字体时加上 display: 'swap'; preload: true 两个属性，告诉浏览器优先下载自定义字体，下载完替换默认字体，消除渲染阻塞。

5. 缓存静态资源。在 public/_headers 和 next.config.mjs 文件针对 /imgs/* 等静态资源配置自定义缓存策略，比如：Cache-Control: public,max-age=31536000,immutable，让 CDN 明确知道需要缓存多久，实现零延迟加载。

6. 缓存静态页面。在 Next.js 项目中，通过增量静态生成（ISR）来缓存页面路由文件，在页面对应的 page.tsx 文件头部加上 export const revalidate = 3600; 告诉 Worker，一小时内不重复生成此页面。

7. 适配多语言缓存。在引入 next-intl 做多语言的情况，浏览器会通过 Set-Cookie 设置用户偏好的语言，这种行为会让 Worker 认为网站是动态的，影响 ISR 的生成逻辑。因此，需要在中间件逻辑里面，对不涉及登录态的公共路由加上 intlResponse.headers.delete('Set-Cookie'); 保证多语言场景下可以正常缓存静态页面。

8. 配置 CDN 缓存。默认情况下，Cloudflare 的 CDN 会缓存特定后缀的静态资源，比如字体、图片等，不会缓存网页。要让 Next.js 项目中配置了 export const revalidate = 3600; 的 page.tsx 能被 CDN 缓存，需要在 Cloudflare 配置 Cache Rules，可以选择 Cache everything 模板，TTL 选择尊重源站，这样 CDN 就只会缓存有自定义 Cache-Control 响应头的页面。

9. 优化服务端渲染。服务端渲染涉及数据操作时，会影响网页指标的 LCP 和 Speed Index，可以把多个操作用 await Promise.all 包裹起来并行处理，降低响应延时。

10. 配置数据缓存。通过 unstable_cache，revalidateTag 配置数据缓存，比如把频繁读库的 getConfigs 缓存到内存/kv，加快数据读取速度。

---

网站有好的性能指标，既能提升用户体验，也有利于 SEO。做网站优化的关键是合理设置缓存，包括数据缓存、文件缓存、CDN 缓存等。

ShipAny 已经把上述的多项优化措施内置到模板里面了，开箱即用。你只需要专注写业务逻辑，其他的交给框架。选择 ShipAny，让“秒开”变得简单。

ShipAny 的 Page Builder 功能

支持多个维度的页面自定义，用低代码的方式快速构建常用的功能页面。

1. 静态页面构建

只需要写一个 Markdown 文件，就可以渲染出来一个页面，常用于网站的隐私协议、服务条款等静态内容的渲染。比如，要在你的网站上线一个公司介绍页面，只需要在 content/pages 目录创建一个 about/company.mdx 文件，就可以渲染出来一个 /about/company 页面，支持多语言。

2. 动态页面构建

只需要写一个 JSON 文件，就可以渲染出来一个动态页面，常用于制作功能型着陆页。比如，我们做的是一个 AI 图片聚合网站，经常需要上一些子页面来介绍新出的图片模型，利用主站的权重来快速拿到搜索排名。前阵子新出了 nano banana pro 图片模型，我们要在自己的网站上线一个内页来做排名，只需要在 src/config/locale/{locale}/pages 目录创建一个 nano-banana-pro.json 文件，在文件的 "page.sections" 字段写入 hero / features / faq / cta 几个区块内容，就可以快速上线一个 /nano-banana-pro 页面，无需写一行代码，就能马上看到一个布局完整的落地页，支持多语言。 ShipAny 内置了几十个区块，让你搭积木式快速组装实现各种样式的着陆页面，写个脚本驱动 AI 遍历关键词生成 JSON 文件，就能做出海量页面，实现 pSEO。

3. CURD 页面构建

ShipAny 实现了 Form / Table 构建器，几行代码就可以定义一个表单，一个表格，实现管理后台对业务数据的增删改查功能。比如，我们做的是一个 AI 导航网站，需要在管理后台查看用户提交的项目并审核修改。无需写前端的页面和样式，只需要在 admin 目录新建一个 project/page.tsx，定义要展示的字段名称，就可以渲染出来一个表格，展示用户提交的项目列表；创建一个 project/[uuid]/page.tsx，定义允许修改的字段名称，就可以渲染出来一个表单，修改项目数据。除了管理后台的 CURD，这套页面构建器也适用于在用户中心处理各类数据。比如用户进入 /activity/projects/add 页面提交项目，就可以用 FormBuilder 来构建这个提交表单。用户进入 /activity/projects 页面要看到自己提交的项目，就可以用 TableBuilder 来构建这个展示表格。