Vereisten

Voordat je Next.js installeert, zorg dat je Node.js hebt. Next.js vereist minimaal Node.js 18.18 of hoger.

node --version
# Verwacht: v18.18.0 of hoger

💡 Node.js niet geïnstalleerd?

Ga naar de Node.js Setup pagina en installeer de LTS versie.

Project Aanmaken

Maak eerst een lege map aan voor je project. Dit kan via Finder of de terminal:

# Maak een map aan en navigeer erin
mkdir workout-tracker
cd workout-tracker

💡 Via Finder (alternatief)

Maak een lege map aan op je bureaublad of in Documenten. Open daarna je terminal, typ cd (met spatie) en sleep de map op het terminalvenster. Druk op Enter.

Maak het Next.js project aan in de huidige map met een punt (.) als naam:

npx create-next-app@latest .

Let op: de punt is belangrijk!

npx create-next-app@latest . installeert Next.js in de huidige map. Zonder punt maakt het een extra submap aan, wat je dan twee niveaus diep zit.

Installatie Opties

De CLI vraagt eerst of je de aanbevolen standaard wilt. Kies No, customize settings — dan kun je zelf kiezen:

Would you like to use the recommended Next.js defaults? › No, customize settings

Daarna volgen individuele vragen. Gebruik deze antwoorden:

Would you like to use TypeScript? › No
Which linter would you like to use? › ESLint
Would you like to use React Compiler? › No
Would you like to use Tailwind CSS? › Yes
Would you like your code inside a src/ directory? › No
Would you like to use App Router? › Yes
Would you like to customize the import alias? › No
Would you like to include AGENTS.md? › No

Waarom deze keuzes?

  • TypeScript: No — Gewone JavaScript, geen extra syntax
  • ESLint — Helpt met foutmeldingen in je editor
  • React Compiler: No — Experimenteel, nog niet stabiel genoeg
  • Tailwind CSS: Yes — Makkelijk snel stylen
  • src/ directory: No — Simpelere mappenstructuur
  • App Router: Yes — De moderne manier van werken in Next.js
  • Import alias: No — Niet nodig voor dit project
  • AGENTS.md: No — Niet nodig voor dit project

💡 Waarom niet de aanbevolen standaard?

De aanbevolen standaard installeert TypeScript. Omdat deze cheat sheet JavaScript gebruikt, kiezen we handmatig voor JavaScript zodat de bestandsextensies kloppen (.js en .jsx).

✅ Verwacht resultaat na installatie:

Creating a new Next.js app in /Users/jou/Desktop/workout-tracker.

Installing dependencies:
- next
- react
- react-dom

Success! Created workout-tracker at ...

💡 Warning over eslint-visitor-keys?

Je kunt een waarschuwing zien zoals npm warn EBADENGINE Unsupported engine. Dit is onschuldig — je project werkt gewoon. Het is een versie-melding van een intern pakket, geen fout.

Dev Server Starten

Start de development server:

npm run dev

✅ Verwacht resultaat in terminal:

▲ Next.js 16.x.x (Turbopack)
- Local:         http://localhost:3000
- Network:       http://192.168.x.x:3000
✓ Ready in 217ms

Open je browser en ga naar http://localhost:3000. Je ziet de standaard Next.js welkomstpagina.

💡 Hot Reload

Als je een bestand opslaat, herlaadt de pagina automatisch. Je hoeft de server niet opnieuw te starten.

💡 Next.js logo rechtsonder?

Je ziet een klein Next.js-logo rechtsonder in de pagina. Dat is de Dev Toolbar — een hulpmiddel voor development. Dit is normaal en verdwijnt automatisch als je je app live zet. Je hoeft er niks mee te doen.

NPM Scripts

In package.json staan handige scripts:

{
  "scripts": {
    "dev": "next dev",
    "build": "next build",
    "start": "next start",
    "lint": "next lint"
  }
}
Wat doet elk script?
  • npm run dev — Start development server met hot reload
  • npm run build — Bouw een productie versie
  • npm start — Start de productie versie (na build)
  • npm run lint — Check je code op fouten

💡 Verschil dev vs start

Tijdens het bouwen gebruik je altijd npm run dev. npm start is voor productie op een server.

Problemen oplossen

❌ "npx: command not found"

Oorzaak: Node.js niet goed geïnstalleerd

Oplossing: Installeer Node.js opnieuw via nodejs.org (LTS versie)

❌ "Port 3000 already in use"

Oorzaak: Een ander programma gebruikt poort 3000

Oplossing: Start op een andere poort:

npm run dev -- -p 3001

❌ Installatie hangt of mislukt

Oplossing: Leeg de map en probeer opnieuw:

# Verwijder alle bestanden in de huidige map
rm -rf .
# Of: verwijder de map zelf en begin opnieuw
cd ..
rm -rf workout-tracker
mkdir workout-tracker && cd workout-tracker
npx create-next-app@latest .

Checklist

✅ Check of je hebt:

  • Node.js v18.18 of hoger geïnstalleerd
  • Lege map aangemaakt en erin genavigeerd
  • npx create-next-app@latest . uitgevoerd
  • "Yes, use recommended defaults" gekozen
  • npm run dev gestart
  • Welkomstpagina zichtbaar op http://localhost:3000

Volgende Stap

Project staat! Tijd om de mappenstructuur te begrijpen.

Mappenstructuur →

Leer de speciale bestanden en mappen kennen