Next.js-project lokaal testen safari
10 oktober 2025
16 min lezen
Door Kevin R
Type:Software:
Tutorial
Code
Als je websites of webapps bouwt met Next.js, is het belangrijk om niet alleen op je desktop te testen, maar ook op echte mobiele apparaten. Vooral iPhones gedragen zich soms nét anders, en Safari heeft zijn eigen eigenaardigheden. Hieronder leg ik uit hoe.
1. Start je dev-server op alle netwerkinterfaces
Met je project folder open ga naar de terminal en voer het volgende uit. Standaard draait npm run dev alleen op localhost, waardoor je iPhone het project niet kan bereiken. Start de dev-server daarom met een host die alle netwerkinterfaces accepteert:
npm run dev -- -H 0.0.0.0 -p 3000H 0.0.0.0laat je server luisteren op alle adressen in je netwerk.p 3000bepaalt de poort (standaard voor Next.js).
2. Zoek het lokale IP-adres van je Mac
Je iPhone heeft je lokale IP nodig om verbinding te maken. Vraag dit op met:
ipconfig getifaddr en0Dit geeft iets als 192.168.1.42.
3. Open je lokale site op je iPhone
Zorg dat je iPhone op hetzelfde wifi-netwerk zit als je Mac. Open Safari op je iPhone en ga naar:
http://192.168.1.42:3000(gebruik jouw eigen IP-adres hier)
📱 Je draait nu je lokale Next.js-site rechtstreeks op je iPhone!
4. Debuggen via Lightning-kabel en Safari DevTools
Wil je meer dan alleen kijken? Sluit je iPhone aan via een Lightning-kabel en gebruik de ingebouwde Safari Developer Tools:
- Verbind je iPhone met je Mac via USB.
- Open op je iPhone Safari en ga naar je lokale site.
- Op je Mac verschijnt nu in Safari: Ontwikkel → [Naam van jouw iPhone].
Wat je hiermee kunt:
- Live DOM-inspectie en elementen selecteren op je iPhone-site
- CSS live aanpassen en zien hoe het eruitziet op mobiel
- Console-logs bekijken en debuggen
- Network-verkeer en performance analyseren
- Responsieve bugs direct opsporen