即刻App年轻人的同好社区
下载
39 82
周末把 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，让“秒开”变得简单。
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，让“秒开”变得简单。
62 927
介绍一下 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 来构建这个展示表格。
----
AI 时代，我们经常会驱动 AI 来生成各类页面，但是使用低代码的构建器，可以有效降低 AI 生成的代码量，保持代码风格的统一和页面样式的一致性。
ShipAny 的 PageBuilder 有足够的灵活性，让不同水平的开发者都能用来快速实现各类常用的功能。
ShipAny 不仅是一个代码模板，我更愿意称之为一个全栈开发框架。集成了丰富的功能可以开箱即用，也给进阶玩家留足了定制开发的空间。
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 来构建这个展示表格。
----
AI 时代，我们经常会驱动 AI 来生成各类页面，但是使用低代码的构建器，可以有效降低 AI 生成的代码量，保持代码风格的统一和页面样式的一致性。
ShipAny 的 PageBuilder 有足够的灵活性，让不同水平的开发者都能用来快速实现各类常用的功能。
ShipAny 不仅是一个代码模板，我更愿意称之为一个全栈开发框架。集成了丰富的功能可以开箱即用，也给进阶玩家留足了定制开发的空间。
40 714
今晚 7 点直播：用 ShipAny Two 重构 AI Wallpaper Shop
一小时上线一个支付闭环的 AI 壁纸网站。使用 ShipAny 的 Page Builder 功能，为 Wallpaper 相关的长尾关键词构建落地页，实现 pSEO 的方案。
一个 json 文件就可以渲染出来一个完整的落地页。
直播完贴回放地址。
一小时上线一个支付闭环的 AI 壁纸网站。使用 ShipAny 的 Page Builder 功能，为 Wallpaper 相关的长尾关键词构建落地页，实现 pSEO 的方案。
一个 json 文件就可以渲染出来一个完整的落地页。
直播完贴回放地址。
26 38
ShipAny Two 30k✅
半价活动已结束，接下来就不吆喝了，继续补文档、堆功能、发展生态，做 AI 时代最好的建站框架。
2025 最后一个月，打算用 ShipAny Two 把原来的项目重构一遍，能捡起来一个是一个。
MCP、Agent、AI Coding 重点投入。
AI 发展越来越快，做产品越来越开心。💃
半价活动已结束，接下来就不吆喝了，继续补文档、堆功能、发展生态，做 AI 时代最好的建站框架。
2025 最后一个月，打算用 ShipAny Two 把原来的项目重构一遍，能捡起来一个是一个。
MCP、Agent、AI Coding 重点投入。
AI 发展越来越快，做产品越来越开心。💃
24 12
21 11
17 43