我如何构建了一个真正帮助人们节省20万美元以上的抵押贷款计算器（Next.js + Real Math）

Source: Dev.to

问题：金融计算器根本不算有用的东西

• 只会做基础算术（本金 × 利率 × 时间）。
• 没有策略对比（如果我去投资会怎样？）。
• 被电子邮件墙挡住（先把你的数据给我们！）。
• 没有解释数学原理（黑箱计算）。
• 不考虑现金流效率（Velocity Banking）。

我是一名懂复利的开发者，却找不到能回答以下问题的工具：“我应该使用 HELOC、提前还款，还是把差额去投资？”

于是我自己做了一个。它意外地变成了一个产品，帮助 2000+ 用户 在预计利息上平均节省 $142,000。

（免责声明：我就是这个工具的创建者。我最初是为了解决自己的问题而开发的，现在把逻辑公开分享。）

大多数计算器算错的数学

大多数计算器使用的都是适用于车贷的简单公式，却因为忽略 摊销表 而在抵押贷款上失效。

抵押贷款的利息在前期集中。第 1 年多付 $100 能比 第 20 年多付 $100 节省更多。

为了解决这个问题，我构建了一个 按月模拟贷款 的引擎，能够响应 “一次性付款” 或 “HELOC 注入” 等事件。

技术栈

前端

• Next.js 14（App Router）+ TypeScript
• Tailwind CSS + Shadcn UI

后端 / 数据库

• Supabase（PostgreSQL）

数学计算

• 自定义引擎 + decimal.js 进行精确计算

实时响应

// app/calculator/page.tsx (Simplified)
import { useState, useEffect } from 'react';

export default function Calculator() {
  useEffect(() => {
    // component logic here
  }, []);
  return (
    <>
      {/* UI elements */}
    </>
  );
}

Edge Function（Supabase）

// supabase/functions/analyze-scenario/index.ts
import { serve } from "https://deno.land/std@0.168.0/http/server.ts";

serve(async (req) => {
  // This runs on the Edge, close to the user
  // Log anonymous stats
  const result = { /* analysis result */ };
  return new Response(JSON.stringify(result), {
    headers: { "Content-Type": "application/json" },
  });
});

差点把我逼疯的 Bug

Bug #1：浮点数噩梦

JavaScript 原生的浮点运算在利息计算中引入了细微误差。

解决办法： 将所有数学运算迁移到 Decimal.js。

// ❌ BAD (Native JS)
const monthlyPayment = principal * rate / 12;

// ✅ GOOD (Decimal.js)
import Decimal from "decimal.js";

const monthlyPayment = new Decimal(principal)
  .mul(rate)
  .div(12);

结果（来自 2000+ 用户的数据）

快速查看数据库即可看到用户选择的策略：

SELECT 
  strategy,
  COUNT(*) AS users,
  AVG(savings) AS avg_savings
FROM user_choices
GROUP BY strategy;

当人们看到可视化的数学结果时，几乎不会再选择 “什么都不做”。

经验教训

• 可视化能促销：一堆数字的表格很枯燥。展示 “自由日期” 从 2055 移动到 2032 的图表更能打动人心。
• 上下文很重要：单独的计算器不够。用户需要了解 为什么 这些数学成立，于是我把工具链接回我的 Velocity Banking 策略指南，以填补知识鸿沟。

亲自尝试

• 在线演示：在此尝试 Mortgage Killer App
• 完整策略文档：（链接到文档）

讨论

在评论区留下你的想法吧！ 👇