基于Next.js与Supabase构建个人财务追踪应用Expense.fyi全栈实践-程序员充电站

1. 项目概述与核心价值

如果你和我一样，对个人财务的混乱状态感到头疼，总想找个趁手的工具来理清收支、投资和订阅，但又对市面上的应用要么功能臃肿、要么隐私堪忧感到不满，那么今天聊的这个开源项目Expense.fyi，很可能就是你在找的答案。这是一个基于现代 Web 技术栈构建的、自托管友好的个人财务追踪应用。它的核心目标很纯粹：让你能轻松、直观地管理收入、支出、投资和订阅，并且完全掌控自己的数据。我花了些时间深入研究它的代码、部署并实际使用，发现它不仅仅是一个“玩具项目”，其架构设计、技术选型和实现细节都透露出生产级的考量，非常适合开发者学习现代全栈开发，也适合任何希望拥有一个私有、可定制财务工具的用户。

简单来说，Expense.fyi 解决了几个关键痛点：数据隐私（你可以完全自己部署）、使用成本（开源免费）、以及功能的专注性（不搞社交、不卖广告，只做财务追踪）。它采用了 Next.js 的应用目录（App Router）模式、Tailwind CSS 进行样式设计、Supabase 作为后端即服务（BaaS）、Prisma 作为 ORM，并通过 Vercel 实现一键部署。这套组合拳在当前的前端生态中非常流行且高效，项目本身也成为了一个绝佳的学习范本。接下来，我会带你深入拆解这个项目的方方面面，从设计思路、技术实现到实操部署和避坑指南，让你不仅能用好它，更能理解它背后的“为什么”。

2. 技术栈深度解析与选型逻辑

当我们评估一个开源项目，尤其是工具类应用时，其技术栈的选择直接反映了项目的成熟度、可维护性和未来扩展性。Expense.fyi 的选型堪称“现代 Web 开发样板间”，每一环都经过深思熟虑。

2.1 前端框架：Next.js 与应用目录（App Router）

项目明确使用了 Next.js，并且是基于 App Router 构建的。这不是一个随意的选择。在 Next.js 13 之前，基于pages目录的文件路由系统是主流，但 App Router 引入了基于 React Server Components 的架构，带来了革命性的变化。

为什么是 App Router？对于 Expense.fyi 这类数据密集型的应用，用户体验的核心是快速加载和渲染数据。App Router 允许开发者在服务端直接获取数据并渲染组件，再将静态的 HTML 发送到客户端。这意味着用户打开仪表盘时，看到的是已经填充了数据的页面，而非先看到一个骨架屏再等待客户端 JavaScript 获取数据。这极大地提升了首屏加载速度和用户体验。例如，在/dashboard页面，服务端组件可以直接从数据库查询当前用户的交易记录，生成完整的 HTML。此外，App Router 内置的布局（Layouts）、加载状态（Loading UI）和错误处理（Error Boundaries）机制，让开发复杂的、嵌套路由的应用变得更加清晰和健壮。

实操注意点：如果你从传统的 Pages Router 迁移过来，需要特别注意数据获取方式的变化。在 App Router 中，应优先在服务端组件中使用async/await配合fetch或直接调用数据库查询函数来获取数据。客户端交互部分（如表单提交）则使用“use client”指令标记的客户端组件，并通过useState,useEffect或 TanStack Query 来管理状态。项目源码中很好地体现了这种分离。

2.2 样式与组件库：Tailwind CSS 与 shadcn/ui

Tailwind CSS 是一个实用优先的 CSS 框架，它通过提供大量低级别的工具类，让开发者能快速构建自定义设计。Expense.fyi 选择它，是因为其极高的开发效率和一致性。财务应用需要清晰、易读的界面，Tailwind 的间距、颜色、排版工具类能轻松实现这一点。

更有趣的是组件库的选择：shadcn/ui。这不是一个传统的通过npm install安装的组件库，而是一套可以拷贝到项目中的、基于 Radix UI 和 Tailwind 构建的高质量组件源代码。这意味着你对组件拥有完全的控制权，可以随意修改以满足设计需求，同时避免了传统组件库可能带来的捆绑包体积过大和样式覆盖困难的问题。

选型优势：

