Terug naar blog

Mijn Excelsheet was nét niet helemaal correct, dus bouwde ik een hypotheektool

Projecten · Next.js · React · TypeScript · AI · Finance

Intro

Ik had een Excelsheet om mijn hypotheekkosten bij te houden. Hij klopte niet helemaal. Hem fixen kostte meer moeite dan een betere versie bouwen, dus dat deed ik.

Het resultaat is een hypotheek-analysetool die een maand-voor-maand aflossingsschema berekent, rekening houdt met mijn LTV-afhankelijke risico-opslag en scenario's naast elkaar zet: wat als ik nu €10.000 extra aflos? Wat als de rente na afloop van de rentevast periode hoger is?

De conclusie die eruit rolde was eigenlijk stuitend.

Niet zo technisch? Klik hier voor de simpele uitleg

Dit is de korte versie in gewone taal.

1. Het probleem

Ik had een Excel-spreadsheet om bij te houden wat mijn hypotheek me per maand kost. Die klopte niet helemaal, want mijn maandlast verandert naarmate ik meer heb afgelost. Dat is ingewikkeld om in Excel goed te doen.

2. De oplossing

Ik bouwde een webapplicatie die het precies berekent: elke maand opnieuw, rekening houdend met belastingvoordeel en de manier waarop mijn rente daalt als mijn schuld daalt.

3. De scenario-vergelijker

Het interessantste onderdeel is de vergelijker: wat gebeurt er als ik nu een extra bedrag aflos? Hoeveel bespaar ik dan op de totale kosten, en hoe veel korter loop de hypotheek?

4. De conclusie

Bij een lage rente en belastingaftrek is je hypotheek eigenlijk goedkoop geld. Extra aflossen levert minder op dan hetzelfde bedrag sparen of beleggen. Dat wist ik al, maar nu kan ik het precies berekenen.

TL;DR: Een hypotheek-analysetool gebouwd in Next.js, React en TypeScript. Maand-voor-maand aflossingsschema, LTV-afhankelijke risico-opslag, HRA-berekening, eenmalige en periodieke extra aflossingen, en een scenario-vergelijker. Draait volledig in de browser, geen server, geen tracking. Zelfgehost in Docker.


De aanleiding

Mijn hypotheek heeft een LTV-afhankelijke risico-opslag. Dat betekent dat mijn maandlast niet vaststaat: naarmate ik meer aflos en de verhouding tussen schuld en woningwaarde daalt, zakt de opslag en betaal ik minder rente. Elke tien procent LTV-drempel die ik passeer scheelt een stukje.

Dat is lastig om in Excel goed bij te houden. Je kunt een annuïtaire berekening vooraf maken, maar dan gebruik je één vaste rente over de hele looptijd. Mijn rente verandert tussentijds. De sheet klopte dus nooit helemaal.

Op een gegeven moment was het sneller om een betere versie te bouwen dan de sheet te fixen.


Wat doet de tool?

De hoofdpagina berekent een volledig maandoverzicht over de hele looptijd: rente, aflossing, HRA en resterende schuld per maand. De LTV wordt elke maand opnieuw berekend, waardoor de risico-opslag automatisch daalt zodra een drempel gepasseerd wordt.

Let op: de bedragen en percentages in de screenshots zijn fictieve voorbeeldwaarden.

Dashboard met samenvatting, maandlastengrafiek en actuele LTV
Dashboard met kerncijfers, actuele LTV en de ontwikkeling van rente en aflossing over de tijd.

Je kunt meerdere taxatiewaarden opgeven met een ingangsdatum, zodat de tool op het juiste moment de juiste waarde gebruikt. Eenmalige en periodieke extra aflossingen zijn ook meegenomen, inclusief een cap zodat je nooit meer aflost dan het resterende saldo.

Het interessantste onderdeel is de vergelijker. Twee scenario's naast elkaar: huidige situatie versus een variant. Wat als ik nu €10.000 extra aflos? Wat als de rente bij verlenging 1% hoger uitvalt? De tool laat zien wat dat doet met de totale kosten, de aflostijd en de maandlast.

