即刻App年轻人的同好社区
下载
置顶开源一个基于Python的后端api starter，用了Flask框架，可以直接部署在vercel。新人求Star⭐！
如果你很熟悉Python，同时又在学习用Nextjs等前端框架进行网站开发。那么这个starter可以让你快速上线一个后端。用Python获取和处理数据，然后直接发送给前端，构建功能更丰富的网页。
Github开源地址：github.com
示例网站：demo-flask-vercel.sawana.site
这个项目的灵感来源于@艾逗笔 大哥前几天直播中的分享。他分享了 thinkany.ai 这个AI搜索引擎开源项目的构建方法，用到了Python的Fastapi构建后端，获取外部数据并且处理成结果json，最后发送给前端网页。
他的项目在这里：github.com
这让我非常惊喜！因为在学习Nextjs网站开发之前，python是我的主力语言。数据获取、pandas数据处理分析、大模型应用，都是使用的Python库。而他的项目生动地向我展现了，python也可以用来构建出优秀的产品！
那么如果我能用Python上线一个vercel后端网站，那不就能用之前学到的技巧做的东西，用网站的形式开发成作品吗！
同时之前我也发现Vercel模板中有Flask框架后端网站模板，但有一些bug。在这两天学习了Flask 3.0的tutorial，接着完善了vercel的模板、修好了bug之后，完成了这个Starter网站。
如果这个项目有帮到你快速上线python的api，欢迎star⭐！
如果在使用中有什么疑问，发现了可以改进的地方，或者出现了bug，也可以自由留言，一起学习。
如果你很熟悉Python，同时又在学习用Nextjs等前端框架进行网站开发。那么这个starter可以让你快速上线一个后端。用Python获取和处理数据，然后直接发送给前端，构建功能更丰富的网页。
Github开源地址：github.com
示例网站：demo-flask-vercel.sawana.site
这个项目的灵感来源于@艾逗笔 大哥前几天直播中的分享。他分享了 thinkany.ai 这个AI搜索引擎开源项目的构建方法，用到了Python的Fastapi构建后端，获取外部数据并且处理成结果json，最后发送给前端网页。
他的项目在这里：github.com
这让我非常惊喜！因为在学习Nextjs网站开发之前，python是我的主力语言。数据获取、pandas数据处理分析、大模型应用，都是使用的Python库。而他的项目生动地向我展现了，python也可以用来构建出优秀的产品！
那么如果我能用Python上线一个vercel后端网站，那不就能用之前学到的技巧做的东西，用网站的形式开发成作品吗！
同时之前我也发现Vercel模板中有Flask框架后端网站模板，但有一些bug。在这两天学习了Flask 3.0的tutorial，接着完善了vercel的模板、修好了bug之后，完成了这个Starter网站。
如果这个项目有帮到你快速上线python的api，欢迎star⭐！
如果在使用中有什么疑问，发现了可以改进的地方，或者出现了bug，也可以自由留言，一起学习。
GitHub - waitlistSawana/clean-flask-vercel-api: 帮助您快速启动一个python+nextjs网站，并且将其部署到vercel！
57 1341
AI 教我在 NextJS 手搓 图片资源代理，说是比 Vercel 便宜 90%。
使用场景就是从别的平台获取到的 imageUrl 想直接在自己的网站上使用，但直接放在 src 是无法显示的，就需要通过服务器代理得到。
Vercel 的 Image 组件自动实现图片资源代理功能，就是那个总要去 next.config.js 配置的图片路由的东西。Vercel 文档中写到该优化服务在免费计划有 1000 次额度，Pro计划有 5000 次。可以通过 unoptimized 属性关掉优化。
实现方案不难，就是创建一个 api 端点：1. 接收图片原本 url 2. 读取图片 3. 返回图片 （代码见图）
<img src="<后端端点>?url=<imageUrl>" />
我也让 AI 试着算了算仅图片资源代理场景下的花费对比，但还需要验证，便宜 90% 说法来自这里，待我用一段时间来验证验证。说不定会发现一些 tricks。
---
尝试计算一下这样的开销会不会变得很大，定量说说，因为我想知道花费
让我计算一下使用图片代理的具体开销：
带宽消耗：
CopyInsert
头像平均大小：~20KB
每次代理请求：
- 下载：20KB（服务器从B站下载）
- 上传：20KB（服务器发送给用户）
总计：40KB/请求
假设每月10,000次头像请求：
每月总流量 = 40KB × 10,000 = 400MB
服务器资源：
CopyInsert
每个请求的内存占用：
- 临时缓冲：~20KB（存储图片数据）
- 程序开销：~1MB（Node.js 进程）
CPU使用：
- 每个请求处理时间：~100ms
- 主要用于：网络 I/O，不涉及图片处理
具体成本（以 Vercel 为例）：
CopyInsert
Vercel 免费计划包含：
- 带宽：100GB/月
- 执行时间：100小时/月
- 函数调用：100,000次/月
我们的使用量（每月10,000次请求）：
- 带宽：400MB（远低于限制）
- 执行时间：~0.28小时（10,000 × 100ms）
- 函数调用：10,000次
结论：完全在免费计划范围内
自托管成本估算：
CopyInsert
最小规格服务器（1GB RAM，1核CPU）：
- DigitalOcean: $5/月
- AWS t2.micro: ~$8/月
- 带宽成本：基本包含在套餐内
实际成本：
- 服务器：$5/月
- 带宽：包含在基础套餐中
- 总计：$5/月
与直接使用 Next.js Image 优化对比：
CopyInsert
Next.js Image 优化（Vercel Pro）：
- 基础费用：$20/月
- 图片优化：包含5,000次/月
- 超出部分：$5/1,000次
我们的代理方案：
- 免费计划：$0/月
- 自托管：$5/月
结论和建议：
如果使用 Vercel 托管：
选择代理方案，完全免费
每月10,000次请求只用到免费额度的 10%
如果自托管：
每月固定$5，不受请求量影响
适合请求量大的情况
成本优势：
比 Next.js Image 优化便宜90%以上
不需要担心超额费用
可以轻松扩展到其他图片源
这个方案的成本效益比非常高，特别是在你的使用场景下（只需要访问图片，不需要优化）。你觉得这个成本分析合理吗？需要我详细解释某个部分吗？
使用场景就是从别的平台获取到的 imageUrl 想直接在自己的网站上使用，但直接放在 src 是无法显示的，就需要通过服务器代理得到。
Vercel 的 Image 组件自动实现图片资源代理功能，就是那个总要去 next.config.js 配置的图片路由的东西。Vercel 文档中写到该优化服务在免费计划有 1000 次额度，Pro计划有 5000 次。可以通过 unoptimized 属性关掉优化。
实现方案不难，就是创建一个 api 端点：1. 接收图片原本 url 2. 读取图片 3. 返回图片 （代码见图）
<img src="<后端端点>?url=<imageUrl>" />
我也让 AI 试着算了算仅图片资源代理场景下的花费对比，但还需要验证，便宜 90% 说法来自这里，待我用一段时间来验证验证。说不定会发现一些 tricks。
---
尝试计算一下这样的开销会不会变得很大，定量说说，因为我想知道花费
让我计算一下使用图片代理的具体开销：
带宽消耗：
CopyInsert
头像平均大小：~20KB
每次代理请求：
- 下载：20KB（服务器从B站下载）
- 上传：20KB（服务器发送给用户）
总计：40KB/请求
假设每月10,000次头像请求：
每月总流量 = 40KB × 10,000 = 400MB
服务器资源：
CopyInsert
每个请求的内存占用：
- 临时缓冲：~20KB（存储图片数据）
- 程序开销：~1MB（Node.js 进程）
CPU使用：
- 每个请求处理时间：~100ms
- 主要用于：网络 I/O，不涉及图片处理
具体成本（以 Vercel 为例）：
CopyInsert
Vercel 免费计划包含：
- 带宽：100GB/月
- 执行时间：100小时/月
- 函数调用：100,000次/月
我们的使用量（每月10,000次请求）：
- 带宽：400MB（远低于限制）
- 执行时间：~0.28小时（10,000 × 100ms）
- 函数调用：10,000次
结论：完全在免费计划范围内
自托管成本估算：
CopyInsert
最小规格服务器（1GB RAM，1核CPU）：
- DigitalOcean: $5/月
- AWS t2.micro: ~$8/月
- 带宽成本：基本包含在套餐内
实际成本：
- 服务器：$5/月
- 带宽：包含在基础套餐中
- 总计：$5/月
与直接使用 Next.js Image 优化对比：
CopyInsert
Next.js Image 优化（Vercel Pro）：
- 基础费用：$20/月
- 图片优化：包含5,000次/月
- 超出部分：$5/1,000次
我们的代理方案：
- 免费计划：$0/月
- 自托管：$5/月
结论和建议：
如果使用 Vercel 托管：
选择代理方案，完全免费
每月10,000次请求只用到免费额度的 10%
如果自托管：
每月固定$5，不受请求量影响
适合请求量大的情况
成本优势：
比 Next.js Image 优化便宜90%以上
不需要担心超额费用
可以轻松扩展到其他图片源
这个方案的成本效益比非常高，特别是在你的使用场景下（只需要访问图片，不需要优化）。你觉得这个成本分析合理吗？需要我详细解释某个部分吗？
1 10
用上了 Shadcn 的 Data Table，还用上了 winsur，有点爽。有什么问题直接问 claude 3.5，就是有些幻觉，解决方案可能也不是最匹配的。
Tanstack Table + Shadcn Table。
效果：ui.shadcn.com
教程：ui.shadcn.com
核心主要分成三个板块 columns，data，table
- column：自定义表头、格子，支持根据传入数据后改造为各种组件。
- data：来自数据库
- table：控制样式，创建小组件，以及设置各种功能。
Tanstack Table + Shadcn Table。
效果：ui.shadcn.com
教程：ui.shadcn.com
核心主要分成三个板块 columns，data，table
- column：自定义表头、格子，支持根据传入数据后改造为各种组件。
- data：来自数据库
- table：控制样式，创建小组件，以及设置各种功能。
0 00
Notion Calendar 的 Hero 设计
延续了 Notion 的简约风格
- 视觉中心的 Logo 和 产品信息
- 漂亮的动画弹出效果，以及色彩
- 下方露出部分的演示视频吸引用户向下滚动
复刻：
- framer-motion motino
延续了 Notion 的简约风格
- 视觉中心的 Logo 和 产品信息
- 漂亮的动画弹出效果，以及色彩
- 下方露出部分的演示视频吸引用户向下滚动
复刻：
- framer-motion motino
00:05
0 00
一个示例，在 ai-sdk 中用上 DeepSeek。
不知道朋友们有没有在自己的 Nextjs 项目中 用上 ai-sdk。虽然它集成了很多常用的 ai 应用组件，但文档没有提供 DeepSeek V3 的model。
然而它有“Openai 兼容Api”，DeepSeek 也开了相应的接口供调用。可以用截图里的方式直接使用，创建后端路由！
不知道朋友们有没有在自己的 Nextjs 项目中 用上 ai-sdk。虽然它集成了很多常用的 ai 应用组件，但文档没有提供 DeepSeek V3 的model。
然而它有“Openai 兼容Api”，DeepSeek 也开了相应的接口供调用。可以用截图里的方式直接使用，创建后端路由！
13 54
分享一个json生成类型定义的网站。
之前用nextjs+typescript fetch数据到的数据没有定义，any战士。但需要的时候又搞不定很烦。有了这个工具，只要把获取到的json复制粘贴进去，几个版面长度的类型定义瞬间完成。我用这个生成基于zod的定义。
太爽，早点发现就好了
之前用nextjs+typescript fetch数据到的数据没有定义，any战士。但需要的时候又搞不定很烦。有了这个工具，只要把获取到的json复制粘贴进去，几个版面长度的类型定义瞬间完成。我用这个生成基于zod的定义。
太爽，早点发现就好了
5 21
4 40