零运行时开销：组件是你代码的一部分，没有额外的运行时依赖。
极致定制：每个组件的样式（Tailwind 类名）都完全暴露，修改起来就像修改你自己的代码一样简单。
访问无障碍：基于 Radix UI，默认提供了良好的键盘导航和屏幕阅读器支持。

在 Expense.fyi 中，你看到的表格、表单、对话框等，很可能都是基于 shadcn/ui 的组件定制的。这种选择赋予了项目极高的界面定制潜力。

2.3 后端与数据库：Supabase + PostgreSQL + Prisma

这是整个应用的数据核心。Supabase 提供了一个开源的 Firebase 替代方案，但其底层是实实在在的 PostgreSQL 数据库。

Supabase 的角色：

认证（Auth）：Expense.fyi 使用了 Supabase 的“魔法链接”（Magic Link）认证。用户输入邮箱，系统发送一个包含登录链接的邮件，点击即登录。这种方式无需密码，体验好且安全（链接一次性有效）。Supabase 帮你处理了令牌生成、验证、会话管理等一系列复杂问题。
数据库（Database）：提供托管的 PostgreSQL 实例。Supabase 的仪表盘还内置了表编辑器、SQL 编辑器，方便开发阶段直接操作数据。
实时订阅（Realtime）：虽然当前版本的 Expense.fyi 可能未使用，但 Supabase 的实时功能为未来实现多设备数据同步或协同记账提供了可能。
存储（Storage）：可用于存储账单截图等附件。

Prisma 的角色：Prisma 是一个下一代 ORM（对象关系映射工具）。它在 Supabase 的 PostgreSQL 和你的 Next.js 应用代码之间扮演了类型安全的桥梁角色。你需要在schema.prisma文件中定义数据模型（如User,Transaction,Subscription），然后通过prisma generate命令生成一个类型安全的 Prisma Client。之后在代码中，你就可以像操作 JavaScript 对象一样进行数据库查询，并且享受完整的 TypeScript 类型提示和编译时检查。

为什么这样组合？Supabase 解决了基础设施和认证的难题，让开发者能快速起步。Prisma 则解决了在 TypeScript 环境中安全、高效地操作数据库的难题。两者结合，既享受了 BaaS 的开发速度，又保持了代码的强类型安全和良好的开发者体验。数据加密部分，如项目简介提到的“private data are encrypted”，通常是在应用层（通过 Prisma 中间件）或数据库层（使用 PostgreSQL 的pgcrypto扩展）对敏感字段（如交易备注）进行加密处理。

2.4 部署与集成：Vercel + Resend + Lemon Squeezy

Vercel：作为 Next.js 的创建者，Vercel 是部署 Next.js 应用的不二之选。它提供全球 CDN、自动 HTTPS、与 Git 仓库的无缝集成（每次git push自动部署）、以及针对 Serverless Functions 和 Edge Functions 的优化。对于 Expense.fyi 这样的全栈应用，Vercel 能自动将服务端组件部分部署为 Serverless Functions，处理起来非常高效。
Resend：一个专注于开发者的电子邮件服务。它提供了清晰的 API、React 组件（用于构建邮件模板）和出色的送达率。Expense.fyi 用它来发送魔法链接邮件、月度财务报告等通知。相比自己搭建邮件服务器或使用复杂的传统邮件服务，Resend 大大简化了工作。
Lemon Squeezy：这是一个处理支付、订阅管理和税务的 SaaS 工具。如果项目作者想提供一个付费托管版本，集成 Lemon Squeezy 可以轻松处理订阅付款、发放许可证密钥、管理客户等功能。它的 API 设计友好，嵌入到应用中相对简单。

这套“Next.js + Vercel + Supabase”的组合，目前是个人开发者和小型团队构建全栈应用最流行、最顺畅的路径之一，Expense.fyi 是一个完美的实践案例。

3. 项目架构与核心模块实现剖析

理解了技术栈，我们深入到项目内部，看看这些技术是如何被组织起来，实现一个完整的财务追踪应用的。我会根据常见的功能模块进行拆解。

3.1 数据模型设计（Prisma Schema）

一切从数据开始。在prisma/schema.prisma文件中，定义了应用的所有数据表。一个精简的财务追踪模型通常包括：