Volledig maandoverzicht met filtering per jaar en kolommen voor rente, aflossing, netto en LTV
Het volledige maandoverzicht met jaarfilter en alle relevante kolommen per termijn, inclusief netto last en LTV.

De LTV-opslag

Dit is het stukje dat de meeste online hypotheektools niet doen. De annuïteit wordt bij hen één keer vooraf berekend met een vaste rente. Bij mij wordt hij elke maand opnieuw berekend.

De reden: mijn opslag verandert bij elk veelvoud van tien procent LTV, naar boven afgerond. Zodra ik onder de 80% kom, daalt de opslag. Onder de 70% opnieuw. Dat effect is nog geen tientje per maand, maar over een looptijd van dertig jaar telt het op. Een tool die dat negeert geeft een verkeerd beeld.

Instelscherm voor LTV-risico-opslag met drempels en percentages
Instelscherm voor de LTV-risico-opslag: drempels en percentages zijn aanpasbaar aan je eigen hypotheekvoorwaarden.

De conclusie die eruit rolde

Ik sloot mijn hypotheek af in 2020 tegen 1,9% rente. Na aftrek van de HRA betaal ik rekening houdend met het LTV-tarief effectief rond een procent op jaarbasis. Dat is goedkoper dan elk spaarproduct dat momenteel beschikbaar is, en ruim onder het langetermijnrendement van een indexfonds.

De conclusie is dus eigenlijk stuitend simpel: extra aflossen loont bijna nooit. Elk euro die ik extra aflos levert me een procent per jaar op. Datzelfde geld op een spaarrekening of in een indexfonds doet structureel meer. Mijn hypotheekschuld is op dit moment goedkoper dan het alternatief.

Ik wist dit al intuïtief, maar nu kan ik het precies berekenen. En bij renteherziening, als mijn rente straks op 4% of hoger uitkomt, verandert die conclusie. De vergelijker laat me zien wanneer dat kantelpunt bereikt is.


De stack

De tool draait volledig in de browser. Geen server, geen database, geen tracking. Wat je invult blijft op je eigen apparaat, tenzij je expliciet toestemming geeft voor opslag in localStorage.

ComponentTechnologie
FrameworkNext.js (App Router) + React + TypeScript
StylingTailwind CSS v4
GrafiekenRecharts
HostingDocker Compose op EliteDesk, poort 2803

De keuze voor Next.js was pragmatisch: goede TypeScript-ondersteuning, geen onnodige complexiteit voor een single-page tool, en Copilot genereert er betrouwbare code voor.

Er zit een iOS-workaround in voor een eigenaardigheid van React 19 in WKWebView. React 19 delegeert events naar de root container, maar iOS Chrome ondersteunt dat niet betrouwbaar. Knoppen in de invoerwizard luisteren daarom via een native touchend event op data-action attributen. Op desktop valt het gewoon terug op onClick. Dit soort edge cases zijn precies waar je een paar uur op kunt vastlopen, of in vijf minuten uitkomt met de juiste hulp.


De rol van AI

De rekenlogica heb ik gecontroleerd aan mijn hypotheekvoorwaarden. Die moet kloppen, en het was belangrijk om te begrijpen wat er precies gebeurde. De rest; componenten, styling, de grafiekintegratie, de iOS-workaround is grotendeels via Copilot gegaan.

Het verschil met een paar jaar geleden: ik zou dit project waarschijnlijk niet hebben afgemaakt. Niet omdat de berekening te ingewikkeld is, maar omdat de drempel van "nu moet ik ook nog een mooie UI bouwen met grafieken en een vergelijker" groot genoeg was om het bij een halfwerkende Excelsheet te laten. Nu is die drempel weg.


Vragen / feedback

Als je vragen hebt over de aanpak of de berekeningen, stel ze dan via mijn contactformulier en ik neem contact met je op.