Ga naar de inhoud
Sander
Neem contact op
Menu
Neem contact op

Next.js developer · Leeuwarden

Hoe ik met Next.js bouw

Ik ben developer in Leeuwarden en bouw mijn eigen producten met Next.js, React en TypeScript: van een eerste idee tot iets dat live staat, met de frontend en de backend erbij. Dit is hoe ik dat aanpak.

Waar ik op let

Wat ik bij elk product opnieuw doe.

  1. 01

    Van idee tot live

    Traklyst begon als zijproject en groeide uit tot een product met een eigen herkenningspijplijn, accounts en betaalde abonnementen. Ik heb het ontworpen en gebouwd, en host het zelf.

  2. 02

    Een frontend met een systeem

    React en TypeScript, met Tailwind en shadcn/ui als basis voor een interface die consistent blijft terwijl het product groeit.

  3. 03

    De backend erbij

    API-routes, een database in PostgreSQL of Supabase, accounts en betalingen. Bij Traklyst en UntitledOne heb ik beide kanten gebouwd.

  4. 04

    Headless voor WordPress

    Een snelle frontend in Next.js, terwijl de inhoud en de bestellingen in WordPress blijven. Zo is de Franse webshop Oursondenaissance opgezet.

  5. 05

    Vindbaar

    Server-side rendering, nette metadata en een productfeed waar dat nodig is. Bij Oursondenaissance hoorden Franse SEO en een feed voor Google Merchant bij de bouw.

  6. 06

    Getest met gebruikers

    UntitledOne is gebouwd op interviews, een enquête en usabilitytests. Wat daaruit kwam, bepaalde wat er in de eerste versie zat.

Hoe werkt Traklyst?

Traklyst is het grootste wat ik in Next.js heb gebouwd. Je plakt een link naar een dj-set op YouTube of SoundCloud en de tracklist wordt op de pagina opgebouwd terwijl de scan loopt, met een tijdstempel per track.

Elke scan volgt dezelfde stappen. Eerst verzamelt Traklyst wat er al over de set gepubliceerd is: de beschrijving, de reacties en tracklists van de community. Daarna analyseert het de opname zelf. Een track komt pas in de lijst als twee onafhankelijke bronnen het eens zijn. Een stuk dat niemand kan benoemen blijft als ID staan, in plaats van dat er een gok wordt ingevuld.

Eromheen zit wat een product nodig heeft: accounts, abonnementen en betalingen, en een openbare bibliotheek waarin elke gescande set een eigen pagina krijgt. Begin oktober 2026 stonden daar 2.954 herkende tracks in, waarvan 81% door de audio is bevestigd.

tracks herkend
2.954
bevestigd door de audio
81%
bronnen nodig per track
2

Gebouwd met Next.js

Eigen producten, een afstudeerproject en een webshop.

Bekijk al het werk

Vaak in dezelfde projecten

  • TypeScript
  • React
  • Tailwind
  • shadcn/ui
  • Node.js
  • Expo
  • React Native
  • PostgreSQL
  • Docker

Hoe ik werk

Heldere keuzes, korte rondes en iets echts om op te reageren.

  1. Vind de echte behoefte

    Voordat ik een stack kies, maak ik het doel, de gebruiker en de kleinste versie die het bouwen waard is helder.

  2. Bouw precies genoeg

    Ik kies de simpelste stack die past en werk dan snel toe naar iets dat echt genoeg is om te testen en te verbeteren.

  3. Verfijn de ervaring

    Responsive gedrag, subtiele beweging, toegankelijke keuzes, leesbare code en een helder CMS maken van een werkende build een product dat af is.

Vragen

Wat ik er vaak over hoor.

  1. Ik kies de simpelste stack die past. Draait het om inhoud die iemand zelf beheert, dan is WordPress vaak genoeg. Is het een product met accounts, eigen logica of veel interactie, dan past Next.js beter.

  2. Ja. WordPress blijft dan het beheer en Next.js wordt de voorkant. Oursondenaissance werkt zo, met WooCommerce erachter.

  3. Ja. Bij Traklyst en UntitledOne heb ik zowel de interface als de database, de accounts en de rest van de serverkant gebouwd.

  4. Van UntitledOne wel: dat is open source onder de MIT-licentie.

Welke stack wanneer

Ik kies de simpelste die past.

Stack Wanneer
WordPress Inhoud die iemand zelf beheert: een site, een portfolio, een blog.
Expo Iets dat je bij je hebt en dat je moet herinneren: een app.
Next.js Een product met accounts, eigen logica of veel interactie.
Laravel Een applicatie met gebruikers, rechten en veel data.