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.

- Next.js
- Leeuwarden, NL
- 4 projecten
- Bijgewerkt 8 okt 2026

## 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](https://sanderr.nl/nl/projects/)

- [Traklyst Product, design & development · 2026 Next.js · TypeScript · React · Tailwind · shadcn/ui](https://sanderr.nl/nl/projects/traklyst/)
- [OnderhoudJe Product, design & development · 2025 Expo · React Native · Next.js · TypeScript · Node.js · PostgreSQL · Docker](https://sanderr.nl/nl/projects/onderhoudje/)
- [UntitledOne Open-source samenwerken aan muziek · 2025 Next.js · React · TypeScript · Tailwind · shadcn/ui](https://sanderr.nl/nl/projects/untitledone/)
- [Oursondenaissance Headless commerce · 2024 Next.js · Node.js · React · shadcn/ui · Tailwind · TypeScript](https://sanderr.nl/nl/projects/oursondenaissance/)

Vaak in dezelfde projecten

- TypeScript
- React
- Tailwind
- shadcn/ui
- Node.js
- [Expo](https://sanderr.nl/nl/react-native/)
- 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](https://sanderr.nl/nl/wordpress/) | Inhoud die iemand zelf beheert: een site, een portfolio, een blog. |
| [Expo](https://sanderr.nl/nl/react-native/) | 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](https://sanderr.nl/nl/laravel/) | Een applicatie met gebruikers, rechten en veel data. |

---

- [Sander de Vries for agents](https://sanderr.nl/llms.txt)
- [Sitemap](https://sanderr.nl/sitemap.xml)
- [Contact](mailto:hello@sanderr.nl)