一个人用 AI，把日记写成“成长镜子”：AI 项目开源与实战分享（Next.js + Supabase + AI API)

范特西枪手
253 阅读6分钟

一个人用 AI，把日记写成“成长镜子”：AI 项目开源实现与实战分享（Next.js + Supabase + AI API）

在线体验：anotherme.life

开源仓库：github.com/AllenBei/An…

无论开源还是线上，都有中文版，可以切换再体验也许效果会更佳！

文章大纲（点击直达）

引言：为什么做它｜怎么玩它

最近看了一些书，发现‘五分钟日记’可以让人感觉世界更美好，减少焦虑。 但问题是我没有写日记的习惯，曾经试过很快就坚持不下去。我就在想：能不能做个 AI日记产品， 可以让自己更多的兴趣去记录生活。尝试培养写日记的习惯，并减缓自己的焦虑～

写日记有点像是照镜子，我希望“另一个自己”能主动引导、理解我的情绪、给出情绪洞察，让我发现另一面没关注到的自己。 于是做了 AnotherMe —— 一个面向自我成长的智能日记应用。它会提示你写什么、在你写的过程中做实时情绪分析，并在每天结束时给出总结与反思方向。

  • 你能得到什么：更低的记录门槛，更深的自我理解，更清晰的日常复盘。
  • 它如何做到：结构化引导 + 情绪分析 + 可视化洞察（全部本地可自托管）。
  • 现在就试：线上体验 anotherme.life；也可按下文「快速上手」本地跑起来，自己建个 supabase 管理自己的日记数据。 免费版的 supabase 也足以让你个人线上日记的数据保存了～还是蛮推荐的！

就希望这个产品能让更多人养成写日记的这个好习惯吧！大家一起共勉！！！

注：本文展示的交互动图来自项目 README，若在平台内无法直接播放，可点击到在线体验或仓库查看完整演示。

产品亮点：动图直观看体验

  1. 引导写作（结构化启发 × 深度思考）

ai_response_write.gif

要点：智能提示｜深度思考｜个性化引导

  1. 情绪分析（实时理解你的文本情绪）
情绪分析演示

要点：实时分析｜情绪追踪｜心情洞察

  1. 日终总结（自动生成当天摘要）
日终总结演示

要点：AI 洞察｜每日反思｜模式识别（开源版不含“鼓励与建议”）

  1. 时间轴回顾（记忆与成长的一目了然） 要点：时间线视图｜记忆重拾｜成长追踪

  2. 情绪可视化（把感受变成“可看的故事”）

情绪可视化演示

要点：交互可视化｜情绪气泡｜视觉叙事

我是如何一个人做完的：从产品到部署

目标很清晰：降低写作阻力、提升思考深度、把抽象感受变成“可见”的成长轨迹。围绕目标，我把工作拆成四段：

  • 产品：聚焦三个关键场景——开始写、写的过程中、写完当天。分别对应“引导写作、实时分析、日终总结/回顾”。
  • 设计：界面以“轻、静、稳”为准则：减少无关装饰，重点在内容与情绪反馈；动画只服务信息层级与状态切换。
  • 开发：
    • 前端：Next.js App Router + React 19，Tailwind CSS 快速迭代；Framer Motion 负责常规动效，GSAP 用于复杂时间线；状态用 Zustand，校验用 Zod。
    • 后端/API：使用 App Router 的 API 路由承载业务逻辑，结合 Server Components/Actions 简化数据流。
    • 数据：Supabase Postgres 存储，Auth 管理登录；按需配置 RLS/策略，确保同一用户只能访问自己的数据。
    • AI：默认接入 DeepSeek，可配置 OpenAI 等，通过环境变量切换供应商与模型。
  • 部署：
    • 前端托管到 Vercel，得到开箱即用的 SSR/缓存策略与预览环境。
    • 数据库与认证使用 Supabase 托管；通过 Supabase CLI 管理迁移与环境联动。

架构概览：为什么是 Next.js + Supabase

选择标准：独立开发者友好、免费起步、能把产品尽快做出来并稳定迭代。加上 AI coding 的环境下，生成的质量会更好。

  • Next.js（App Router）
    • SSR/SSG/ISR 灵活组合，产品可早期就有“速度感”。
    • Server Components/Actions 简化服务端数据流与接口边界。
    • 与 Vercel 天然契合，预览与回滚简单可靠。
  • Supabase（Postgres + Auth + 存储 + Edge Functions）
    • 免费层对个人项目够用；Postgres 强大且易迁移。
    • Auth/行级权限（RLS）让“多用户数据隔离”有正统做法。
    • CLI/迁移配套齐全，团队协作或换环境都不心虚。
  • 组合优势
    • 前端一体化开发体验 + 后端即服务（BaaS），单人也能高效覆盖全栈。
    • 本地开发到线上部署流畅，环境变量与数据库迁移一键打通。

简单结构示意：

[Next.js App Router]
  ├─ UI/动画（React 19 + Tailwind + Framer Motion/GSAP）
  ├─ API 路由（服务端逻辑 / Server Actions）
  └─ AI 适配层（DeepSeek/OpenAI 等，env 可切换）

[Supabase]
  ├─ Postgres（日记/情绪/分析/回顾表）
  ├─ Auth（登录与用户隔离，RLS）
  └─ CLI/迁移（db push / link / login）

快速上手：3–5 步跑起来

前置要求：Node.js 18+、pnpm 8+、已安装 Supabase CLI。

  1. 克隆与安装依赖
git clone https://github.com/AllenBei/AnotherMe-AI_Companion_Journal.git
cd AnotherMe-AI_Companion_Journal
pnpm install
  1. 关联 Supabase 并推送数据库结构
npx supabase login
npx supabase link --project-ref YOUR_PROJECT_ID
npx supabase db push
  1. 配置环境变量
cp .env.example .env.local
# 填写至少：
# NEXT_PUBLIC_SUPABASE_URL
# NEXT_PUBLIC_SUPABASE_ANON_KEY
# NEXT_PRIVATE_SUPABASE_SERVICE_ROLE_KEY
# SUPABASE_INTERNAL_API_ADMIN_AUTH_SECRET
# （可选）OPENAI_API_BASE_URL / OPENAI_API_KEY / OPENAI_MODEL / DEEPSEEK_API_KEY 等
  1. 启动开发环境
pnpm dev

访问：http://localhost:3000

可选：在 Supabase 后台 Authentication 中启用第三方登录（GitHub/Google），并在 URL Configuration 配置本地回调地址。

结尾

  • 如果你也想更轻松地把生活写下来，欢迎试用在线版或本地跑起来。
  • 觉得有帮助的话，麻烦点个 Star。
  • 有想法、Bug、或想一起把它做得更好：Issues/PR 都非常欢迎。

开源版与托管版边界说明：开源版功能完整可自托管；托管版在体验与能力上更“省心”和更丰富（如更多模板、建议等）。目标始终是——让更多人轻松开启自我探索，让记录真正转化为成长。 开源的你直接托管在 supabase 和 vercal，也可以做到基本 0 成本构建自己的线上日记！ 当然希望大家可以多提提你的想法和意见，一起交流。

感谢阅读，希望 AnotherMe 能成为你日常里那个温和、可靠、会倾听的“成长镜子”。

如果对你有帮助，麻烦点个 Star：github.com/AllenBei/An…

这对我很重要！谢谢大家啦！！！

avatar
文章
阅读
粉丝