model User { id String @id @default(cuid()) email String @unique name String? image String? // 关联关系 accounts Account[] transactions Transaction[] subscriptions Subscription[] // 时间戳 createdAt DateTime @default(now()) updatedAt DateTime @updatedAt } model Transaction { id String @id @default(cuid()) amount Decimal // 金额，使用Decimal避免浮点精度问题 type String // 'income'（收入）, 'expense'（支出）, 'investment'（投资） category String? // 类别，如“餐饮”、“交通”、“薪水”、“股票” description String? // 描述（加密字段） date DateTime @default(now()) // 交易日期 // 外键关联 userId String user User @relation(fields: [userId], references: [id], onDelete: Cascade) accountId String? account Account? @relation(fields: [accountId], references: [id], onDelete: SetNull) // 时间戳 createdAt DateTime @default(now()) updatedAt DateTime @updatedAt } model Account { id String @id @default(cuid()) name String // 账户名，如“招商银行储蓄卡”、“支付宝” balance Decimal @default(0) userId String user User @relation(fields: [userId], references: [id], onDelete: Cascade) transactions Transaction[] } model Subscription { id String @id @default(cuid()) name String // 订阅名称，如“Netflix”, “Notion” amount Decimal cycle String // 周期，如“monthly”, “yearly” nextBillingDate DateTime // 下次扣款日 userId String user User @relation(fields: [userId], references: [id], onDelete: Cascade) }

设计要点解析：

关系清晰：User是核心，拥有多个Account（账户）、Transaction（交易）和Subscription（订阅）。Transaction可以关联到一个特定的Account，这符合现实逻辑（一笔消费从某个账户扣款）。
数据类型精准：金额使用Decimal类型，这是处理财务数据的黄金准则，绝不能使用Float或Double，否则会因浮点数精度问题导致计算错误。
加密考虑：Transaction的description字段被标记为可加密。在实际实现中，可能会在 Prisma 中间件或应用层使用如crypto-js或 Node.js 内置crypto模块，结合存储在环境变量中的密钥进行加密解密。
级联删除：onDelete: Cascade确保了用户删除时，其所有相关数据也被清理，保持数据一致性。

3.2 认证与路由保护（Supabase Auth + Next.js Middleware）

用户认证是应用的大门。Expense.fyi 使用 Supabase 的魔法链接。

实现流程：

登录页面 (/signin)：用户输入邮箱，点击“发送魔法链接”。
服务端动作：应用调用 Supabase Auth 的signInWithOtp方法。Supabase 会向该邮箱发送一封包含登录链接的邮件。
链接处理：用户点击邮件中的链接，会被重定向回应用的一个回调地址（如/auth/callback）。
会话建立：在回调路由的 API 或服务端组件中，使用supabase.auth.exchangeCodeForSession()将链接中的代码兑换成用户会话。成功后，Supabase 会自动设置 Cookie。
路由保护：为了保护如/dashboard、/settings等需要登录才能访问的路由，项目通常会使用 Next.js 的中间件（Middleware）。在middleware.ts中，可以检查请求的路径，并使用 Supabase 的getUser方法（通过 Cookie）验证用户是否已认证。如果未认证，则重定向到/signin。

实操心得：

魔法链接的体验权衡：魔法链接免去了密码管理的麻烦，提升了安全性（无密码泄露风险），但依赖邮箱的即时可达性。对于财务类应用，这增加了安全性，但可能对某些用户稍显不便。可以考虑未来增加备用方案（如 TOTP）。
中间件优化：中间件会在每个请求上运行，为了性能，应避免在其中进行昂贵的操作。Supabase 的getUser是基于 Cookie 的轻量级验证，非常适合此场景。同时，应将静态资源（如/_next/,/favicon.ico）的路径从中间件检查中排除。

3.3 仪表盘与数据展示（服务端组件数据获取）

仪表盘 (/dashboard或根路径/app) 是用户的核心界面，需要展示图表、近期交易、账户总览等聚合信息。

在 App Router 中，这通常是一个服务端组件。它可以直接从数据库获取数据，然后渲染。

// app/dashboard/page.tsx 示例 import { getCurrentUser } from '@/lib/auth'; import { getDashboardData } from '@/lib/db/queries'; export default async function DashboardPage() { const user = await getCurrentUser(); // 从会话获取当前用户 if (!user) { redirect('/signin'); } // 并行获取多种数据，优化加载速度 const [summary, recentTransactions, chartData] = await Promise.all([ getMonthlySummary(user.id), getRecentTransactions(user.id, 10), getChartData(user.id, 'currentYear'), ]); return ( <div> <h1>欢迎回来，{user.name}</h1> {/* 概览卡片 */} <div className="grid grid-cols-1 md:grid-cols-3 gap-4"> <Card>总收入: {summary.totalIncome}</Card> <Card>总支出: {summary.totalExpense}</Card> <Card>净储蓄: {summary.netSave}</Card> </div> {/* 图表组件 */} <Chart data={chartData} /> {/* 最近交易列表 */} <TransactionTable transactions={recentTransactions} /> </div> ); }

关键点：

服务端数据获取：所有数据查询都在服务端完成，返回给浏览器的是包含数据的完整 HTML。这对 SEO 和性能非常有利。
并行查询：使用Promise.all并发执行多个独立的数据库查询，减少整体数据加载时间。
类型安全：getDashboardData等查询函数使用 Prisma Client，返回的结果有完整的 TypeScript 类型，在组件中使用时享受自动补全和类型检查。

3.4 交易增删改查（CRUD）与表单处理

这是应用最频繁的交互。通常会有/transactions/new页面用于创建，点击列表项进入/transactions/[id]进行编辑或查看详情。

创建/编辑表单：表单通常是一个客户端组件（“use client”），因为它需要处理用户输入和即时验证。可以使用react-hook-form配合zod进行表单管理和验证。表单提交时，会调用一个服务端动作（Server Action）。

服务端动作（Server Action）：Next.js App Router 中的 Server Action 允许你在服务端直接定义函数，并在客户端组件中调用。这避免了创建单独的 API 路由的麻烦。

// app/actions/transaction.ts 'use server'; import { revalidatePath } from 'next/cache'; import { createTransactionSchema } from '@/lib/validations'; // Zod 模式 import { prisma } from '@/lib/db'; export async function createTransaction(formData: FormData) { const rawData = Object.fromEntries(formData); const validatedData = createTransactionSchema.parse(rawData); // 验证并转换类型 // 获取当前用户（需要在Middleware或Action包装器中处理） const user = await getCurrentUserForAction(); // 使用 Prisma 创建记录 await prisma.transaction.create({ data: { ...validatedData, userId: user.id, }, }); // 重新验证仪表盘和交易列表页面，触发数据更新 revalidatePath('/dashboard'); revalidatePath('/transactions'); }

优势：

简化架构：无需写POST /api/transactions这样的 API 路由，直接在组件调用的函数里写后端逻辑。
类型安全：从表单数据到数据库操作，全程有 Zod 和 Prisma 保证类型安全。
数据即时性：通过revalidatePath或revalidateTag，可以在数据变更后立即使相关页面的缓存失效，下次访问时获取最新数据。结合 Next.js 的useOptimisticHook，甚至可以实现乐观更新，让 UI 在等待服务器响应时立即变化，提升用户体验。

3.5 订阅管理与提醒

订阅管理是 Expense.fyi 的一个特色功能。除了基本的 CRUD，其核心是“下次扣款日”的计算和提醒。

实现逻辑：

数据模型：Subscription模型包含cycle(月/年) 和nextBillingDate。
创建/更新逻辑：当用户新增或更新一个订阅时，需要根据cycle和起始日期（或上次扣款日）计算出nextBillingDate。
仪表盘展示：在仪表盘上，可以展示即将到期的订阅（例如，nextBillingDate在未来 7 天内），提醒用户预留资金。
后台提醒：更高级的实现可以结合一个定时任务（Cron Job）。例如，使用 Vercel 的 Cron Jobs 或 GitHub Actions，每天运行一个脚本，检查所有用户的订阅，找出nextBillingDate是明天的订阅，然后通过 Resend 发送邮件提醒。

技术细节：计算下次扣款日时，务必使用可靠的日期库（如date-fns或dayjs），避免原生Date对象在时区和月份加减上的陷阱。

4. 本地开发与生产部署全流程指南

现在，让我们动手把这个项目跑起来。无论是想学习代码还是部署自用，以下步骤都是必经之路。

4.1 本地开发环境搭建

前提条件：

Node.js (推荐 LTS 版本，如 18.x 或 20.x)
Git
一个代码编辑器（如 VS Code）
PostgreSQL 数据库（本地安装或使用 Supabase 云服务）

步骤：

克隆仓库：

git clone https://github.com/gokulkrishh/expense.fyi.git cd expense.fyi

安装依赖：

npm install # 或 yarn install # 或 pnpm install

环境变量配置：项目根目录下应该有一个.env.example或.env.local.example文件。复制它并创建你自己的.env.local文件。
```
cp .env.example .env.local
```
打开.env.local，你需要配置以下关键变量：
- DATABASE_URL：你的 PostgreSQL 数据库连接字符串。如果你使用 Supabase，可以在项目设置 -> Database -> Connection string 中找到。
- NEXT_PUBLIC_SUPABASE_URL和NEXT_PUBLIC_SUPABASE_ANON_KEY：你的 Supabase 项目 URL 和匿名 API 密钥。在 Supabase 仪表盘 -> Project Settings -> API 页面获取。
- RESEND_API_KEY：用于发送邮件的 Resend API 密钥。
- （可选）ENCRYPTION_KEY：用于加密敏感数据的密钥，一个安全的随机字符串。

数据库迁移：Prisma 需要根据schema.prisma文件在你的数据库中创建表。

npx prisma db push # 或者，如果你希望使用迁移历史记录（推荐生产环境）： npx prisma migrate dev --name init

生成 Prisma Client：
```
npx prisma generate
```
这会在node_modules/.prisma/client生成类型安全的数据库查询客户端。
启动开发服务器：
```
npm run dev
```
访问http://localhost:3000，你应该能看到应用界面。首次使用需要注册/登录。

4.2 部署到 Vercel（生产环境）

Vercel 的部署体验非常流畅，尤其适合 Next.js 项目。

将代码推送到 Git 仓库：将你的代码（包含配置好的.env.local，但注意不要提交包含真实密钥的.env.local到公开仓库！）推送到 GitHub、GitLab 或 Bitbucket。
在 Vercel 中导入项目：
- 登录 Vercel。
- 点击 “Add New…” -> “Project”。
- 从你的 Git 提供商那里导入expense.fyi仓库。
- Vercel 会自动检测到这是一个 Next.js 项目。
配置环境变量：
- 在项目设置的 “Environment Variables” 页面，添加你在.env.local中配置的所有变量（DATABASE_URL,NEXT_PUBLIC_SUPABASE_*,RESEND_API_KEY等）。
- 重要：生产环境的DATABASE_URL应该指向一个生产数据库（如 Supabase 的生产实例），不要使用本地数据库。
部署：
- 点击 “Deploy”。Vercel 会自动运行构建命令（npm run build）。
- 构建过程中，Vercel 会运行prisma generate。但数据库迁移通常不会在构建时自动运行。
运行数据库迁移（关键步骤）：
- 你需要在生产数据库上手动运行迁移。有几种方式：
  - 通过 Prisma Studio 远程连接：npx prisma db push --schema=./prisma/schema.prisma(不推荐生产，无版本控制)。
  - 使用迁移命令：npx prisma migrate deploy(推荐)。你可以在本地运行，但需确保DATABASE_URL指向生产库。更安全的方式是使用 Vercel 的 “Deploy Hooks” 或 GitHub Actions 在部署后自动执行迁移脚本。
配置自定义域名（可选）：
- 在 Vercel 项目设置的 “Domains” 页面，可以添加你自己的域名。

4.3 集成 Resend 发送邮件

为了让魔法链接和通知邮件正常工作，你需要正确配置 Resend。

在 Resend 官网注册并创建 API 密钥。
验证发件人域名（重要，提升送达率）：在 Resend 控制台添加你的域名（例如expense.yourdomain.com），并按照指引在你的 DNS 提供商处添加指定的 TXT 和 CNAME 记录。这证明了你有权从这个域名发送邮件。
在 Vercel 环境变量中设置RESEND_API_KEY。
在代码中，使用 Resend 的 SDK 发送邮件。Expense.fyi 的代码中应该已经有相关的工具函数，例如lib/email.ts，里面封装了调用resend.emails.send的逻辑。

注意事项：开发环境下，你可以使用 Resend 提供的测试邮箱地址（如delivered@resend.dev），所有发送到该地址的邮件都可以在 Resend 控制台的 “Logs” 中查看，而不会真正投递。这对于调试非常方便。

5. 常见问题、故障排查与进阶优化

在实际部署和使用过程中，你可能会遇到一些问题。这里我总结了一些常见坑点及其解决方案。

5.1 数据库连接与 Prisma 相关问题

问题现象	可能原因	解决方案
应用启动失败，报错`PrismaClientInitializationError`	1.`DATABASE_URL`环境变量未设置或错误。 2. 数据库服务器不允许远程连接（如 Supabase 未配置 IP 白名单）。 3. 数据库不存在或用户权限不足。	1. 检查`.env.local`或 Vercel 环境变量，确保连接字符串格式正确：`postgresql://user:password@host:port/dbname`。 2. 对于 Supabase，在 Project Settings -> Database -> Connection Pooling 中检查 IP 配置，或在 SQL Editor 中运行`ALTER USER your_user WITH SUPERUSER;`临时解决权限问题（生产环境慎用）。 3. 确认数据库已创建，且连接用户有足够的权限。
运行`prisma db push`或`migrate`时超时或失败	1. 网络问题。 2. 数据库性能不足或连接数满。 3. Schema 存在冲突（如重复运行迁移）。	1. 检查网络连接。 2. 对于 Supabase 免费计划，有连接数和性能限制，可尝试在非高峰时段操作或升级计划。 3. 检查`_prisma_migrations`表，或使用`prisma migrate resolve`命令解决迁移冲突。
本地开发时，Prisma Client 类型提示丢失	`node_modules/.prisma`客户端未正确生成或损坏。	1. 删除`node_modules/.prisma`文件夹。 2. 重新运行`npx prisma generate`。 3. 重启你的 TypeScript 语言服务器（在 VS Code 中，快捷键`Cmd+Shift+P`输入 “Restart TS Server”）。

5.2 认证与 Supabase 相关问题

问题现象	可能原因	解决方案
点击魔法链接后，页面报错或无法登录	1. Supabase 项目 URL 和 Anon Key 配置错误。 2. 重定向 URL 未在 Supabase 中正确配置。 3. 邮件链接过期（默认有效期为24小时）。	1. 核对`NEXT_PUBLIC_SUPABASE_URL`和`NEXT_PUBLIC_SUPABASE_ANON_KEY`。 2. 登录 Supabase 仪表盘，进入 Authentication -> URL Configuration，确保`Site URL`和`Redirect URLs`包含了你的应用地址（如`http://localhost:3000`,`https://yourdomain.com`）以及认证回调路径（如`http://localhost:3000/auth/callback`）。 3. 重新请求发送魔法链接。
用户会话无法持久化，刷新页面后退出登录	1. Next.js 中间件配置可能有问题，未正确保护路由或处理会话。 2. Supabase 客户端初始化方式有误。	1. 检查`middleware.ts`逻辑，确保它正确地从请求 Cookie 中获取用户并放行已认证请求。 2. 确保在客户端和服务端使用相同的方式初始化 Supabase 客户端。项目通常会提供一个`lib/supabase/client.ts`和`lib/supabase/server.ts`分别处理两端。

5.3 部署与性能优化

问题：Vercel 部署构建失败，提示prisma generate错误。
- 原因：Vercel 的构建环境可能缺少必要的原生绑定（如prisma需要openssl）。
- 解决：在package.json中，将prisma作为postinstall钩子的一部分，并确保 Vercel 使用正确的 Node 版本。也可以在 Vercel 项目设置的 “Build & Development Settings” 中，将 “Install Command” 设置为npm ci(比npm install更适合 CI/CD) 并指定 Node 版本。
问题：应用在 Vercel 上运行缓慢，尤其是数据查询。
- 原因：Serverless Function 冷启动，或数据库查询未优化。
- 优化建议：
  1. 数据库索引：为经常用于查询和排序的字段（如Transaction表的userId,date,type）添加索引。可以在 Prisma Schema 中使用@@index指令定义。
  2. 查询优化：避免在 Server Component 中进行N+1查询。使用 Prisma 的include或select进行关联查询，减少数据库往返次数。
  3. 缓存策略：对不常变的数据（如用户资料、静态类别列表）使用 Next.js 的数据缓存（fetch的cache选项）或 React 的cache()函数。
  4. 使用 Edge Runtime：对于某些中间件或简单的 API 路由，可以考虑使用 Vercel 的 Edge Runtime，启动速度更快。
问题：想添加新的财务类别或账户类型。
- 解决：这涉及到数据模型的扩展。首先，在prisma/schema.prisma中修改模型（例如，为Transaction.category定义一个枚举类型Category以限制可选值）。然后，运行npx prisma migrate dev --name add_category_enum创建迁移文件并应用到数据库。最后，在前端表单（如lib/validations.ts和相关的 Select 组件）中更新对应的选项。

5.4 安全加固建议

环境变量管理：绝不要将.env.local文件提交到公开 Git 仓库。使用.env.example文件列出所需变量。生产环境的密钥务必通过 Vercel 等平台的环境变量功能管理。
数据库连接池：在 Serverless 环境下，直接使用DATABASE_URL可能导致连接数耗尽。Supabase 提供了连接池模式（Connection Pooling）的专用连接字符串，请在项目设置中获取并使用它。
行级安全（RLS）：Supabase PostgreSQL 支持行级安全策略。强烈建议为所有表启用 RLS，并创建策略确保用户只能访问自己的数据（auth.uid() = user_id）。这样即使应用层有 bug，数据库层也能提供额外保护。Prisma 目前不直接支持 RLS，但你可以通过 Supabase 的 SQL 编辑器手动启用。
加密密钥管理：如果实现了数据加密，ENCRYPTION_KEY必须足够长且随机，并安全存储。考虑使用密钥管理服务（如 Vercel 的vc env pull或专门的 KMS）。

6. 从使用到贡献：参与开源生态

Expense.fyi 作为一个开源项目，其价值不仅在于工具本身，更在于社区。如果你在使用中发现了 Bug，或者有改进的想法，可以积极参与贡献。

如何贡献：

报告问题（Issue）：在 GitHub 仓库的 Issues 页面，点击 “New Issue”。清晰地描述问题：环境（本地/生产）、复现步骤、期望行为、实际行为，并附上错误日志或截图。
提交代码（Pull Request）：
- Fork 原仓库到你自己的 GitHub 账户。
- 克隆你的 Fork 到本地。
- 创建一个新的分支来开发你的功能或修复：git checkout -b feat/my-new-feature。
- 进行代码修改。确保遵循项目的代码风格（如果有.prettierrc或.eslintrc配置）。
- 编写或更新测试（如果项目有测试套件）。
- 提交更改：git commit -m "feat: add awesome new feature"。
- 推送到你的 Fork：git push origin feat/my-new-feature。
- 在原始仓库页面发起 Pull Request，详细说明你的改动内容和原因。

贡献的方向建议：

国际化（i18n）：添加多语言支持（如中文），使用next-intl或react-i18next。
数据分析增强：集成更强大的图表库（如 Recharts），提供年度对比、趋势预测等视图。
数据导入/导出：支持从主流银行 CSV 文件、微信/支付宝账单导入，以及导出为 Excel、PDF 格式。
移动端体验：通过 PWA 技术，让应用可以安装到手机主屏幕，并优化移动端触控交互。
自动化记账：探索与银行 API（需用户授权）或邮件账单解析的集成，实现半自动记账。

经过这样一番从内到外的拆解，Expense.fyi 不再只是一个黑盒应用。你看到了它如何利用现代 Web 技术栈解决一个具体问题，如何平衡开发效率、用户体验和数据安全。无论是直接部署使用，还是将其作为学习全栈开发的蓝本，这个项目都提供了极高的价值。我在实际部署和代码阅读过程中，最大的体会是：一个好的开源项目，其清晰的架构、严谨的类型安全和详尽的文档，能极大地降低参与门槛和运维成本。如果你正想找一个项目来练手 Next.js 全栈开发，或者需要一个真正属于自己的财务管家，不妨就从 fork 这个仓库开始。