NotionNav基于Notion数据库的现代化导航页面系统，支持动态管理权限控制搜索功能，配置帕斯内网穿透实现公网访问

NotionNav 是一个基于 Next.js 和 Notion 数据库的现代化导航页面，让你可以通过 Notion 数据库轻松管理和展示个人或团队的导航菜单。它支持动态菜单管理、权限控制、搜索功能和登录验证，是一个功能强大且美观的导航页解决方案。

这个项目最大的特色是与 Notion 深度集成，你只需要在 Notion 中创建一个数据库，就能自动生成一个功能完整的导航页面。支持权限控制、分类分组、智能搜索、收藏功能等，界面采用毛玻璃效果和流畅动画，支持响应式设计，完美适配各种设备。

项目还支持背景图同步功能，你可以为 Notion 数据库设置封面图片，它会自动同步为导航页的背景图。当没有设置封面时，会自动使用 Bing 每日图片作为背景，让你的导航页始终保持美观。

项目地址：点我跳转

如需在外也打开项目需要配置内网穿透使用，点击前往帕斯内网穿透，先注册好账号备用。

由于该项目是基于 Next.js 的前端应用，没有提供官方的 Docker 镜像，我们需要使用 Node.js 环境来运行。最简单的方式是使用 Node.js 官方镜像来部署。

打开飞牛 NAS 或其他的 NAS 设备点击本地镜像-添加镜像-从 URL 添加。这一步先添加 Node.js 镜像

镜像填 node:20-alpine 等待下载完成后点击启动按钮启动容器

勾选开机自动启动后下一步，端口设置这里。请设置容器端口为 3000，主机端口可以设置为 3000 或其他未被占用的端口（如果端口冲突可以修改主机端口，但容器端口必须保持 3000）

存储位置这里，需要创建一个文件夹映射到容器的 /app 目录，用于存放项目代码。

环境变量设置：必须设置 NOTION_PAGE_ID：你的 Notion 页面 ID（从 Notion 数据库 URL 中获取的 32 位字符串）

选择设置，可以不填 NOTION_TOKEN：Notion 私有 Token（用于访问未公开的数据库） NOTION_ACTIVE_USER：Notion 活跃用户 ID（用于访问未分享的文档）

其他的都不用填写，直接下一步启动就好了。

注意：由于这是一个 Next.js 项目，启动后需要手动进入容器安装依赖和构建项目：

1. 进入容器终端 2. 执行 git clone https://github.com/qazzxxx/NotionNav.git /app 3. 执行 cd /app && npm install 4. 执行 npm run build 5. 执行 npm start

创建成功后可以访问 ip:3000（按照你设置的主机端口访问）到这里就可以正常显示项目了

打开帕斯内网穿透控制台，点击隧道管理-隧道列表

点击创建新隧道

隧道节点可以随便选，一般选个负载低的就可以

接下来填写信息，隧道名称可以随便填写

本地 IP 默认就可以

传输协议可以选择 TCP 也可以选择 HTTP/HTTPS

HTTP 就是域名的形式，教程以使用 TCP 为演示

本项目中如果没有修改端口的话默认是 3000 端口，这里本地端口就填 3000

远程端口可以留空也可以自定义。下图仅做参考，请按照实际项目端口添加。

填写完毕点击确定

点击刚才创建好的隧道，点击获取配置文件

回到飞牛 NAS，点击应用中心下载 frpc 客户端

打开后粘贴刚才复制的配置文件，点击确定即可

复制帕斯内网穿透控制台的访问 IP 和端口

可以看到已经正常穿透成功了

本篇教程结束