NavSphere 导航 管理系统开源了

在日常工作和生活中，不知道你有没有遇到这种情况：收藏了很多网址、资料和常用工具，但每次真正需要找的时候，要么翻半天书签栏，要么记不清放在哪个收藏夹，想找还得翻历史记录，费时又费心。

在线体验地址：https://dh.leti.ltd/

尤其对程序员或者团队来说，团队内部常用的站点、文档、API、Demo 链接，散落在各个角落，没人统一整理，大家要么问同事要，要么重复收藏。结果就是信息重复、更新麻烦、管理混乱。

这时候，就很需要一个好用的、简单可靠的导航管理工具，NavSphere 就是这么一个东西。

NavSphere 是什么？

NavSphere 是一个用 Next.js 14 打造的现代化书签和导航管理平台，支持个人用，也支持团队一起管理，还能把数据放在 GitHub 上，安全又可控。

对程序员来说，这意味着什么？

意味着你可以像写代码一样管理你的导航数据，放在 GitHub 上有版本控制，谁改了什么一目了然，还不用担心换电脑、换团队、换域名，数据跟着仓库走，永远都在。

它有哪些亮点？

最新技术栈：Next.js 14 + React 18 + TypeScript + Tailwind CSS，都是前端圈子里口碑好的技术。
GitHub OAuth 登录：用 NextAuth.js 实现，直接用 GitHub 账号登录，方便又安全。
数据放 GitHub 仓库：所有导航数据都在你自己的 GitHub 仓库里，想公开就公开，想私有就私有，想回滚版本分分钟搞定。
支持深浅色主题：白天黑夜随心换，看着不累眼。
拖拽排序：想怎么排就怎么排，鼠标拖一拖，比改 JSON 文件爽多了。
智能搜索：常用网址多也不怕，搜一下立刻找到。
PWA：做成渐进式 Web 应用，手机、平板装一个图标，像用 App 一样。
Cloudflare Pages 部署：用边缘计算，全球访问都快。

怎么开始用？

NavSphere 的上手门槛很低，要求你会点 Git 和 Node.js，基本就是照着文档来就行。

环境要求：

• Node.js 18+
• pnpm（或者 npm/yarn）
• 一个 GitHub 账号

快速启动：

git clone https://github.com/tianyaxiang/NavSphere.git
cd NavSphere
pnpm install
cp .env.example .env.local
pnpm dev

然后用浏览器打开 http://localhost:3000，一个本地可用的导航平台就跑起来了。

怎么配 GitHub？

• 你需要先去 GitHub Developer Settings 新建一个 OAuth App，拿到 Client ID 和 Client Secret。
• 再建一个仓库（比如 navsphere-data），NavSphere 会在里面自动生成 navigation.json、site.json、resources.json 这几个文件，分别存导航数据、站点设置和资源配置。
• 全部放好后，在 .env.local 里把 GitHub 相关的变量配好就行了。

怎么部署？

NavSphere 推荐用 Cloudflare Pages 部署，一来全球 CDN 加速，二来免费额度也足够个人和小团队用了。也支持 Vercel、Netlify、Railway 等，几乎是前端项目的标配部署方案。

数据结构和开发者友好度

对程序员来说，最爽的地方在于数据是标准 JSON 结构，你可以直接在仓库里改，也可以在 NavSphere 的前端页面拖拽排序、增删改，怎么方便怎么来。

数据文件：

navigation.json：就是你的书签、分组、顺序。
site.json：一些全局配置。
resources.json：可选的扩展资源。

如果要二次开发，NavSphere 用的都是社区成熟的库，比如：

• Radix UI（无障碍组件）
• Lucide React（图标库）
• React Query（状态管理）
• React Hook Form（表单）
• Zod（数据验证）

整个项目结构也很清晰，想改样式就去 Tailwind CSS，想改页面就看 app/ 和 components/，想加功能也不怕找不到地方。

为什么值得一试？

总结下来，NavSphere 解决了几个痛点：

✅ 书签不乱，随时同步
✅ 团队可共享，一个人改全员可用
✅ 数据放 GitHub，可管版本
✅ 开源可定制，想自己改功能完全没压力
✅ 技术栈主流，学习成本低

一句话推荐

如果你是个讲究高效的程序员，或者想给团队找一个可控、好维护的导航方案，NavSphere 值得你动手试试。

在线体验地址：https://dh.leti.ltd/

项目地址： https://github.com/tianyaxiang/NavSphere

转自：https://mp.weixin.qq.com/s/Rm7PgsUK_bmpMk9L7HZX3A