CleverTech bouwde de site als maatwerk-Next.js-applicatie met React en Tailwind CSS. De content staat in SQLite (via node:sqlite), geseed uit TypeScript-fixtures; de deploy loopt via Docker en GHCR naar Plesk, met een persistent volume voor database en uploads. De domein- en zoekmachinekant van dit traject — de migratie naar dutchfibertrading.com en de keywordstructuur — staat in een aparte case; hier gaat het over de bouw.
De viertaligheid is met next-intl doorgevoerd tot in de routestructuur: elke taal heeft eigen, vertaalde paden voor de productcatalogus, het projectenoverzicht en het kenniscentrum. Dat kenniscentrum is geen losse blogbak maar een geordend geheel van topic-clusters met certificaten, datasheets en normen erbij — het inhoudelijke bewijsmateriaal waar een voorschrijvende partij op zoekt. Voor AI-crawlers staat er een llms.txt.
De kostencalculator op de website rekent een toepassing door en geeft naast de kosten ook de CO₂- en MKI-uitkomst. Er zijn presets per referentieproject, zodat een bezoeker niet vanaf nul hoeft te beginnen maar kan starten bij een vergelijkbaar project uit het projectenoverzicht.
Naast de calculator staat een keuzehulp-wizard, in alle vier de talen. Die leidt de bezoeker via zijn toepassing naar het passende vezeltype. Belangrijk detail: de wizard draait op dezelfde productdata als de catalogus en is via de beheeromgeving aan te passen — hij is dus geen los stuk hardgecodeerde logica dat na de eerste assortimentswijziging uit de pas gaat lopen.
“
Ontwerpdoel van de calculator en de keuzehulp: een bezoeker die het verschil tussen macro-, staal- en basaltvezel niet kent, zelfstandig bij een onderbouwde aanvraag laten uitkomen. Dat is het gestelde doel van het ontwerp — de site is net live, er zijn nog geen gemeten conversie- of bezoekcijfers.
De site heeft een winkelwagen met zowel een bestel- als een offerteflow, bewust zonder online betaling. Een webshop met offerte-aanvraag past bij deze markt: hoeveelheden, levertijden en projectcondities worden in het gesprek vastgelegd, niet in een betaalscherm. De dealerspagina wijst afnemers door naar de bestaande handelskanalen.
Achter een afgeschermde /admin zit een eigen beheeromgeving. Daarin beheert Dutch Fiber Trading producten, projecten, artikelen, datasheets, de calculator, de keuzehulp, de sitegegevens en de losse sectieteksten. Er zijn zichtbaarheidsschuifjes per site-onderdeel, drag-and-drop voor de volgorde, uploads die client-side naar WebP worden verkleind, en taaltabbladen met vertaaltooling zodat een artikel in vier talen naast elkaar te onderhouden is. Dit is precies waarom een custom CMS hier boven een standaardpakket ging: de rekentools en de keuzehulp zijn onderdeel van het beheer, niet iets wat ernaast leeft.
De mailinglijst is het onderdeel dat het verst is doorgebouwd. Inschrijven gaat via de footer; de API slaat het idempotent op met de taal van de abonnee erbij en stuurt direct een welkomstmail in die taal, mét de actieve editie en een persoonlijke afmeldlink. In de beheeromgeving maakt de klant doelgroepen aan, deelt abonnees in, en verstuurt per doelgroep. Er is een HTML-nieuwsbriefeditor met PDF-upload, genummerde edities, CSV-import en een afmeldlijst die bewaard blijft — zodat een afgemeld adres bij een volgende import niet terugkomt. Verzending loopt via SendGrid op een met SPF en DKIM geverifieerd domein.
Op de opgeleverde site is een performance-overhaul uitgevoerd: ISR, kleinere payloads, minder client-side JavaScript en edge-caching. Verder zijn security-headers gezet en is de toegankelijkheid opgetrokken tot een Lighthouse-score van 100. Elk formulier dat een aanvraag oplevert — contact, offerte, bestelling en nieuwsbrief — is als conversie-event in GA4 gezet, achter cookieconsent, zodat vanaf dag één meetbaar is welke ingang werkt.
De bouw liep achter een wachtwoordgate op een preview-domein; sinds 21 juli staat daar een host-bewuste variant op, die de live site publiek maakt en de preview dicht houdt. Er waren gedocumenteerde klantfeedbackrondes op acht dagen in juli — een iteratiecyclus van gemiddeld twee tot drie dagen.
Wat nog loopt: een deel van de productbeelden en tekstspecificaties wacht op aanlevering en bevestiging door de klant. Een dealerportaal en een volledige webshop met iDEAL zijn als vervolgstap ontworpen, maar in dit traject niet gebouwd.
