Mortgage Calculator Template
- Next.js
- TypeScript
A full monthly mortgage payment with tax, insurance and HOA, and a breakdown of where it goes.
A Next.js app that works out what a home costs each month. Enter the price, down payment, rate and term, plus property tax, insurance and HOA, and get the total monthly payment, a ring showing how it splits, and the yearly cost. Use it on a real estate or lending site, or lift the route to price listings automatically.
What it does
- The whole payment
- Principal and interest plus property tax, home insurance and HOA, so the number matches what a buyer actually pays.
- Where the money goes
- A ring and a legend split the monthly total into its parts, drawn in plain SVG with no chart library.
- Checked inputs
- The route rejects out-of-range prices, rates and terms, and a down payment bigger than the price, before spending a call.
- Balance chart on paid plans
- With a paid key the app adds total interest and a chart of the loan balance from the amortization schedule.
- Keeps your key private
- The browser only talks to your own API route, which holds the key, caches each loan for a day and limits each visitor to 10 a minute.
How it works
The route: it validates the loan, then posts it to Mortgage Calculator.
export async function GET(request: Request) {
const params = new URL(request.url).searchParams;
const loan = {} as Record<Field, number>;
for (const [name, { min, max }] of Object.entries(FIELDS) as [Field, { min: number; max: number }][]) {
const value = Number(params.get(name) ?? 0);
if (!Number.isFinite(value) || value < min || value > max) return fail(`Check the ${name.replace('annual_', '')} value`);
loan[name] = name === 'years' ? Math.round(value) : value;
}
if (loan.downpayment >= loan.amount) return fail('The down payment must be less than the price');
const key = `mortgage:${JSON.stringify(loan)}`;
const hit = fromCache(key, TTL_MS);
if (hit) return Response.json(hit);
const blocked = guard(request);
if (blocked) return blocked;
return respond(async () => {
const data = await callApi('mortgagecalculator', { json: loan });
toCache(key, data);
return data;
});
}Deploy it
- Get a free API key
The free plan includes 200 credits a month, no card needed. Create your key.
- Deploy it
Click Deploy to Vercel. Vercel copies the repo to your GitHub account and asks for
APIVERVE_API_KEY: paste your key there. - Open your app
Vercel builds it and gives you a live URL, usually in about a minute. Every push to the repo redeploys it.
Try the Mortgage Calculator API — the call this template makes
No key required to try it. Get a key to use it in your app.
{
"status": "ok",
"error": null,
"data": {
"amount": 570000,
"downpayment": 57000,
"rate": 6.8,
"years": 30,
"total_interest_paid": 690975.44,
"total_loan_payment": 1203975.44,
"interestRatio": 57.39,
"monthly_payment": {
"total": 3558.13,
"mortgage": 3344.38,
"property_tax": 0,
"hoa": 0,
"home_insurance": 0,
"pmi": 213.75
},
"annual_payment": {
"total": 42697.51,
"mortgage": 40132.51,
"property_tax": 0,
"hoa": 0,
"home_insurance": 0,
"pmi": 2565
},
"formatted": {
"amount": "$570,000",
"monthlyPayment": "$3,344.38",
"totalInterestPaid": "$690,975.44",
"totalLoanPayment": "$1,203,975.44"
},
"loan_amount": 513000,
"ltv": 90,
"payoff_date": "2056-11",
"pmi": {
"required": true,
"rate": 0.5,
"monthly": 213.75,
"months_charged": 113,
"removal_month": 114,
"total": 24153.75,
"removal_date": "2036-05"
},
"extra_payments": {
"monthly": 200,
"months_to_payoff": 304,
"months_saved": 56,
"total_interest_paid": 563208.85,
"interest_saved": 127766.58,
"payoff_date": "2052-03"
},
"amortization_schedule": [
{
"month": 1,
"interest_payment": 2907,
"principal_payment": 437.38,
"remaining_balance": 512562.62,
"date": "2026-12"
},
{
"month": 2,
"interest_payment": 2904.52,
"principal_payment": 439.85,
"remaining_balance": 512122.77,
"date": "2027-01"
},
{
"month": 3,
"interest_payment": 2902.03,
"principal_payment": 442.35,
"remaining_balance": 511680.42,
"date": "2027-02"
}
]
}
}