我有个小习惯：早上刷一轮热榜。微博、知乎、掘金、B 站、GitHub Trending……信息是全了，但也很容易把注意力刷散。
NewsNow 做的事不复杂：把这些“热榜源”收拢到一个地方，用更舒服的阅读界面呈现出来，并且把登录同步、缓存节流、PWA、部署这些“上线会遇到的事”都顺手补齐了。
1）它解决的不是“没内容”，而是“内容太散”
NewsNow 是一个实时新闻/热榜聚合阅读器，重点在阅读体验和聚合能力：
- 多数据源聚合：科技、社区、视频、资讯等热榜都能接入
- GitHub OAuth 登录：登录后可以做跨设备数据同步
- 默认缓存：30 分钟缓存，登录用户可以手动强刷
- 自适应抓取间隔：按不同数据源更新频率动态调整，最小 2 分钟（这点很务实）
- PWA + SEO：
sw.js、sitemap.xml、robots.txt、OG/Twitter Card 都有
- 部署兼容：Cloudflare Pages、Vercel、Docker 等
- MCP 支持：如果你平时玩 Agent/自动化，这个项目甚至能直接当数据源用
2）技术栈一句话：前端现代，服务端够用，类型贯穿
我从“能不能长期维护”这个角度看，它的选型挺舒服：
- 前端：React + TypeScript + Vite，样式用 Tailwind CSS / UnoCSS
- 路由：TanStack Router（会生成
routeTree.gen.ts）
- 状态管理：Jotai（原子化，栏目、搜索、主题、同步、Toast 都拆得细）
- 服务端：Nitro Server（Nuxt 的服务端框架，用来承载 API 与数据库交互）
- 抓取与解析：
myFetch + Cheerio（解析 HTML），有的源直接走 JSON API
- 数据库：db0 connectors；生产推荐 Cloudflare D1，本地可以用
better-sqlite3
- 工程化：pnpm、ESLint、GitHub Actions、Docker 文件齐全
如果你平时在云栈社区喜欢找“能直接抄作业”的全栈结构，这个属于那种目录打开就能上手的。
3）我最建议你看的两块：server/sources 和 shared
（1）数据源适配：一个源一个文件，扩展成本低
核心目录在 server/sources/，里面是 _36kr.ts、weibo.ts、zhihu.ts、github.ts 这种结构——一眼就知道：每个站点一个适配器。新增源的流程在 CONTRIBUTING.md 写得很清楚：注册元信息 → 写抓取解析 → 返回统一的 NewsItem[]。
这套做法很像“策略模式/插件化”：以后要加一个源，不需要动主流程，只要按规范加文件就行。
（2）共享类型：前后端不吵架
shared/types.ts 这种“前后端共享类型”我很喜欢。聚合类项目最容易出现的 bug 不是写错 UI，而是接口字段悄悄变了；共享类型能让这类问题更早暴露。
4）工程细节里，最“像线上项目”的是缓存与节流
很多聚合项目写到最后会卡在现实问题：请求太频繁、目标站点不稳定、成本上去、还容易被限制。
NewsNow 的默认 30 分钟缓存 + 自适应抓取间隔（最小 2 分钟）属于那种“你上线后迟早要加，但它先帮你加了”的设计。还有 proxySource 这类代理机制，也是在处理“部分数据源受限”的现实情况。
这些“线上会遇到的事”都考虑到了之后，它就不太像玩具项目了——甚至还能往“工具化”走：NewsNow 支持 MCP，可以把热榜能力给到你的工作流/Agent 去调用。
5）MCP：把“热榜”变成可调用的工具能力
还有个挺有意思的点：NewsNow 支持 MCP（Modular Copilot Protocol）。简单说，它不只是给人看的网页，也可以作为 AI/自动化工作流 的一个“数据工具”，让支持 MCP 的客户端通过接口去拉取内容（比如最新热榜、指定源的条目），再做总结、筛选、定时推送之类的自动化。
配置也很直观，示例大概长这样（把 BASE_URL 换成你自己部署的地址即可）：
{
"mcpServers": {
"newsnow": {
"command": "npx",
"args": ["-y", "newsnow-mcp-server"],
"env": {
"BASE_URL": "https://newsnow.busiyi.world"
}
}
}
}
从目录上也能看到它是“认真做了”的：server/mcp/ 里有描述与启动逻辑，对应还有 server/api/mcp.post.ts 的入口。对想把“看热榜”升级成“自动整理信息流”的同学来说，这块挺值得顺手研究一下。
6）适合拿来做什么（比“收藏吃灰”更实际）
- 做一个自己的“热榜仪表盘”：少开几个 App，信息更集中
- 当全栈练习题：数据源适配 → API → 缓存 → 登录同步 → 前端信息流
- 当作品集：能部署、有 PWA、有 SEO，有真实业务味道
- 进阶玩法：用 MCP 接到你的 Agent/工作流里，自动生成“晨报/晚报”、关键词监控、每周热点清单（适合团队同步信息）
顺带一提，如果你准备系统补一下工程化路线，我自己常用的学习入口在云栈社区：
项目地址与文档
- Github：
ourongxing/newsnow
- Node.js：
https://yunpan.plus/f/58
- 前端框架与工程实践：
https://yunpan.plus/f/18
留个讨论点
你更希望热榜聚合器“像阅读器”（干净、少干扰），还是“像信息中心”（过滤、订阅、收藏、推荐都拉满）？
如果只让你加一个功能，你会选：RSS 导出、收藏/稍后读、还是按关键词屏蔽？
以及：如果你用 MCP 把热榜接进工作流，你最想自动化的是什么——晨报、周报，还是关键词提醒？
我是《云栈大前端》，主打前端工程、前端框架、移动开发、跨平台、全栈开发。后续我会在云栈社区持续拆解这类“目录清晰、能部署、可扩展”的项目，帮你更快把开源项目变成自己的能力资产。欢迎关注。
标签：#NewsNow #Github #React #TypeScript #全栈开发 #PWA #RSS #MCP
发表于 1 小时前
|
查看: 3|
回复: 0
